CSS选择器
首先CSS选择器分这么几大类：
1.基础选择器
2.合并选择器
3.关系选择器
4.属性选择器
5.伪类选择器
6.伪对象选择器
我来一一介绍上面这些基础css选择器，顺便也是对自己的一个总结与复习 。
一.css基础选择器
1.通用选择器，全局选择器（*）
可以与任何元素匹配
常用于设置一些默认样式
优先级最低
2.元素选择器
HTML文档中的元素
p、b、div、a、img、body等
3.类选择器
.className{ } 如：.box{ color:red; }
类名不能以数字开头
一个页面中class名字可以重复
4.ID选择器 #idName{ } 如：#box{color:red;}
一个页面中id相同的id名只能出现一次
一般重复使用的样式不使用ID选择器，因为ID属性是唯一的
二.合并选择器
语法为：
选择器1，选择器2.....{ }
作用是可以提取共同的样式，减少重复代码
例如：.header ,.footer{height:300px;} 中间由逗号隔开
三、关系选择器
1.后代选择器 (E F)
选择所有被E元素包含的F元素，中间用空格隔开
ul li{ color:red; }
<ul>
<li>苹果</li>
<li>橙子</li>
<li>西瓜</li>
</ul>
2.子代选择器 (E > F)
选择所有作为E元素的直接子元素F，对孙子元素不起作用，用大于号表示
div>a{ color:red;} //div下的一级子元素a
<div>
<a href="#">这是子元素</a>
<p><a href="#">这是孙子元素</a></p>
</div>
3.相邻兄弟选择器 (E+F)
选择紧贴在E元素之后F元素，用加号表示，选择相邻的第一个兄弟元素。
p+span{ color:red;} //只会选中第一个span
<p>这是p元素</p>
<span>这是紧挨着p元素的第一个span</span>
<span>这是第二个span</span>
4.通用兄弟选择器 (E~F)
选择E元素之后的所有兄弟元素F，作用于多个元素，用~号隔开。
p~span{ color:red;} //和p之后平级的span元素都被选中了，有几个选中几个
<span>这span在p元素之前不会被选中</span>
<p>这是p元素</p>
<span>这是紧挨着p元素的第一个span</span>
<span>这是第二个span</span>
<span>这是第三个span，它和p是兄弟关系</span>
四、属性选择器
通过html的属性来选择元素，<p class=”p1”></p> class即是属性，p1是class的属性值
写法：元素[ 属性名= “属性值”] ，等号不固定，可换其它符号
1.E[att] p[class]{ color:red;} //选择带有class属性的p标签
<p class="p1">这是p1标签</p> <p class="p2">这是p2标签</p>
2.E[att="val"] p[class="p2"]{ color:red;} //选择p元素里class等于p4的元素，属性值要用引号引起来
<p class="p1">这是p1标签</p> <p class="p2">这是p2标签</p>
五、伪类选择器
1.E:link
设置超链接a在未被访问前的样式（特指a标签）
a:link{ color:red;} //未访问时a的颜色，设置别的元素没有效果
2.E:visited
设置超链接a在其链接地址已被访问过时的样式（特指a标签）
a:visited{ color:green;} //点击过后的超链接样式 *测试时，在url后面加参数使页面达到未访问过的状态
3.E:hover
设置鼠标悬停在元素上时的样式。不限于a标签，p、li也可以使用
a:hover{ color:red;}
p:hover{ color:red;}
<a href="#">这是个超级链接</a> <p>这是个段落</p>
4.E:active
设置元素在鼠标按下时的样式（不限于a标签）
a:active{ color:red;}
p:active{color:yellow;}
div:active{ color:blue;}
<a href="#">百度</a>
<p>这是段落</p>
<div>这是div</div>
5.E:not(s选择器)
匹配不含有s选择器的元素E。
div:not(.d1){ color: red;} //选择除了类名为d1的元素，注意，not()中的值不加引号！
<div class="d1">块元素</div>
<div class="d1">块元素</div>
<div class="d1">块元素</div>
<div class="d2 d1">块元素</div>
<div class="d2" id="div2">块元素</div>
6.E:first-child
父元素的第一个子元素E。
要使该属性生效，E元素必须是某个元素的子元素。一般元素都是body的子元素，所以都可以使用此伪类。
而body标签不是子元素，所以 body:first-child{ background:#ddd;} 是无效的。
li:first-child{ color:red;}
ul:first-child{color:red;}
这个属性的意思是被选元素本身是子元素，并且是它父元素中的第一个
<ul>
<h2>标题</h2>
<li>元素</li>
<li>元素</li>
<li>元素</li>
<li>元素</li>
</ul>
<ul>
<li>元素</li>
<li>元素</li>
<li>元素</li>
<li>元素</li>
</ul> 7.E:last-child
父元素的最后一个子元素E
<ul>
<h2>标题</h2>
<li>元素</li>
<li>元素</li>
<li>元素</li>
<li>元素</li>
</ul>
<ul>
<li>元素</li>
<li>元素</li>
<li>元素</li>
<li>元素</li> //不会变红，因为它不是最后一个
<h3>底部第一个</h3>
</ul> 8.E:only-child
E元素是唯一的子元素时被匹配
<body>
<p>段落</p>
</body>
此时body中只有这一个元素，所以 p:only-child{ color: deepskyblue;} 会生效
<body>
<p>段落</p>
<p>段落</p>
</body>
这时body的子元素不是唯一的了，所以 p:only-child{ color: deepskyblue;} 不会生效
9.E:empty
匹配没有任何子元素（并且不包括text节点）的元素E
p:empty{ border:1px solid red;padding:10px;}
<p></p>
<div></div> //空，但不是P元素
<p>我是一个p元素</p> //有text文本节点
<p><a href="#">百度</a></p> //有子元素
10.E:checked
匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
input:checked+span{color:red;}
<input type="radio" name="sex"/><span>男生</span>
<input type="radio" name="sex" checked="checked"/><span>女生</span>
input下被选中的元素紧挨着的span颜色为红色，因为选中状态会变，所以看着像动态的
11.E:nth-child()
选中第几个子元素
//选中第二个p元素
.box p:nth-child(2){ color: red; } /
/选中第偶数个子元素
.box p:nth-child(even){ color: red; }
//选中第奇数个子元素
.box p:nth-child(odd){ color: red; }
<div class="box">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
六、伪对象选择器
伪对象也叫伪元素，在过去，伪类和伪元素都被书写成前面只加一个冒号，实际上应该 :weilei ::weiyuansu，而现在我们为了兼容旧的书写方式，用一个冒号引导伪元素也是能被解析的。
伪类一般反映无法在CSS中轻松或者可靠检测到的某个元素的状态或者属性；
伪元素表示DOM外部的某种文档结构
伪类更多是定义元素的状态，而伪元素则是改变文档结构，在结构外另加一个没有实际存在的元素(伪元素)
常用伪元素
1.E:before/E::before
2.E:after/E::after
1.E:before/E::before
before 选择器在被选元素的”内容”前面插入内容。用来和content属性一起使用
虽然E:before可转化为E::before，但是你写伪元素时要规范，用两个冒号
p::before{ content:"在P标签元素内容前加了内容"; color: red;} //它并没有在html文件结构中
<p></p>
2.E:after/E::after
after选择器在被选元素的”内容”后面插入内容
p::after{ content:"在P标签元素内容前加了内容"; color: red;}
<p></p>
content属性与 :before 及 :after 伪元素配合使用，来插入生成内容。
选择器优先级
优先级数值比较：以数值大的为准
style=1000
id=100
class=10
element=1
Style样式>ID选择器>class选择器>元素选择器
优先级形相同，写在后面的 样式起作用
关于css的选择器就说到这里了，如有不足之处，欢迎指正！
感恩能与大家在华为云遇见！希望能与大家一起在华为云社区共同成长。
- 点赞
- 收藏
- 关注作者
评论（0）