css3学习之 css选择器(结构性伪类选择器)

最新推荐文章于 2022-04-04 14:45:00 发布

judyge

最新推荐文章于 2022-04-04 14:45:00 发布

阅读量1.2k

点赞数

分类专栏： js与前端

js与前端专栏收录该内容

863 篇文章 5 订阅

订阅专栏

同上篇：先说明下本机浏览器吧：opera 10 firefox 4.0 chrome 由于是公司机器xp的。。所以ie版本为 ie8 另外有一个ietest

所谓伪元素选择器，是指并不是针对真正的元素使用的选择器，而是针对css中已经定义好的伪元素使用的选择器，它的使用方法如下所示。

选择器:伪元素{属性:值}

伪元素选择器也可以与类配合使用，使用方法如下所示。

选择器类名:伪元素{属性:值}

1：在css中，主要有如下四个伪元素选择器

first-line 、 first-letter 、before 、after

说明: first-letter:用于为某个元素中的文字的首字母(欧美文字)或第一个字(中文或者日文等汉字)使用样式(其实就是第一个字符)

其他的我就不说明了。。大家看字面意思就明白了。

2：选择器root、not、empty、target

root:

root选择器将样式绑定到页面的根元素中。所谓根元素是指位于文档树中最顶层结构的元素，在html页面中就是指包含着整个页面的<html>部分。

example:

 
   
 
 
  <html>   
 
<head>
 <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
 <style>
 :root{
     background-color:yellow;
 }
 body{
     background-color:limegreen;
 }
 </style>
 </head>
 <body>
 <h1>选择器概述</h1>
 <p>在css3中，提倡使用选择器来将样式与元素直接绑定起来，这样的话，在样式表中什么样式与元素相匹配变得一目了然，修改起来也很方便。不仅如此，通过选择器，我们还可以实现各种复杂的指定，同时也能大量减少样式表的代码书写量，最终书写出来的样式也会变得简洁明</p>
 </body>
 </html>
 
   
 

运行效果:opera 和firefox起作用。ie与chrome不起作用

ps:这里有个好玩的现象：当root 与body同时出现的时候 body样式有效范围为页面body范围内。。但是当仅仅使用body样式的时候整个页面为body的有效范围

not:

如果相对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式时，可以使用not选择器。

example:

 
   
 
 
  < 
  html 
  >   
  
 
  < 
  head 
  > 
  
 
  < 
  meta  
  content 
  ="text/html; charset=UTF-8" 
   http-equiv 
  ="Content-Type" 
  > 
  
 
  < 
  style 
  > 
  
 body *:not(h1) 
  { 
  
     background-color 
  : 
  limegreen 
  ; 
  
  
  } 
  
  
  </ 
  style 
  > 
  
 
  </ 
  head 
  > 
  
 
  < 
  body 
  > 
  
 
  < 
  h1 
  >选择器概述 
  </ 
  h1 
  > 
  
 
  < 
  p 
  >在css3中，提倡使用选择器来将样式与元素直接绑定起来，这样的话，在样式表中什么样式与元素相匹配变得一目了然，修改起来也很方便。不仅如此，通过选择器，我们还可以实现各种复杂的指定，同时也能大量减少样式表的代码书写量，最终书写出来的样式也会变得简洁明 
  </ 
  p 
  > 
  
 
  </ 
  body 
  > 
 
</html>  
 
   
 

运行效果：除了ie其他均能正常显示。。

empty：

使用empty选择器来指定当元素内容为空白时使用的样式

