css中选择器介绍
zhezhongyun 2025-05-21 17:56 11 浏览
选择器:
选择器是用来选择目标元
素的,选择器分基础选择器和复合选择器及伪类选择器。
基础选择器:
标签名{} /* 1 标签选择器:把某类标签全部选中,如下: */
p{font-size:36px;}
.类名{} /* 2 类选择器(class选择器):选中相同类名的元素,.声明,class调用,如下: */
.box{width:100px;height:50px;}
<div class="box"></div>
<div class="box stylebox"></div> /* 多类名选择器:在class属性中添加多个类名,中间用空格隔开,即可调用多类名来实现多个样式*/
#id名{} /* 3 id选择器:选中id被命名为某名的元素,#定义,id调用,id选择器具有唯一性,相同的id名只能出现在一个标签上 */
#box{width:100px;height:200px;}
<div id="box"></div>
*{}/* 4 通配符选择器:选中文档中所有元素,不建议使用,一般使用的情况是非常少的。 */
*{color:blue;font-size:20px;}
复合选择器:
div span{/* 1 后代选择器:又称包含选择器,用于选择标签的后代子孙元素及元素组,语法:外层标签写在前面,内层标签写在后面,中间用空格隔开,需要强调的是只要是后代无论多少代都可以选中,它和子代选择器的区别就在这里:不仅仅可以选择紧挨着的下一级元素。 */
color:blue;
}
<div>
<ul>
<li>
<span>苹果</span><!-- 被选中项-->
</li>
</ul>
</div>
<span>白菜</span>
ul li>a{/* 2子代选择器:选中某标签下紧挨着的某个元素,语法:父级标签 > 子级标签,强调的是:子代选择器选中的是父级紧挨着的子级元素,和后代选择器的区别就在这里。 */
color:pink;
}
<ul>
<li>
<a href="#">test1</a><!-- 被选中项-->
</li>
<li>
<div>
<a href="#">test2</a>
</div>
</li>
</ul>
p.watermelon{/* 3 交集选择器:即又的关系,同时满足条件的会被选中,语法:选择器1选择器2选择器n...,多个选择器连写,中间不用任何字符。 */
color:red;
}
<p>apple</p>
<p>orange</p>
<p class="watermelon">watermelon</p><!-- 被选中项-->
<span>苹果</span>
<span>橙子</span>
<span class="watermelon">西瓜</span>
p,
span,
.pear{/* 4 并集选择器:同时选择多个单独或一组标签,语法:多个选择器中间用逗号连接,可以快速选择需要给相同样式的所有标签 */
color:red;
font-size:40px;
}
<p>苹果</p>
<p>荔枝</p>
<del>大米</del>
<span>香蕉</span>
<ins>地瓜</ins>
<div class="pear">梨</div>
.banana+li {/* 5 相邻元素选择器:选择紧挨着某元素下的一个兄弟元素,语法:选择器1 + 标签,注意兄弟元素选择器*/
color: red;
}
<ul>
<li>苹果</li>
<li class="banana">香蕉</li>
<li>荔枝</li>
</ul>
.banana~li {/* 6 兄弟元素选择器:选择挨着某元素下的所有兄弟元素,语法:选择器1 ~ 标签,注意相邻元素选择器*/
color: red;
}
<ul>
<li>苹果</li>
<li class="banana">香蕉</li>
<li>荔枝</li>
<li>菠萝蜜</li>
<li>桃子</li>
</ul>
伪类选择器:
伪类选择器是以冒号:开始的,如下面链接伪类选择器(需要和伪元素区分):
a:link{color:black;}/* 设置未访问的链接样式 */
a:visited{color:gray;}/* 设置已访问的链接样式 */
a:hover{color:yellow;}/* 设置鼠标经过链接的样式 */
a:active{color:red;}/* 设置鼠标点击时链接的样式 */
/* 需要注意:这四个链接的伪类选择器是按照上面的顺序书写的,必须严格遵循。 */
提示:本文图片等素材来源于网络,若有侵权,请发邮件至邮箱:810665436@qq.com联系笔者 删除。
笔者:苦海123
其它问题可通过以下方式联系本人咨询:
QQ:810665436
微信:ConstancyMan
相关推荐
- Angular UI组件库入门指南 - 如何安装和开始使用(一)
-
本文主要介绍如何安装和开始使用KendoUIforAngular。首先完成安装步骤。然后创建一个简单的应用程序,其中包含一些KendoUIforAngular组件,应用程序源代码可供您参考...
- SPSS22: 3.1.3 数据管理—复制数据属性
-
内容摘自《SPSS常用统计分析教程(SPSS22.0中英文版)(第4版)》3.1.3复制数据属性复制数据属性(CopyDataProperties)可用于建立相同调查问卷的空白数据集,或者复制其...
- 妙用Excel制作漂亮工整的工资条(excel表格中如何制作工资条)
-
工资条的制作方法并不难,但如何用Excel把工资条做得更美观、更有效率,可就要花费一点小心思了。许多人或许已经习惯了用工资明细表做员工工资统计并向上级汇报,将表中的条目慢慢复制粘贴然后打印给员工,这样...
- 如何运用EXCEL制作员工工资条,你造吗?
-
每个月工资发放之后,正规的公司应发给每个员工一个工资条。上面有员工当月工资的详细构成。但不能将工资明细表剪条发放,因为每个数字缺少对应项目,这就需要重新制作一张专门用来打印的工资条。作为劳动者,应该妥...
- 鸿蒙仓颉语言开发实战教程:实现商品分类页
-
今天继续为大家带来仓颉语言开发商城应用的实战教程,今天的内容是实现商品分类页。分类页面要在基本布局的基础上增加一些动态效果,比如点击状态的切换和两个列表容器的联动。下面为大家详细介绍。分类列表先来看左...
- 鸿蒙开发实战:一多开发之缩放布局
-
在HarmonyOS中,使用ArkTS语法进行自适应布局时,缩放布局是一种重要的布局方式。它允许组件根据外部容器的尺寸变化,按照预设的比例或权重调整自身的大小,从而确保在不同设备上都能呈现出良好的视觉...
- 基于WPF的电能质量检测系统上位机软件设计
-
郑恒持,蒋丁宇,卢兴泉,刘泊江(大连海事大学轮机工程学院,辽宁大连116026)摘要:电能质量直接影响着电力系统能否安全运行,为了能及时可靠地检测电能质量,采用全新的WindowsPresen...
- HarmonyOS实战:Tab顶部滑动悬停功能实现
-
前言日常开发过程中,遇到这种Scroll嵌套List列表滑动顶部悬停的场景十分常见,在鸿蒙开发时也正好实现了这个功能,本篇文章将带你一步步实现Tab顶部悬停的效果,建议点赞收藏!实现效果先...
- Axure教程:高级搜索(axure搜索功能怎么做)
-
在原型中,搜索是一个常见的交互设计。但不少同学因为技能不熟悉就没有做对应的交互效果。这篇文章,作者分享了设计搜索功能的整个流程,相信看完你也能做一个很牛逼的交互。高级搜索可以通过使用精确的关键词或短语...
- Excel小技巧: 如何设置自动列宽适应内容
-
我们在整理Excel表格的时候,通常会碰到单元格列宽混乱的情况(如下图所示),这会导致数据显示不完整或浪费空间导致打印不全,每次手动调整列宽都会费时费力,下面教你三个方法,让你一键设置自动列宽,适应单...
- 用好6个公式 Excel随意查询(excel中查询功能怎么用公式)
-
Excel表格一般会储存大量数据,我们可能不是每次都需要使用其中的所有数据,大部分时候只用到其中的一部分,所以数据查询功能就变得非常重要。为此,Excel本身也提供了多少查询方法,供我们使用。首先我们...
- 夏日PC消暑指南:机箱风道与风扇选择
-
进入六月以后北京的天气真是热得让人感觉喘不过气,大家天天打交道的笔记本和台式机更是连人都不如了,所谓热成狗真是一点也不夸张。年年大家在防暑抗高温这个问题上都是八仙过海各显神通,但是很多人光顾着自己凉快...
- Excel VBA必学技巧:用厘米设置单元格大小,办公效率翻倍
-
痛点:Excel默认单位太反人类!你是否经常遇到这些问题:-想设置精确的单元格尺寸,却只能用模糊的"字符宽度"和"磅值"?-设计打印报表时,毫米级的误差导致格式错乱...
- CSS小知识,分享14个你可能还未用上但又实用的CSS属性(下)
-
大家好,在上一篇文章里CSS小知识,分享14个你可能还未用上但又实用的CSS属性(上)我们一起学习了上半部分,这篇文章我们我们继续学习下半部分。八、CSSShakeEffect晃动效果CSS...
- 总结雅虎前端性能优化技巧(16条)(雅虎引擎还能用吗)
-
前言在日常开发中,有很多场景需要我们去做好前端优化,为了防止遗忘,加深记忆,今天参阅了一些资料以及自己的一些总结,梳理出来15条优化技巧。1.合并文件css、js合并,减少http请求数,每次http...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML常用标签 (29)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法:GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- HTML button formtarget 属性 (30)
- CSS 水平对齐 (Horizontal Align) (30)