【Web前端】CSS选择器 [转载]
转载：https://blog.csdn.net/Dawson_Ho/article/details/88726829
*本文介绍CSS的选择器，包括元素选择器、ID选择器、类选择器、属性选择器、后代选择器、子元素选择器、相邻兄弟选择器。（本文内容结合W3C教程编写）
1、元素选择器
又称类型选择器（Type Selector），是最常见的CSS选择器，文档的元素就是选择器，比如p、h1、甚至html本身。
p{color:blue;}
h1{color:red;}
2、ID选择器
根据ID选择特定元素，ID前面有井号（#）。
下面设置ID为title的元素内容为紫色。
#title {color: purple;}
<h1 id = "title">我是紫色</h1>
3、类选择器
和ID选择器类似，类选择器根据类选择特定元素，在类前面有点号（.）。
不同的是，类选择器可以选择属于多个类的元素，而ID选择器只能选择唯一ID的元素（出于避免混淆的目的，同一个文档中最好不要有同样ID的元素）。
.impor{color:red;}
.impor.para{font-style: italic;}
<h1 class = "impor">我是红色标题</h1>
<p class = "impor para">我是红色斜体段落</p>
上面的<p>同时属于impor 和para类，<p>既有.impor的红色字体，也有.impor.para的斜体字；
而<h1>只设置了红色字体，而没有斜体字。
4、属性选择器
属性选择器根据元素的属性及属性值选择元素，属性用方括号包围（[]）
①简单属性选择：忽略属性值，选择具有某个属性的元素
选择具有title属性的元素
[title]{font-weight: bold;}
<h1 title="title">我是粗体标题</h1>
<p title="para">我是粗体段落</p>
选择具有title属性的p元素
p[title]{font-style: italic;}
<p title="para">我是斜体段落</p>
选择有多个属性的元素
[title][href]{font-style: italic;color: red}
<p title="para" href="www">我是红色斜体段落</p>
②根据具体属性值选择：只选择具有特定属性值的元素
[title="title"]{font-weight: bold;color: red;}
<h1 title="title">我是粗体标题</h1>
属性和属性值必须完全匹配
[class="title impor"]{font-weight: bold;color: red;}
<h1 class="title impor">我是粗体标题</h1>
上面的<h1>属于title和impor类，如果选择器写成[class = "title"]，是无法应用样式的。
要根据部分属性值选择，可以在等号（=）加波浪线（~）：
[class~="title"]{font-weight: bold;color: red;}
另外有更高级的选择器：子串匹配属性选择器
5、后代选择器
后代选择器选择作为某元素后代的元素，用空格作为结合符。
p em{color: white;background-color: gray;}
作为<h1>元素后代的<em>元素都会应用样式，不管是不是子元素
<h1><em>应用样式</em></h1>
<h1><p><em>应用样式</em></p></h1>
<p><em>不应用样式</em></p>
6、 子元素选择器
如果希望选择某个元素的子元素，而非所有后代元素，则使用子元素选择器。
子元素选择器用大于号（>）作为结合符。
h1>em{color: white;background-color: gray;}
第2个<em>是<h1>的后代元素而不是子元素，所以不会应用样式
<h1><em>应用样式</em></h1>
<h1><p><em>不应用样式</em></p></h1>
7、相邻兄弟选择器
选择紧接在某个元素后的元素，且两者的父元素必须相同（兄弟元素）。
兄弟选择器用加号（+）作为结合符。
h1+p{background-color: gary}
第一个段落<p>前面的元素是<div>，所以不会应用样式
<div>
<p>不应用样式段落</p>
<p>应用样式段落1</p>
<p>应用样式段落2</p>
</div>
原文链接：https://blog.csdn.net/Dawson_Ho/article/details/88726829
