CSS选择器-前端--易笔记

CSS选择器，主要是用来确定html的树形结构中的DOM元素节点。主要分为三部分：

一、基本选择器

选择器	类型	功能描述
*	通配选择器	选择文档中所有的html元素
E	元素选择器	选择指定的类型的html元素
#id	ID选择器	选择指定ID属性值为“id”的任意类型的元素
.class	类选择器	选择指定的class属性值为“class”的任意类型的任意多个元素
selector1，selector2	群组选择器	将每一个选择器匹配的元素集合并

1.通配选择器的运用：它是用来选择文档中所有的元素或选择某个元素下的所有元素

2.元素选择器的运用：这是最常见的选择器了，选择的是文档的元素

3.ID选择器的运用：选择ID名为“id”的任意元素

4.类选择器的运用：选择class名为“class”的任意元素（可多个元素）

5、并列选择器（群组选择器）

二、层次选择器

选择器	类型	功能描述
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元素

2、E[attr=val]

4、E[attr~=val]

5、E[attr*=val]通配符

6、E[attr^=val]起始符

7、E[attr$=val]结束符

四、伪类选择器

选择器	功能描述
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

3、E ： root

[html]

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>

时间：2016/11/21 9:26:09