首页 > web前端 > html/css/css3 > Css3.0选择符,Css3.0伪类详解,附示例
网站建设、切图、企业建站、微信开发 联系QQ:404658186 tel:18716186715
2015
06-12

Css3.0选择符,Css3.0伪类详解,附示例

文章目录 [收起]

Css3.0的选择符和伪类相对于Css2.0增加了更多的属性和方法,我们可以更加便捷、灵活的对网页的dom设置css属性,本文只讲解css3.0中的选择符和伪类,css2.0中已有的选择符和伪类本文不涉及,请自行查阅资料,下面就来详细了解一下。

子串匹配的属性选择符 E[att^=”val”]

语法

E[att^=”val”] : {attribute}

说明

匹配具有att属性、且值以val开头的E元素

语法

E[att$=”val”] : {attribute}

说明

匹配具有att属性、且值以val结尾的E元素

语法

E[att*=”val”] : {attribute}

说明

匹配具有att属性、且值中含有val的E元素

示例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>E[att^="val"]测试</title>
</head>
<style type="text/css">
.main{border:solid 1px #666;padding:10px;}
p[title^="val"]{color:#f00;}
p[title$="von"]{color:#00f;}
p[title*="boy"]{color:#0f0;}
</style>
<body>
<div class="main">
 <p title="value">匹配具有att属性、且值以val开头的E元素</p>
 <p title="devon">匹配具有att属性、且值以val结尾的E元素</p>
 <p title="devboyn">匹配具有att属性、且值中含有val的E元素</p>
</div>
</body>
</html>

css3.0子串匹配的属性选择符

结构性伪类 E:root

语法

E:root{attribute}

说明

匹配文档的根元素。在HTML中,根元素永远是HTML

示例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
html:root {background:#DCDCDC;}
</style>
<title>结构性伪类 E:root</title>
</head>
<body>
<p>结构性伪类 E:root</p>
</body>
</html>

E:root

结构性伪类 E:nth-child(n)

语法

E:nth-child(n) {attribute}

说明

匹配父元素中的第n个子元素E,n从1开始。

示例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
p:nth-child(2) {color:#f00;}
p:nth-child(3) {color:#00f;}
</style>
<title>结构性伪类 E:nth-child(n)</title>
</head>

<body>
 <p>匹配父元素中的第n个子元素E</p>
 <p>匹配父元素中的第n个子元素E</p>
 <p>匹配父元素中的第n个子元素E</p>
</body>
</html>

结构性伪类 E:nth-child(n)

结构性伪类 E:nth-last-child(n)

语法

E:nth-last-child(n){attribute}

说明

匹配父元素中的倒数第n个结构子元素E

示例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
p:nth-last-child(1) {color:#f00;}
</style>
<title>结构性伪类 E:nth-last-child(n)</title>
</head>
<body>
 <p>匹配父元素中倒数第n个子元素</p>
 <p>匹配父元素中倒数第n个子元素</p>
 <p>匹配父元素中倒数第n个子元素</p>
</body>
</html>

结构性伪类 E:nth-last-child(n)

结构性伪类 E:nth-of-type(n)

语法

E:nth-of-type(n){attribute}

说明

匹配同类型中的第n个同级兄弟元素E

示例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
p:nth-of-type(2) {color:#f00;}
</style>
<title>结构性伪类 E:nth-last-type(n)</title>
</head>
<body>
 <p>匹配父元素中的倒数第n个结构子元素E</p>
 <div>匹配父元素中的倒数第n个结构子元素E</div>
 <div>匹配父元素中的倒数第n个结构子元素E</div>
 <p>匹配父元素中的倒数第n个结构子元素E</p>
 <p>匹配父元素中的倒数第n个结构子元素E</p>
</body>
</html>

结构性伪类 E:nth-last-child(n)

结构性伪类 E:nth-last-of-type(n)

语法

E:nth-last-of-type(n) : {attribute}

说明

匹配同类型中的倒数第n个同级兄弟元素E

示例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
p:nth-last-of-type(1) {color:#f00;}
</style>
<title>结构性伪类 E:nth-last-of-type(n)</title>
</head>
<body>
 <p>匹配父元素中的倒数第n个结构子元素E</p>
 <div>匹配父元素中的倒数第n个结构子元素E</div>
 <div>匹配父元素中的倒数第n个结构子元素E</div>
 <p>匹配父元素中的倒数第n个结构子元素E</p>
 <p>匹配父元素中的倒数第n个结构子元素E</p>
</body>
</html>

结构性伪类E:nth-last-of-type(n)

结构性伪类E:last-child

语法

E:last-child : {attribute}

说明

匹配父元素中最后一个E元素

示例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
p:last-child {color:#f00;}
</style>
<title>结构性伪类 E:last-child</title>
</head>
<body>
 <p>匹配父元素中最后一个E元素</p>
 <p>匹配父元素中最后一个E元素</p>
 <p>匹配父元素中最后一个E元素</p>
</body>
</html>

结构性伪类E:last-child

结构性伪类 E:first-of-type

语法

first-of-type : {attribute}

说明

匹配同级兄弟元素中的第一个E元素

示例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
p:first-of-type {color:#f00;}
</style>
<title>结构性伪类 first-of-type</title>
</head>
<body>
 <div>非p元素,不匹配</div>
 <p>匹配父元素中最后一个E元素</p>
 <p>匹配父元素中最后一个E元素</p>
 <p>匹配父元素中最后一个E元素</p>
</body>
</html>

first-of-type

结构性伪类 E:only-child

语法

E:only-child : {attribute}

说明

匹配属于父元素中唯一子元素的E

示例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
p:only-child {color:#f00;}
</style>
<title>结构性伪类 E:only-child</title>
</head>
<body>
<div>
 <p>匹配属于父元素中唯一子元素的E</p>
</div>
<div>
 <p>匹配属于父元素中唯一子元素的E</p>
 <p>匹配属于父元素中唯一子元素的E</p>
</div>
</body>
</html>

结构性伪类 E:only-child

结构性伪类 E:only-of-type

语法

E:only-of-type : {attribute}

说明

匹配属于同类型中唯一兄弟元素的E

示例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
p:only-child {color:#f00;}
</style>
<title>结构性伪类 E:only-of-type</title>
</head>
<body>
<div>
 <p>匹配属于同类型中唯一兄弟元素的E</p>
</div>
<div>
 <p>匹配属于同类型中唯一兄弟元素的E</p>
</div>
<div>
 <p>匹配属于同类型中唯一兄弟元素的E</p>
 <p>匹配属于同类型中唯一兄弟元素的E</p>
</div>
</body>
</html>

结构性伪类 E:only-of-type

结构性伪类 E:empty

语法

E:empty : {attribute}

说明

匹配没有任何子元素(包括text节点)的元素E

示例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
p:empty {height:20px;border:solid 1px #f00;}
</style>
<title>结构性伪类 E:empty</title>
</head>
<body>
 <p>匹配没有任何子元素(包括text节点)的元素E</p>
 <p></p>
 <p></p>
</body>
</html>

结构性伪类 E:empty

 

UI元素状态伪类

语法

E:checked : {attribute}

说明

匹配所有用户界面(form表单)中处于选中状态的元素E

语法

E:enabled : {attribute}

说明

匹配所有用户界面(form表单)中处于可用状态的E元素

语法

E:disabled : {attribute}

说明

匹配所有用户界面(form表单)中处于不可用状态的E元素

语法

E::selection : {attribute}

说明

匹配E元素中被用户选中或处于高亮状态的部分,在css2.0中我们无法定义元素选择中时的状态,现在在css3.0中使用::selection设置选中背景,文字颜色等css属性。

示例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
input:checked {margin-right:50px;}
input:enabled {backgroundr:#f90;}
input:disabled {border:solid 1px #f00;}
p::selection {background-color:#f60;color:#fff;}
</style>
<title>UI元素状态伪类 </title>
</head>
<body>
<form method="post" action="">
 <input type="radio" name="css3" checked="checked" />
 <input type="radio" name="css3" /><br/><br/>
 <input type="text" value="默认状态下的表单都是enabled" />
 <br/><br/>
 <input type="text" value="" disabled="disabled" />
 <p>::selection 更改页面选中状态</p>
</form>
</body>
</html>

UI元素状态伪类

否定伪类 E:not(s)

语法

E:not(s) : {attribute}

说明

匹配所有不匹配简单选择符s的元素E

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
p:not(.nobg){background:#ddd} 
</style>
<title>UI元素状态伪类 </title>
</head>
<body>
<p>匹配所有不匹配简单选择符s的元素E</p>
<p class="nobg">匹配所有不匹配简单选择符s的元素E</p>
<p>匹配所有不匹配简单选择符s的元素E</p>
<p>匹配所有不匹配简单选择符s的元素E</p>
<p class="nobg">匹配所有不匹配简单选择符s的元素E</p>
<p class="nobg">匹配所有不匹配简单选择符s的元素E</p>
</body>
</html>

否定伪类 E:not(s)

 

目标伪类 E:target

语法

E:target : {attribute}

说明

匹配相关URL指向的E元素,也就是浏览器地址栏中#标签ID

示例

请详细观察浏览器地址栏中的变化。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
p:target{background:#f80;}
</style>
<title>目标伪类 E:target </title>
</head>
<body>
<p id="p1">目标伪类 E:target #p1</p>
<p id="p2">目标伪类 E:target #p2</p>
<p id="p3">目标伪类 E:target #p3</p>
<p id="p4">目标伪类 E:target #p4</p>
</body>
</html>

目标伪类 E:target 目标伪类 E:target 目标伪类 E:target 目标伪类 E:target

 

通用兄弟元素选择器 E ~ F

语法:

E ~ F : {attribute}

说明:

匹配E元素之后的F元素

示例

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div ~ p {background-color:#f80;}
</style>
<title>目标伪类 E:target </title>
</head>
<body>
<div>
 <p>匹配E元素之后的F元素</p>
 <p>匹配E元素之后的F元素</p>
</div>
<hr />
<p>匹配E元素之后的F元素</p>
<p>匹配E元素之后的F元素</p>
<hr />
<p>匹配E元素之后的F元素</p>
<hr />
<div>匹配E元素之后的F元素</div>
<hr />
<p>匹配E元素之后的F元素</p>
</body>
</html>

通用兄弟元素选择器 E ~ F

以上就是对css3.0中选择符及css3伪类的详解,也是比较全了,若有遗漏或错误的地方欢迎指证。

最后编辑:
作者:码农一号
这个作者貌似有点懒,什么都没有留下。
捐 赠如果您觉得这篇文章有用处,请支持作者!鼓励作者写出更好更多的文章!

留下一个回复

你的email不会被公开。

*