css選擇器
1、標籤選擇器
<div>文本內容</div>
div{
color:red;
}
2、class選擇器
<div class="text">文本內容</div>
.text{
color:red;
}
3、id選擇器
每個id選擇器的屬性值在一個頁面只能用一次
<div id="text">文本內容</div>
#text{
color:red;
}
4、屬性選擇器
<div class="text">文本內容</div> [class]{ color:red; }
也可使用
[class="text"]{
color:red;
}
5、後代選擇器
<div>
<p>
<span>文本內容</span>
</p>
</div>
div span{
color:red;
}
6、子代選擇器
<div>
<p>
<span>文本內容</span>
</p>
</div>
div > p{
color:red;
}
7、兄弟相鄰選擇器
<div>
<p>文本1</p>
<p>文本2</p>
</div>
div p + p{
color:red;
}
8、兄弟選擇器
<p>文本1</p>
<p>文本2</p>
<p class="text">文本3</p>
p ~ .text{
color:red;
}
9、群組選擇器
<p class="text1">文本1<p>
<p class="text2">文本2<p>
.text1,.text2{
color:red;
}
10、偽類選擇器
<div></div>
div::after{
content:"文本1";
color:red;
}// 文本1變紅色
11、first-child、last-child、nth-child( )、nth-last-child( )
<div>
<p class="first">文本1</p>
<p>文本2</p>
<p>文本3</p>
<p>文本4</p>
<p class="last">文本5</p>
</div>
div p:first-child{
color:red;
}// 文本1變紅色
div p:last-child{
color:green;
}// 文本5變綠色
div p:nth-child(even){
color:blue;
}// 文本2、文本4變藍色
div p:nth-child(odd){
color:pink;
}// 文本1、文本3、文本5變粉紅色
div p:nth-child(2n + 1){
color:gray;
}// 文本1、文本3、文本5變灰色
div p:nth-child(-n + 3){
color:orange;
}// 文本1、文本2、文本3變橙色
div p:not(class){
color:red;
}// 文本2、文本3、文本4變紅色
12、first-of-type、last-of-type、nth-of-type( )、nth-last-of-type( )
<div>
<p>文本1</p>
<span>文本2</span>
<p>文本3</p>
<em>文本4</em>
</div>
div span:first-of-type{
color:red;
}// 文本2變紅色
div p:last-of-type{
color:green;
}// 文本3變綠色
