码迷,mamicode.com
首页 > Web开发 > 详细

css选择器

时间:2020-06-01 23:57:13      阅读:142      评论:0      收藏:0      [点我收藏+]

标签:div   内容   last   属性选择器   pre   属性   style   css   -o   

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变绿色

 

css选择器

标签:div   内容   last   属性选择器   pre   属性   style   css   -o   

原文地址:https://www.cnblogs.com/cuishuangshuang/p/13028069.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!