waterv 2020-06-01
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变绿色