CSS-4.序选择器的使用

最新推荐文章于 2022-09-18 15:25:16 发布

别忘了缩进

最新推荐文章于 2022-09-18 15:25:16 发布

阅读量377

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_34737697/article/details/79185336

版权

29 篇文章 0 订阅

订阅专栏

 
 css序选择器分为两大阵营，一个是选择同级别的，一个是选择同类型的 

 
 同级别的第几个： 

 
 :first-child{}：选中同级别中的第一个标签<!--first代表第一个--> 

  注意点：不区分类型 

 
 :last-child{}：选中同级别中的最后一个标签 

  注意点：不区分类型 

 
 :nth-child(n){}：选中同级别中的第n个标签 

  注意点：不区分类型 

 
 :nth-last-child(n){}：选中同级别中的倒数第n个标签 

  注意点：不区分类型 

 
 :only-child{}:选中父元素中唯一的标签 

 
 p:only-child{ 

 
  
 color: aqua; 

}

 
 <body> 

 
 <p>我是段落1</p> 
  
 <!--现在同级别<body>标签中，有<p>

 
 <div> 
  
 和<div>两个标签，<div>中的<p>是

 
 <p>我是段落2</p> 
  
 单独存在的，所以css中设置属性，只有

 
 </div> 
  
 <div>中的<p>会响应 -->

 
 </body> 

 
 此时的效果是 

  对:only-child的总结：其实就是判断选择的<p>标签（p:only-child{}因为冒号前是p）是不是同 
 级标签中的唯一标签，与标签类型无关。 

 
 同类型的第几个： 

 
 :first-of-type{}：选中同级别中同类型的第一个标签<!--first代表第一个--> 

 
 :last-of-type{} ：选中同级别中同类型的最后一个标签 

 
 :nth-of-type(n){}：选中同级别中同类型的第n个标签 

 
 :nth-last-of-type(n){}：选中同级别中同类型的倒数第n个标签 

 
 :only-of -type{}：选中同级别中同类型的唯一元素 

 
 p:only-of-type{ 

 
 color: aqua; 

}

 
 <body> 

 
 <p>我是段落1</p> 
  <!--此时在<body>标签中，p是单独存在 

 
 <div> 
  的，在<div>中，p也是单独存在的， 

 
 <p>我是段落2</p> 
  所以，两个p都会响应。--> 

 
 </div> 

 
 </body> 

 
 运行结果： 

 
 但是当<div>标签中存在多个<p>标签时，则不会对<div>中的<p>标签响应css的值。程序如下： 

 
 p:only-of-type{ 

 
  
 color: aqua; 

}

 
  
 </style> 

 
 </head> 

 
 <body> 

 
 <p>我是段落1</p> 

 
 <div> 

 
  
 <p>我是段落2</p> 

 
  
 <p>我是段落3</p> 

 
 </div> 

 
 </body> 

 
 运行结果如下： 

  对:only-of-type的总结：其实就是判断<p>标签是不是 
 同级同类型标签的唯一标签，是唯一标签就响应，有其他同类型标签存在，就不响应css的设置。 

  额外用途： 

  在:nth-child(n){}以及相似的:nth开头的选择器中，可以设置n为odd，even和表达式xn+y。 

  其中odd指的是奇数。even指的是偶数。 

  表达式xn+y，x和y可自己设置，n就是个计数器，例如： 

  假设此时有8对<p>标签 

  <head> 

  <style> 

  p:nth-child(2n+1){ 

  color="red"; 

}

  <style> 

  </head> 

  <body> 

  <p>我是段落</p> 

  <p>我是段落</p> 

  <p>我是段落</p> 

  <p>我是段落</p> 

  <p>我是段落</p> 

  <p>我是段落</p> 

  <p>我是段落</p> 

  <p>我是段落</p> 

  </body> 

  此时，n的计数范围是0-8 

  当n=0时，表达式值为1，则第1个p标签设置为红色； 

  当n=1时，表达式值为3，则第3个p标签设置为红色； 

  当n=2时，表达式值为7，则第7个p标签设置为红色； 

  以此类推。 

 
 注意：使用表达式的时候，:nth-child不区分类型。需要区别类型的话， 

 
 ` 还是要用:nth-of-type. 

关注

专栏目录