1.全局選擇器
通配符：* 用于選擇所有元素
實(shí)列：匹配body下所有的元素
body *{
margin: 0;
padding: 0;
list-style: none;
}
2.基礎(chǔ)選擇器
-- 元素選擇器 ：選擇器所有標(biāo)簽
-- id選擇器 ：選擇一個標(biāo)簽
-- class選擇器/類選擇器 ：選擇一組標(biāo)簽
3.屬性選擇器
- 通過標(biāo)簽的屬性匹配元素
- 所有屬性選擇器都以方括號開頭
[屬性]選擇器最基礎(chǔ)的用法：
示例：將屬性為title的所有元素都設(shè)置上前景色。
[title]{
color: rgb(81, 150, 182);
}
示例：將屬性title的屬性值為二級標(biāo)題的所有元素都設(shè)置上背景色。
[title=二級標(biāo)題]{
color: cadetblue;
}
示例：將屬性target的屬性值為_blank的所有元素都設(shè)置上刪除線。
超鏈接的原有屬性的value值要添加引號。
[target="_blank"]{
text-decoration: line-through;
}
示例：將屬性href的屬性值為http://www.baidu.com的所有元素都設(shè)置上前景色。
^：指定了屬性名，并且有屬性值，屬性值是以http://www.baidu.com開頭的；
a[href^="http://www.baidu.com"]{
color: black;
}
示例：將屬性target的屬性值為"_blank"的所有元素都設(shè)置上前景色。
$：指定了屬性名，并且有屬性值，屬性值是以_blank結(jié)尾的；
a[target$="_blank"]{
color: rgb(188, 95, 95);
}
示例：將屬性href的屬性值結(jié)尾為net的所有元素都添加文字。
$：指定了屬性名，并且有屬性值，屬性值是以net結(jié)尾的；
[href$=net]::after{
content: "我愛你";
}
4，偽類選擇器
偽類選擇器的標(biāo)志就是單冒號：
只能匹配元素不能創(chuàng)建元素
- :link：匹配未點(diǎn)擊的超鏈接
- :hover：匹配懸停/懸浮狀態(tài)的元素
- :active： 匹配激活狀態(tài)（鼠標(biāo)按下）的元素
- :visited：匹配訪問過（抬起鼠標(biāo)）的超鏈接
- :focus ：匹配焦點(diǎn)元素（不是所有元素都擁有焦點(diǎn)，像表單標(biāo)簽，超鏈接都擁有焦點(diǎn)）
- :ntn-child ：匹配第n個子元素
- :flrst-child：匹配第一個子元素
- :last-child：匹配最后一個子元素
- :root :匹配根元素
- :not() :匹配不是某個元素的元素
- :checked:匹配選中的元素
超鏈接偽類
<style>
/* 1.匹配未點(diǎn)擊的超鏈接 */
a:link{
color: cadetblue;
}
/* 2.匹配懸停/懸浮狀態(tài)的元素 */
a:hover{
color: #000;
}
/* 3. 匹配激活狀態(tài)（鼠標(biāo)按下）的元素*/
a:active{
color: cornflowerblue;
}
/* 4.匹配訪問過（抬起鼠標(biāo)）的超鏈接 */
a:visited{
color: rgb(255, 0, 0);
}
</style>
</head>
<body>
<a href="#">網(wǎng)易云</a>
</body>
:focus 實(shí)列
點(diǎn)擊之后觸發(fā)焦點(diǎn)元素，修改背景色
input:focus{
background-color: blueviolet;
}
:not() :匹配不是某個元素的元素
示例：排除掉.box1
.box:not(.box1){
background-color: rgb(255, 0, 0);
}
5.偽元素選擇器
偽元素選擇器的標(biāo)志是雙冒號
可以創(chuàng)建元素
- ::after：在元素zhi'qua
- ::before
- ::first-line：選中的第一段。
- ::first-letter ：選中第一個。
::first-letter的示例：選中段落p的第一個文字。
p::first-letter{
font-size: 2rem;
color: rgb(110, 63, 1);
}
::first-letter的示例：選中段落p的第一段文字設(shè)置上劃線。
p::first-line{
text-decoration: overline;
}
6.組合選擇器
組合選擇器就算把上面五類選擇器放在一起使用
- 分組選擇器 ：使用逗號組合（匹配到使用逗號分割的每一項(xiàng)）
- 后代選擇器 ：使用空格組合 （匹配當(dāng)前元素的所有后代元素）
- 子元素選擇器 ：使用>組合（匹配當(dāng)前元素的所有子元素）
- 相鄰兄弟選擇器：使用+組合 （匹配當(dāng)前元素后面的兄弟元素）
