CSS3教程

当前位置: HTML5技术网 > CSS3教程 > CSS3每日一练之选择器-结构性伪类选择器[一]

CSS3每日一练之选择器-结构性伪类选择器[一]

         本节来学习一下CSS 3.0中的结构性伪类选择器,在这之前,先来简单的回顾一下CSS 2.0中的类和伪类选择器,我们知道在CSS中,可以使用类选择器把相同的元素定义成不同的样式,譬如针对一个p元素,我们可以做如下定义:
p.left{color:#900;}
p.right{color:#090;}

然后在HTML中对p使用class属性,如下:
<p class="left">前端开发网(W3Cfuns.com)</p>
<p class="right">web前端开发起飞区,Web前端开发高手聚集地,教程、资源完全免费!</p>

       在CSS中除了上面所属的类选择器之外,还有伪类选择器,这种选择器与类选择器的区别是,类选择器可以随便起名,而伪类选择器是固定的,也就是默认已定义好的选择器,不可随便起名。比如超链接的Hover伪类。

CSS3.0 四个最基本的结构性伪类选择器
:root 选择器
  此选择器将绑定到页面的根元素中,所谓根元素,是指文档树中最顶层的元素,也就是<html>部分。
  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <meta charset="gb2312">
  5.         <title>CSS3每日一练之选择器-结构性伪类选择器[一] | 前端开发网(W3Cfuns.com)!</title>
  6.         <style type="text/css">
  7.         *{margin:0; padding:0;}
  8.         :root{background:#900;}
  9.         #box{height:100px; background:#090;}
  10.         </style>
  11.     </head>
  12.    
  13.     <body>
  14.             <div id="box"></div>
  15.     </body>
  16. </html>

:not选择器
  如果想对某个结构元素使用样式,但是又想排除这个个元素下面的某个子元素,让它不使用此样式,可以使用它,看例子:
  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <meta charset="gb2312">
  5.         <title>CSS3每日一练之选择器-结构性伪类选择器[一] | 前端开发网(W3Cfuns.com)!</title>
  6.         <style type="text/css">
  7.         *{margin:0; padding:0;}
  8.         #box *:not(h1){color:#900; font-weight:700;}
  9.         </style>
  10.     </head>
  11.    
  12.     <body>
  13.             <div id="box">
  14.                 <h1>前端开发网(W3Cfuns.com)</h1>
  15.                 <p>web前端开发起飞区,Web前端开发高手聚集地,教程、资源完全免费!</p>
  16.         </div>
  17.     </body>
  18. </html>

:empty选择器
  当元素内容为空白的时候,使用其所定义的样式,案例如下:
  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <meta charset="gb2312">
  5.         <title>CSS3每日一练之选择器-结构性伪类选择器[一] | 前端开发网(W3Cfuns.com)!</title>
  6.         <style type="text/css">
  7.         *{margin:0; padding:0;}
  8.         :empty{width:200px; height:200px; background:#008000;}
  9.         </style>
  10.     </head>
  11.    
  12.     <body>
  13.             <div id="box"></div>
  14.     </body>
  15. </html>
:target选择器
  使用其选择器来对页面中的target元素(该元素的ID被当作页面中的超链接)指定的样式,该样式只在用户点击了页面中的超链接,并且跳转到target元素后起作用,案例如下:
  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <meta charset="gb2312">
  5.         <title>CSS3每日一练之选择器-结构性伪类选择器[一] | 前端开发网(W3Cfuns.com)!</title>
  6.         <style type="text/css">
  7.         *{margin:0; padding:0;}
  8.         :target{font-weight:700; color:#fff; background:#900;}
  9.         </style>
  10.     </head>
  11.    
  12.     <body>
  13.         <p><a href="#box1">第一个</a> <a href="#box2">第二个</a> <a href="#box3">第三个</a> <a href="#box4">第四个</a></p>
  14.         <div id="box1">
  15.             <h1>第一个:前端开发网(W3Cfuns.com)</h1>
  16.             <p>web前端开发起飞区,Web前端开发高手聚集地,教程、资源完全免费!</p>
  17.         </div>
  18.         <div id="box2">
  19.             <h1>第二个:前端开发网(W3Cfuns.com)</h1>
  20.             <p>web前端开发起飞区,Web前端开发高手聚集地,教程、资源完全免费!</p>
  21.         </div>
  22.         <div id="box3">
  23.             <h1>第三个:前端开发网(W3Cfuns.com)</h1>
  24.             <p>web前端开发起飞区,Web前端开发高手聚集地,教程、资源完全免费!</p>
  25.         </div>
  26.         <div id="box4">
  27.             <h1>第四个:前端开发网(W3Cfuns.com)</h1>
  28.             <p>web前端开发起飞区,Web前端开发高手聚集地,教程、资源完全免费!</p>
  29.         </div>
  30.     </body>
  31. </html>

【CSS3每日一练之选择器-结构性伪类选择器[一]】相关文章

1. CSS3每日一练之选择器-结构性伪类选择器[三]

2. CSS3每日一练之选择器-结构性伪类选择器[二]

3. CSS3每日一练之选择器-结构性伪类选择器[一]

4. CSS3每日一练之选择器-结构性伪类选择器[六]

5. CSS3每日一练之选择器-结构性伪类选择器[五]

6. CSS3每日一练之选择器-结构性伪类选择器[四]

7. CSS3每日一练之选择器-状态伪类选择器[五]

8. CSS3每日一练之选择器-状态伪类选择器[四]

9. CSS3每日一练之选择器-状态伪类选择器[三]

10. CSS3每日一练之选择器-状态伪类选择器[二]

本文来源:https://www.51html5.com/a860.html

点击展开全部

﹝CSS3每日一练之选择器-结构性伪类选择器[一]﹞相关内容

「CSS3每日一练之选择器-结构性伪类选择器[一]」相关专题

其它栏目

也许您还喜欢