CSS3每日一练之选择器-结构性伪类选择器[一]
本节来学习一下CSS 3.0中的结构性伪类选择器,在这之前,先来简单的回顾一下CSS
2.0中的类和伪类选择器,我们知道在CSS中,可以使用类选择器把相同的元素定义成不同的样式,譬如针对一个p元素,我们可以做如下定义:
然后在HTML中对p使用class属性,如下:
在CSS中除了上面所属的类选择器之外,还有伪类选择器,这种选择器与类选择器的区别是,类选择器可以随便起名,而伪类选择器是固定的,也就是默认已定义好的选择器,不可随便起名。比如超链接的Hover伪类。
CSS3.0 四个最基本的结构性伪类选择器
:root 选择器
此选择器将绑定到页面的根元素中,所谓根元素,是指文档树中最顶层的元素,也就是<html>部分。
:not选择器
如果想对某个结构元素使用样式,但是又想排除这个个元素下面的某个子元素,让它不使用此样式,可以使用它,看例子:
:empty选择器
当元素内容为空白的时候,使用其所定义的样式,案例如下:
使用其选择器来对页面中的target元素(该元素的ID被当作页面中的超链接)指定的样式,该样式只在用户点击了页面中的超链接,并且跳转到target元素后起作用,案例如下:
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>部分。
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="gb2312">
- <title>CSS3每日一练之选择器-结构性伪类选择器[一] |
前端开发网(W3Cfuns.com)!</title>
- <style type="text/css">
- *{margin:0; padding:0;}
- :root{background:#900;}
- #box{height:100px; background:#090;}
- </style>
- </head>
-
- <body>
- <div id="box"></div>
- </body>
- </html>
:not选择器
如果想对某个结构元素使用样式,但是又想排除这个个元素下面的某个子元素,让它不使用此样式,可以使用它,看例子:
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="gb2312">
- <title>CSS3每日一练之选择器-结构性伪类选择器[一] |
前端开发网(W3Cfuns.com)!</title>
- <style type="text/css">
- *{margin:0; padding:0;}
- #box *:not(h1){color:#900; font-weight:700;}
- </style>
- </head>
-
- <body>
- <div id="box">
- <h1>前端开发网(W3Cfuns.com)</h1>
- <p>web前端开发起飞区,Web前端开发高手聚集地,教程、资源完全免费!</p>
- </div>
- </body>
- </html>
:empty选择器
当元素内容为空白的时候,使用其所定义的样式,案例如下:
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="gb2312">
- <title>CSS3每日一练之选择器-结构性伪类选择器[一] |
前端开发网(W3Cfuns.com)!</title>
- <style type="text/css">
- *{margin:0; padding:0;}
- :empty{width:200px; height:200px; background:#008000;}
- </style>
- </head>
-
- <body>
- <div id="box"></div>
- </body>
- </html>
使用其选择器来对页面中的target元素(该元素的ID被当作页面中的超链接)指定的样式,该样式只在用户点击了页面中的超链接,并且跳转到target元素后起作用,案例如下:
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="gb2312">
- <title>CSS3每日一练之选择器-结构性伪类选择器[一] |
前端开发网(W3Cfuns.com)!</title>
- <style type="text/css">
- *{margin:0; padding:0;}
- :target{font-weight:700; color:#fff; background:#900;}
- </style>
- </head>
-
- <body>
- <p><a href="#box1">第一个</a> <a
href="#box2">第二个</a> <a href="#box3">第三个</a> <a
href="#box4">第四个</a></p>
- <div id="box1">
- <h1>第一个:前端开发网(W3Cfuns.com)</h1>
- <p>web前端开发起飞区,Web前端开发高手聚集地,教程、资源完全免费!</p>
- </div>
- <div id="box2">
- <h1>第二个:前端开发网(W3Cfuns.com)</h1>
- <p>web前端开发起飞区,Web前端开发高手聚集地,教程、资源完全免费!</p>
- </div>
- <div id="box3">
- <h1>第三个:前端开发网(W3Cfuns.com)</h1>
- <p>web前端开发起飞区,Web前端开发高手聚集地,教程、资源完全免费!</p>
- </div>
- <div id="box4">
- <h1>第四个:前端开发网(W3Cfuns.com)</h1>
- <p>web前端开发起飞区,Web前端开发高手聚集地,教程、资源完全免费!</p>
- </div>
- </body>
- </html>
【CSS3每日一练之选择器-结构性伪类选择器[一]】相关文章
本文来源:https://www.51html5.com/a860.html
上一篇:CSS3制作的分页导航
下一篇:CSS3每日一练之选择器-兄弟元素选择器
﹝CSS3每日一练之选择器-结构性伪类选择器[一]﹞相关内容
- CSS3每日一练之选择器-状态伪类选择器[一]
- CSS3每日一练之选择器-兄弟元素选择器
- CSS3每日一练之选择器-属性选择器
- CSS3每日一练之选择器-插入文字
- HTML5每日一练之progress标签的应用
- HTML5每日一练之视频标签的应用
- HTML5每日一练之OL列表的改良
- HTML5每日一练之datalist标签自动补全的使用
- HTML5每日一练之FileList文件列表对象的应用
- HTML5每日一练之figure新标签的应用