这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战
本文所有选择器均不考虑兼容性问题
简单选择器
元素选择器
根据标签名来选中指定的元素 语法：标签名{} 示例
html
<h1 class="aaa">我是标题</h1>
<p class="aaa">文本文本文本文本文本</p>
<p id="bbb">文本文本文本文本文本</p>
<p class="ccc">文本文本文本文本文本</p>
<p class="ddd">文本文本文本文本文本</p>
<p class="eee">文本文本文本文本文本</p>
css
h1{
color: red;
}
id选择器
根据元素的id属性值选中一个元素，id是唯一的，不可重复 语法：#id{} 示例
html
<h1 class="aaa">我是标题</h1>
<p class="aaa">文本文本文本文本文本</p>
<p id="bbb">文本文本文本文本文本</p>
<p class="ccc">文本文本文本文本文本</p>
<p class="ddd">文本文本文本文本文本</p>
<p class="eee">文本文本文本文本文本</p>
css
#bbb{
color: red;
}
class选择器
根据元素的class属性值选中一组元素，class可重复 语法：.class{} 示例
html
<h1 class="aaa">我是标题</h1>
<p class="aaa">文本文本文本文本文本</p>
<p id="bbb">文本文本文本文本文本</p>
<p class="ccc">文本文本文本文本文本</p>
<p class="ddd">文本文本文本文本文本</p>
<p class="eee">文本文本文本文本文本</p>
css
.aaa{
color: red;
}
通配符*选择器
选中页面中所有的元素 语法：*{} 示例
html
<h1 class="aaa">我是标题</h1>
<p class="aaa">文本文本文本文本文本</p>
<p id="bbb">文本文本文本文本文本</p>
<p class="ccc">文本文本文本文本文本</p>
<p class="ddd">文本文本文本文本文本</p>
<p class="eee">文本文本文本文本文本</p>
css
*{
color: red;
}
复合选择器
交集选择器
选中同时符合多个条件的元素，如果有元素选择器，必须使用元素选择器开头 语法：选择器1选择器2选择器n{} 示例
html
<h1 class="aaa">我是标题</h1>
<p class="aaa">文本文本文本文本文本</p>
<p id="bbb">文本文本文本文本文本</p>
<p class="ccc">文本文本文本文本文本</p>
<p class="ddd">文本文本文本文本文本</p>
<p class="aaa bbb ccc">文本文本文本文本文本</p>
css
h1.aaa{
color: red;
}
.aaa.bbb.ccc{
color: blue;
}
并集选择器（分组选择器）
同时选择多个选择器对应的元素 语法：选择器1,选择器2,选择器n{}
示例
html
<h1 class="aaa">我是标题</h1>
<p class="aaa">文本文本文本文本文本</p>
<p id="bbb">文本文本文本文本文本</p>
<p class="ccc">文本文本文本文本文本</p>
<p class="ddd">文本文本文本文本文本</p>
<p class="aaa bbb ccc">文本文本文本文本文本</p>
css
.aaa,.bbb,.ccc{
color: blue;
}
关系选择器
要搞清楚关系选择器需要先搞清楚是谁跟谁之前的关系
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或间接包含后代的元素，一个元素的父元素也是他的祖先元素
后代元素：直接或间接被祖先包含的元素，子元素也是后代元素
兄弟元素：有同一个父元素的元素
子元素选择器
选中指定父元素指定的子元素 语法：父元素 > 子元素{}
示例
html
<h1 class="aaa">我是标题</h1>
<div class="aaa">
<p>
文本文本文本文本文本
<span>span：本文本文本</span>
</p>
<span>span：本文本文本</span>
</div>
<p class="bbb">文本文本文本文本文本</p>
<p class="ccc">文本文本文本文本文本</p>
<p class="ddd">文本文本文本文本文本</p>
css
.aaa > span{
color: red;
}
后代选择器
选中指定元素的制定后代元素
语法：祖先 后代{}
示例
html
<h1 class="aaa">我是标题</h1>
<div class="aaa">
<p>
文本文本文本文本文本
<span>span：本文本文本</span>
</p>
<span>span：本文本文本</span>
</div>
<p class="bbb">文本文本文本文本文本</p>
<p class="ccc">文本文本文本文本文本</p>
<p class="ddd">文本文本文本文本文本</p>
css
.aaa span{
color: red;
}
兄弟选择器
选择下一个兄弟
语法：前一个 + 后一个
示例
html
<h1 class="aaa">我是标题</h1>
<div class="aaa">
<p>
文本文本文本文本文本
<span>span：本文本文本</span>
</p>
<span>span：本文本文本</span>
</div>
<p class="bbb">文本文本文本文本文本</p>
<p class="ccc">文本文本文本文本文本</p>
<p class="ddd">文本文本文本文本文本</p>
css
.aaa + p{
color: red;
}
选择下面所有的兄弟
语法：兄 ~ 弟
示例
html
<h1 class="aaa">我是标题</h1>
<div class="aaa">
<p>
文本文本文本文本文本
<span>span：本文本文本</span>
</p>
<span>span：本文本文本</span>
</div>
<p class="bbb">文本文本文本文本文本</p>
<p class="ccc">文本文本文本文本文本</p>
<p class="ddd">文本文本文本文本文本</p>
css
.aaa ~ p{
color: red;
}
属性选择器
[属性名]选择含有指定属性的元素
示例
html
<p title="aaa">文本文本文本文本文本</p>
<p title="bbb">文本文本文本文本文本</p>
<p title="ccc">文本文本文本文本文本</p>
<p title="ddd">文本文本文本文本文本</p>
<p title="eee">文本文本文本文本文本</p>
css
p[title]{
color: red;
}
[属性名=属性值]选择含有指定属性和属性值的元素
示例
html
<p title="aaa">文本文本文本文本文本</p>
<p title="bbb">文本文本文本文本文本</p>
<p title="ccc">文本文本文本文本文本</p>
<p title="ddd">文本文本文本文本文本</p>
<p title="eee">文本文本文本文本文本</p>
css
p[title=aaa]{
color: red;
}
[属性名^=属性值]选择属性值以指定值开头的元素
示例
html
<p title="aaa">文本文本文本文本文本</p>
<p title="abbb">文本文本文本文本文本</p>
<p title="ccc">文本文本文本文本文本</p>
<p title="ddd">文本文本文本文本文本</p>
<p title="eee">文本文本文本文本文本</p>
css
p[title^=a]{
color: red;
}
[属性名$=属性值]选择属性值以指定值结尾的元素
示例
html
<p title="aaa">文本文本文本文本文本</p>
<p title="abbb">文本文本文本文本文本</p>
<p title="ccca">文本文本文本文本文本</p>
<p title="ddd">文本文本文本文本文本</p>
<p title="eee">文本文本文本文本文本</p>
css
p[title$=a]{
color: red;
}
[属性名*=属性值]选择属性值中含有指定元素的元素
示例
html
<p title="aaa">文本文本文本文本文本</p>
<p title="abbb">文本文本文本文本文本</p>
<p title="ccca">文本文本文本文本文本</p>
<p title="ddd">文本文本文本文本文本</p>
<p title="eee">文本文本文本文本文本</p>
css
p[title*=a]{
color: red;
}
伪类选择器
伪类用来描述一个元素的特殊状态，一般以:开头
-
:first-child 第一个子元素
-
:last-child 最后一个子元素
-
:nth-child() 选中第n个子元素
特殊值：
n ： 第n个元素 2n或even 偶数位的元素 2n+1或odd 奇数位的元素
这些伪类是根据所有子元素进行排序的
示例
html
<ul>
<li>文本文本文本文本文本</li>
<li>文本文本文本文本文本</li>
<li>文本文本文本文本文本</li>
<li>文本文本文本文本文本</li>
<li>文本文本文本文本文本</li>
</ul>
css
ul > li:first-child{
color: red;
}
ul > li:last-child{
color: green;
}
ul > li:nth-child(2){
color: blue;
}
- :first-of-type 第一个同类型子元素
- :last-of-type 最后一个同类型子元素
- :nth-of-type() 选中第n个同类型子元素
示例
html
<ul>
<li>文本文本文本文本文本</li>
<li>文本文本文本文本文本</li>
<li>文本文本文本文本文本</li>
<li>文本文本文本文本文本</li>
<li>文本文本文本文本文本</li>
</ul>
css
ul > li:first-of-type{
color: red;
}
ul > li:last-of-type{
color: green;
}
ul > li:nth-of-type(2){
color: blue;
}
- :not() 排除某个指定的元素
示例
html
<ul>
<li>文本文本文本文本文本</li>
<li>文本文本文本文本文本</li>
<li>文本文本文本文本文本</li>
<li>文本文本文本文本文本</li>
<li>文本文本文本文本文本</li>
</ul>
css
ul > li:not(:nth-of-type(3)){
color: red;
}
以上，列举了开发过程中常用的一些选择器，想了解更多更全面的选择可以阅读css的文档www.apiref.com/css-zh/inde…
最后说一个经常会被问到的面试题，选择器的权重（优先级）是怎么样的
结论是：!important > 行间样式 id选择器 > class选择器 > 标签选择器 > 通配选择器 > 继承的样式
注意：交集选择器会把权重相加后再进行比较，分组选择器是要分开来比较的
示例
html
<div class="aaa" id="bbb" style="color: green;">
内容内容内容内容
</div>
css
div{
color: red;
}
.aaa{
color: blue;
}
#bbb{
color: yellow;
}
div{
color: goldenrod!important;
}
