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
版权声明：本文为博主原创文章，转载请附上博文链接！

奈斯，感谢分享！