example:

 
   
 
 
  < 
  html 
  >   
  
 
  < 
  head 
  > 
  
 
  < 
  meta  
  content 
  ="text/html; charset=UTF-8" 
   http-equiv 
  ="Content-Type" 
  > 
  
 
  < 
  style 
  > 
  
 :empty 
  { 
  
     background-color 
  : 
  limegreen 
  ; 
  
  
  } 
  
  
  </ 
  style 
  > 
  
 
  </ 
  head 
  > 
  
 
  < 
  body 
  > 
  
 
  < 
  h1 
  >选择器概述 
  </ 
  h1 
  > 
  
 
  < 
  table  
  border 
  ="1" 
  > 
  
   
  < 
  tr 
  >< 
  td 
  >A 
  </ 
  td 
  >< 
  td 
  >B 
  </ 
  td 
  >< 
  td 
  >C 
  </ 
  td 
  ></ 
  tr 
  > 
  
   
  < 
  tr 
  >< 
  td 
  >D 
  </ 
  td 
  >< 
  td 
  >E 
  </ 
  td 
  >< 
  td 
  ></ 
  td 
  ></ 
  tr 
  > 
  
 
  </ 
  table 
  > 
  
 
  </ 
  body 
  > 
 
</html> 
 
   
 

运行效果：同样除了IE其他都可以显示(PS:目前我没有在ie9中运行。所以没有资格在这里说明)

这里我有一个疑问：

:empty{

background-color:limegreen;

content:"no";

}

也就是说当为空的时候显示“no” 。。但是我发现content无法显示.这是为啥呢？

target

使用target选择器来对页面某个target元素(该元素的id被当做页面中的超链接来使用)指定样式，该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用

example:

 
   
 
 
  <html>  
 
<head>
 <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
 <style>
 :target{
     background-color:yellow;
 }
 </style>
 </head>
 <body>
 <p id="menu">
 <a href="#text1">示例文字1</a> |
 <a href="#text2">示例文字2</a> |
 <a href="#text3">示例文字3</a> |
 <a href="#text4">示例文字4</a> 
 </p>
 <div id="text1">
  <h2>示例文字1</h2>
  <p>...此处略去...</p>
 </div>
 <div id="text2">
  <h2>示例文字2</h2>
  <p>...此处略去...</p>
 </div>
 <div id="text3">
  <h2>示例文字3</h2>
  <p>...此处略去...</p>
 </div>
 <div id="text4">
  <h2>示例文字4</h2>
  <p>...此处略去...</p>
 </div>
 </body>
 </html>
 
   
 

运行效果：除了ie其他均能够正常显示

其中说明: href="#text1" 是进行描点定位一旦去掉这个就不能满足“并且跳转到target元素后起作用” 故其样式也将不起作用

3：选择器first-child、last-child、nth-child、nth-last-child、nth-of-type、nth-last-of-type

first-child、last-child 这里我就不详细描述了。

nth-child、nth-last-child

针对一个父元素的第一个子元素开始起第多少个元素和最后一个子元素起第多少个元素起作用。

example:

 
   
 
 
  <html>   
 
<head>
 <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
 <style>
 li:nth-child(2){
  background-color:yellow;
 }
 li:nth-last-child(2){
  background-color:skyblue;
 }
 </style>
 </head>
 <body>
 <h2>列表A</h2>
 <ul>
   <li>列表项目1</li>
   <li>列表项目2</li>
   <li>列表项目3</li>
   <li>列表项目4</li>
 </ul>
 </body>
 </html>
 
   
 

同样ie不争气。。。

但是我想说明的是某些情况下会有问题：

比如某个div中有以下元素<h2>标题1</h2><p>正文1</p> <h2>标题2</h2><p>正文2</p> <h2>标题3</h2><p>正文3</p> 当我们设置h2:nth-child(odd){background-color:yellow;}

本来我们是希望所有奇数标题(h2)显示黄色。但是我们发现所有标题(h2)均显示黄色。这时为啥呢？

因为nth-child选择器在计算子元素是第奇数个元素，是连同所有父元素中所有子元素一起计算的这样<h2>永远都是奇数元素了。

nth-of-type能够有效的解决这个问题。

最后再举一个循环使用的例子:

 
   
 
 
  <html>  
 
<head>
 <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
 <style>
 li:nth-child(2n+1){
  background-color:yellow;
 }
 li:nth-child(2n+2){
  background-color:skyblue;
 }
 </style>
 </head>
 <body>
 <h2>列表A</h2>
 <ul>
   <li>列表项目1</li>
   <li>列表项目2</li>
   <li>列表项目3</li>
   <li>列表项目4</li>
 </ul>
 </body>
 </html>
 
   
 