css3选择器分为基本选择器、层次选择器、属性选择器、伪类选择器和伪元素选择器。
今天主要讲了,基本、层次、属性、伪类选择器
一、基本选择器
* 通配选择器 选择文档中所有的html元素
’*‘ 任意字符
E 元素选择器 选择指定的类型的html元素
例如:p div h3 ----元素选择器也叫标签选择器
#id ID选择器 选择指定ID属性值为“id”的任意类型的元素
.class 类选择器 选择指定的class属性值为“class”的任意类型的任意多个元素
selector1,selector2 群组选择器 将每一个选择器匹配的元素集合并
----群组选择器也叫并列选择器
二、层次选择器
E F 后代选择器 选择匹配的F元素,且F元素被包含在匹配的E元素内
----即为找到E元素后面的所有子代元素F(找后代)
E > F 子选择器 选择匹配的F元素,且F元素是E元素的子元素
----找到E元素后面的第一层子元素 F
E + F 相邻兄弟选择器 选择匹配的F元素,且F元素是E元素后面紧邻的兄弟元素
----找到E元素后面的第一个相邻兄弟元素F
E ~ F 通用选择器 选择匹配的F元素,且F元素是E元素后面的所有兄弟元素
----找到E元素后面的所有兄弟元素F
三、属性选择器
E[attr] 选中具有attr属性的E元素
以下是关于具有attr属性的小例子
<!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属性的标记(cat属性为自定义属性)
</style>
</head>
<body>
<p cat="leo">leo</p>
<p cat="dp">杜鹏</p>
<p cat="zM">子鼠</p>
<p cat="xm">小美</p>
</body>
</html>
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=leo]{background:red;}//找到含有cat属性值为‘leo’的标记(cat属性为自定义属性)
</style>
</head>
<body>
<p cat="leo">leo</p>
<p cat="dp">杜鹏</p>
<p cat="zM">子鼠</p>
<p cat="xm">小美</p>
</body>
</html>
E[attr|=val] 选中具有attr属性,并且属性值为val或以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|=b]{background:#C3C;}//找到含有cat属性中以‘b’或‘b-’开头的标记(cat属性为自定义属性)
</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>
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~=old]{background:red;}//找到含有cat属性值里面含有'old'字符的标记(cat属性为自定义属性)
</style>
</head>
<body>
<p cat="leo old">leo</p>
<p cat="dp">杜鹏</p>
<p cat="zM">子鼠</p>
<p cat="xm">小美</p>
</body>
</html>
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*=d]{background:#C3C;}//找到含有cat属性中所有‘d’字符的标记(cat属性为自定义属性)*(为任意字符)
</style>
</head>
<body>
<p cat="bleo old">leo</p>
<p cat="bdp">杜鹏</p>
<p cat="bzM">子鼠</p>
<p cat="gxm">小美</p>
</body>
</html>
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^=g]{background:pink;}//找到含有cat属性里面以‘g’开头的标记(cat属性为自定义属性)
</style>
</head>
<body>
<p cat="bleo old">leo</p>
<p cat="bdp">杜鹏</p>
<p cat="bzM">子鼠</p>
<p cat="gxm">小美</p>
</body>
</html>
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$=M]{background:#CC0;}//找到含有cat属性里以‘M’结尾的标记(cat属性为自定义属性)
</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 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 选择没有子元素的元素
五、文本类新增伪类选择器
E :: first-letter 选择文本块的第一个字母
E :: first-line 选择文本快的第一行
E :: before 和E :: after 主要用于清除浮动
E :: selection 选中的E元素