CSS选择器,主要是用来确定html的树形结构中的DOM元素节点。主要分为三部分:
一、基本选择器
选择器 | 类型 | 功能描述 |
* | 通配选择器 | 选择文档中所有的html元素 |
E | 元素选择器 | 选择指定的类型的html元素 |
#id | ID选择器 | 选择指定ID属性值为“id”的任意类型的元素 |
.class | 类选择器 | 选择指定的class属性值为“class”的任意类型的任意多个元素 |
selector1,selector2 | 群组选择器 | 将每一个选择器匹配的元素集合并 |
- *{marigin:0;padding:0;}/*指的是文档中所有的元素的margin值和padding值为0*/
- ul *{background:blue;}/*指的是ul元素里的所有标签的背景颜色为蓝色,这里选择的对象是ul的所有子代元素;书写时ul与*号之间有个空格*/
2.元素选择器的运用:这是最常见的选择器了,选择的是文档的元素
- p{color:red;}/*指的是文档中所有p标签的内容颜色为红色*/
3.ID选择器的运用:选择ID名为“id”的任意元素
- #box{background:yellow;}/*选择ID名为box的元素,让它的背景为黄色*/
4.类选择器的运用:选择class名为“class”的任意元素(可多个元素)
- .box{background:yellow;}/*选择class名为box的一个或多个元素,让它的背景为黄色*/
5、并列选择器(群组选择器)
- p,ul,div{margin:0;padding:0;}/*选择文档中所有的p元素、ul元素、div元素的外边距和内边距都为0*/
二、层次选择器
选择器 | 类型 | 功能描述 |
E F | 后代选择器 | 选择匹配的F元素,且F元素被包含在匹配的E元素内 |
E > F | 子选择器 | 选择匹配的F元素,且F元素是E元素的子元素 |
E + F | 相邻兄弟选择器 | 选择匹配的F元素,且F元素是E元素后面紧邻的兄弟元素 |
E ~ F | 通用选择器 | 选择匹配的F元素,且F元素是E元素后面的所有兄弟元素 |
三、属性选择器
选择器 | 功能描述 |
E[attr] | 选中具有attr属性的E元素 |
E[attr=val] | 选中具有attr属性,并且属性值为val的E元素 |
E[attr|=val] | 选中具有attr属性,并且属性值为val或以val-开头 |
E[attr~=val] | 选中具有attr属性,并且属性值包含val的E元素,该属性值必须以空格隔开 |
E[attr*=val]通配符 | 选中具有attr属性,并且属性值包含val的E元素 |
E[attr^=val]起始符 | 选中具有attr属性,并且属性值以val开始的E元素 |
E[attr$=val]结束符 | 选中具有attr属性,并且属性值以val结束的E元素 |
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p{height:30px;border:1px solid #000;}
p[cat]{background:red;}/*选择属性名为cat的元素*/
</style>
</head>
<body>
<p cat="leo">leo</p>
<p cat="dp">杜鹏</p>
<p cat="zM">子鼠</p>
<p cat="xm">小美</p>
</body>
</html>
2、E[attr=val]
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p{height:30px;border:1px solid #000;}
p[cat=leo]{background:red;}
</style>
</head>
<body>
<p cat="leo">leo</p>
<p cat="dp">杜鹏</p>
<p cat="zM">子鼠</p>
<p cat="xm">小美</p>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p{height:30px;border:1px solid #000;}
p[cat|=b]{background:#C3C;}
</style>
</head>
<body>
<p cat="b-leo">leo</p>
<p cat="bleo">杜鹏</p>
<p cat="b-leo">子鼠</p>
<p cat="g-xm">小美</p>
<p cat="b">无名氏</p>
</body>
</html>
4、E[attr~=val]
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p{height:30px;border:1px solid #000;}
p[cat~=old]{background:red;}
</style>
</head>
<body>
<p cat="leo old">leo</p>
<p cat="dp">杜鹏</p>
<p cat="zM">子鼠</p>
<p cat="xm">小美</p>
</body>
</html>
5、E[attr*=val]通配符
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p{height:30px;border:1px solid #000;}
p[cat*=d]{background:#C3C;}
</style>
</head>
<body>
<p cat="bleo old">leo</p>
<p cat="bdp">杜鹏</p>
<p cat="bzM">子鼠</p>
<p cat="gxm">小美</p>
</body>
</html>
6、E[attr^=val]起始符
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p{height:30px;border:1px solid #000;}
p[cat^=g]{background:pink;}
</style>
</head>
<body>
<p cat="bleo old">leo</p>
<p cat="bdp">杜鹏</p>
<p cat="bzM">子鼠</p>
<p cat="gxm">小美</p>
</body>
</html>
7、E[attr$=val]结束符
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p{height:30px;border:1px solid #000;}
p[cat$=M]{background:#CC0;}
</style>
</head>
<body>
<p cat="bleo old">leo</p>
<p cat="bdp">杜鹏</p>
<p cat="bzM">子鼠</p>
<p cat="gXM">小美</p>
</body>
</html>
四、伪类选择器
选择器 | 功能描述 |
E : first-child | 作为父元素的第一个子元素的E元素 |
E : last-child | 作为父元素的最后一个子元素的E元素 |
E : root | |
E F:nth-child(n) | 选中的F元素是E元素的第n个子元素 |
E F: nth-last-child(n) | 选中的F元素是E元素的倒数第n个子元素 |
E : nth-of-type(n) | 选择父元素内具有指定类型的第n个E元素 |
E : nth-last-of--type(n) | 选择父元素内具有指定类型的倒数第n个E元素 |
E : first-of-type | 选择父元素内具有指定类型的第1个E元素 |
E : last-of-type | 选择父元素内具有指定类型的倒数第1个E元素 |
E : only-child | 选择父元素内只包含一个子元素,且该元素是E元素 |
E : only-of-type | 选择父元素内只包含一个类型的子元素,且该元素是E元素 |
E : empty | 选择没有子元素的元素 |
2、E : last-child
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p {
height: 30px;
border: 1px solid #000;
}
p:first-child {
background: red;
}
/*
p:nth-child(2) 找p标签父级下的第二个子元素,并且这个元素还的是p标签
p:nth-of-type(2) 找p标签父级下的第二个p元素
:first-child==:nth-child(1)
:last-child==:nth-last-child(1)
:first-of-type==nth-of-type(1)
:last-of-type==nth-last-of-type(1)
*/
</style>
</head>
<body>
<p>p1</p>
<h1>h1</h1>
<p>p2</p>
<h1>h2</h1>
<p>p3</p>
<h1>h3</h1>
<p>p4</p>
<p>p5</p>
</body>
</html>
3、E : root
4、 E F:nth-child(n)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p {height: 30px;border: 1px solid #000;}
h2:nth-child(1) {/*查找p标签的父元素的第一个孩子,并且该标签刚好是p标记.*/
background: red;}
</style>
</head>
<body>
<h2>h2</h2>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<p>p5</p>
</body>
</html>
5、E F: nth-last-child(n)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p {height: 30px;border: 1px solid #000;}
body *:nth-last-child(2n) {background: red;}
/*p:nth-child(2) 找p标签父级下的第二个子元素,并且这个元素还的是p标签*/
</style>
</head>
<body>
<p>p1</p>
<h1>h1</h1>
<p>p2</p>
<h1>h2</h1>
<p>p3</p>
<h1>h3</h1>
<p>p4</p>
<p>p5</p>
</body>
</html>
6、E : nth-of-type(n)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p {height: 30px;border: 1px solid #000;}
p:nth-of-type(4) {background: red;}
/*p:nth-child(2) 找p标签父级下的第二个子元素,并且这个元素还的是p标签
p:nth-of-type(2) 找p标签父级下的第二个p元素*/
</style>
</head>
<body>
<p>p1</p>
<h1>h1</h1>
<p>p2</p>
<h1>h2</h1>
<p>p3</p>
<h1>h3</h1>
<p>p4</p>
<p>p5</p>
</body>
</html>
7、E : nth-last-of--type(n)
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p {height: 30px;border: 1px solid #000;}
p:nth-last-of-type(2) {background: red;}
</style>
</head>
<body>
<p>p1</p>
<h1>h1</h1>
<p>p2</p>
<h1>h2</h1>
<p>p3</p>
<h1>h3</h1>
<p>p4</p>
<p>p5</p>
</body>
</html>
8、E : first-of-type
:first-of-type==nth-of-type(1)
9、E : last-of-type
:last-of-type==nth-last-of-type(1)
10、E : only-child
11、E : only-of-type
12、E : empty
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p {height: 30px;border: 1px solid #000;}
p:empty {background: red;}
span {display: block;height: 20px;}
p *:only-of-type {background: yellow;}
p *:only-child {background: blue;}
/*p:nth-child(2) 找p标签父级下的第二个子元素,并且这个元素还的是p标签
p:nth-of-type(2) 找p标签父级下的第二个p元素
:first-child==:nth-child(1)
:last-child==:nth-last-child(1)
:first-of-type==nth-of-type(1)
:last-of-type==nth-last-of-type(1)
*/
</style>
</head>
<body>
<p></p>
<h1>h1</h1>
<p>p2</p>
<h1>h2</h1>
<p><span></span></p>
<h1>h3</h1>
<p>
<span></span>
<span></span>
<a href="#">链接</a>
</p>
<p>p5</p>
</body>
</html>
五、文本新增伪类
选择器 | 功能描述 |
E :: first-letter | 选择文本块的第一个字母 |
E :: first-line | 选择文本快的第一行 |
E :: before 和E :: after | 主要用于清除浮动 |
E :: selection | 选中的E元素 |
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
p{width:300px;border:1px solid #000;font:12px/30px "宋体";padding:10px;}
p:first-line{ background:red;}
p:first-letter{ font-size:30px;}
p::selection{background:#F60;color:#690;}
p:before{ content:"cat"; display:block; border:1px solid #000;}
p:after{ content:"cat"; display:block; border:1px solid #000;}
</style>
</head>
<body>
<p>前端开发的世界从未有过无声的寂静,精彩纷呈的互联网也不曾出现片刻安宁,
在 HTML5&CSS3 被炒至沸沸扬扬的今天,全面系统的掌握此项技能,是加重技术含金量的重要砝码!
</p>
</body>
</html>