核心提示：CSS选择器，主要是用来确定html的树形结构中的DOM元素节点。主要分为三部分：一、基本选择器选择器类型功能描述*通配选择器选择文档中所有的html元素E元素选择器选择指定的类型的html元素#id...
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与*号之间有个空格*/
- DOCTYPEhtml>
- <html>
- <head>
- <metacharset="utf-8">
- <title>菜鸟教程(runoob.com)</title>
- <style>
- :root{
- background:#ff0000;
- }
- </style>
- </head>
- <body>
- <h1>Thisisaheading</h1>
- </body>
-
</html>
4、E F：nth-child（n）
<!DOCTYPE HTML> <html>
<head> <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"> <title>无标题文档</title> <style> p{height:30px;border:1pxsolid#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> <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"> <title>无标题文档</title> <style> p{height:30px;border:1pxsolid#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> <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"> <title>无标题文档</title> <style> p{height:30px;border:1pxsolid#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> <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"> <title>无标题文档</title> <style> p{height:30px;border:1pxsolid#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> <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"> <title>无标题文档</title> <style> p{height:30px;border:1pxsolid#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> <ahref="#">链接</a> </p> <p>p5</p> </body>
</html>
五、文本新增伪类
选择器 功能描述 E ：： first-letter 选择文本块的第一个字母 E ：： first-line 选择文本快的第一行 E ：： before 和E ：： after 主要用于清除浮动 E ：： selection 选中的E元素
<!DOCTYPE HTML> <html> <head> <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"> <title>无标题文档</title> <style> p{width:300px;border:1pxsolid#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:1pxsolid#000;} p:after{content:"cat";display:block;border:1pxsolid#000;} </style> </head> <body> <p>前端开发的世界从未有过无声的寂静，精彩纷呈的互联网也不曾出现片刻安宁， 在 HTML5&CSS3 被炒至沸沸扬扬的今天，全面系统的掌握此项技能，是加重技术含金量的重要砝码！ </p> </body> </html>
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,p{margin:0;padding:0;}/*选择文档中所有的p元素、ul元素、p元素的外边距和内边距都为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> <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"> <title>无标题文档</title> <style> p{height:30px;border:1pxsolid#000;} p[cat]{background:red;}/*选择属性名为cat的元素*/ </style> </head> <body>
<pcat="leo">leo</p> <pcat="dp">杜鹏</p> <pcat="zM">子鼠</p> <pcat="xm">小美</p> </body> </html>
2、E[attr=val]
<!DOCTYPE HTML> <html> <head> <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"> <title>无标题文档</title> <style> p{height:30px;border:1pxsolid#000;} p[cat=leo]{background:red;} </style> </head> <body> <pcat="leo">leo</p> <pcat="dp">杜鹏</p> <pcat="zM">子鼠</p> <pcat="xm">小美</p> </body> </html> 3、E[attr|=val]
<!DOCTYPE HTML> <html> <head> <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"> <title>无标题文档</title> <style> p{height:30px;border:1pxsolid#000;} p[cat|=b]{background:#C3C;} </style> </head> <body> <pcat="b-leo">leo</p> <pcat="bleo">杜鹏</p> <pcat="b-leo">子鼠</p> <pcat="g-xm">小美</p> <pcat="b">无名氏</p> </body> </html>
4、E[attr~=val]
<!DOCTYPE HTML> <html> <head> <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"> <title>无标题文档</title> <style> p{height:30px;border:1pxsolid#000;} p[cat~=old]{background:red;} </style> </head> <body> <pcat="leo old">leo</p> <pcat="dp">杜鹏</p> <pcat="zM">子鼠</p> <pcat="xm">小美</p> </body> </html>
5、E[attr*=val]通配符
<!DOCTYPE HTML> <html> <head> <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"> <title>无标题文档</title> <style> p{height:30px;border:1pxsolid#000;} p[cat*=d]{background:#C3C;} </style> </head> <body> <pcat="bleo old">leo</p> <pcat="bdp">杜鹏</p> <pcat="bzM">子鼠</p> <pcat="gxm">小美</p> </body> </html>
6、E[attr^=val]起始符
<!DOCTYPE HTML> <html> <head> <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"> <title>无标题文档</title> <style> p{height:30px;border:1pxsolid#000;} p[cat^=g]{background:pink;} </style> </head> <body> <pcat="bleo old">leo</p> <pcat="bdp">杜鹏</p> <pcat="bzM">子鼠</p> <pcat="gxm">小美</p> </body> </html>
7、E[attr$=val]结束符
<!DOCTYPE HTML> <html> <head> <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"> <title>无标题文档</title> <style> p{height:30px;border:1pxsolid#000;} p[cat$=M]{background:#CC0;} </style> </head> <body> <pcat="bleo old">leo</p> <pcat="bdp">杜鹏</p> <pcat="bzM">子鼠</p> <pcat="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> <metahttp-equiv="Content-Type"content="text/html; charset=utf-8"> <title>无标题文档</title> <style> p{ height:30px; border:1pxsolid#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
[html]view plaincopy print?
