CSS3之选择器1（属性选择器，结构伪类）
2016-04-10 21:20
666 查看
一．属性选择器
1 E[attr]只使用属性名，但没有确定任何属性值
例如：
<style>
p{height:30px;border:1pxsolid #000;}
p[miaov]{background:red;}
</style>
</head>
<body>
<pmiaov="leo">leo</p>
<p miaov="dp">杜鹏</p>
<p miaov="zM">子鼠</p>
<p miaov="xm">小美</p>
</body>
2 E[attr="value"]指定属性名，并指定了该属性的属性值
<style>
p{height:30px;border:1pxsolid #000;}
p[miaov=leo]{background:red;}
</style>
</head>
<body>
<pmiaov="leo">leo</p>
<p miaov="dp">杜鹏</p>
<p miaov="zM">子鼠</p>
<p miaov="xm">小美</p>
</body>
</html>
3 E[attr~="value"]指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写
<style>
p{height:30px;border:1pxsolid #000;}
p[miaov~=old]{background:red;}
</style>
</head>
<body>
<p miaov="leoold">leo</p>
<p miaov="dp">杜鹏</p>
<p miaov="zM">子鼠</p>
<p miaov="xm">小美</p>
</body>
4 E[attr|="value"]指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）
<style>
p{height:30px;border:1pxsolid #000;}
p[miaov|=b]{background:#C3C;}
</style>
</head>
<body>
<p miaov="b-leo">leo</p>
<p miaov="bleo">杜鹏</p>
<pmiaov="b-leo">子鼠</p>
<p miaov="g-xm">小美</p>
<p miaov="b">无名氏</p>
</body>
5 E[attr^="value"]指定了属性名，并且有属性值，属性值是以value开头的
<style>
p{height:30px;border:1px solid #000;}
p[miaov^=g]{background:pink;}
</style>
</head>
<body>
<p miaov="bleoold">leo</p>
<pmiaov="bdp">杜鹏</p>
<pmiaov="bzM">子鼠</p>
<p miaov="gxm">小美</p>
</body>
6 E[attr$="value"]指定了属性名，并且有属性值，而且属性值是以value结束的
<style>
p{height:30px;border:1px solid #000;}
p[miaov$=M]{background:#CC0;}
</style>
</head>
<body>
<p miaov="bleoold">leo</p>
<pmiaov="bdp">杜鹏</p>
<p miaov="bzM">子鼠</p>
<p miaov="gXM">小美</p>
</body>
7 E[attr*="value"]指定了属性名，并且有属性值，而且属值中包含了value
<style>
p{height:30px;border:1pxsolid #000;}
p[miaov*=d]{background:#C3C;}
</style>
</head>
<body>
<p miaov="bleo old">leo</p>
<p miaov="bdp">杜鹏</p>
<p miaov="bzM">子鼠</p>
<p miaov="gxm">小美</p>
</body>
二． 结构性伪类
伪类选择器是CSS中已经定义好的选择器，不能随便起名。利用文档结构树实现元素过滤，通过文档结构的相互关系来匹配特定的元素，从而减少文档内Class属性和ID属性的定义，使得文档更加简洁。
1 E:nth-child(n) 表示E父元素中的第n个字节点
p:nth-child(odd){background:red}/*匹配奇数行*/
p:nth-child(even){background:red}/*匹配偶数行*/
p:nth-child(2n){background:red}//匹配偶数行
p:nth-child(2n+1){background:red}//匹配奇数行
<style>
p{height:30px;border:1px solid #000;}
body *:nth-child(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>
2 E:nth-last-child(n)表示E父元素中的第n个字节点，从后向前计算
与1是计算顺序相反的选择器
3 E:nth-of-type(n) 表示E父元素中的第n个字节点，且类型为E
<style>
p{height:30px;border:1px solid #000;}
p:nth-of-type(2){background:red;}
/*
p:nth-of-type(2) 找p标签父级下的第二个子元素，并且这个元素还的是p标签
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>
4 E:nth-last-of-type(n)表示E父元素中的第n个字节点，且类型为E,从后向前计算
5 E:first-child表示E元素中的第一个子节点
6 E:last-child表示E元素中的最后一个子节点
7 E:first-of-type表示E父元素中的第一个子节点且节点类型是E的
8 E:last-of-type表示E父元素中的最后一个子节点且节点类型是E的
: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)
9 E:empty表示E元素中没有子节点。注意：子节点包含文本节点
<style>
p{height:30px;border:1pxsolid #000;}
p:empty{background:red;}
</style>
</head>
<body>
<p></p>
<h1>h1</h1>
<p>p2</p>
<h1>h2</h1>
<p>p3</p>
<h1>h3</h1>
<p><span></span></p>
<p>p5</p>
</body>
10 E:only-child表示E元素中只有一个子节点。注意：子节点不包含文本节点关注子节点
如：匹配<div><p></p></div 但不匹配<div><p></p><h1></h1></div
11 E:only-of-type
表示父元素只包含一个同类子元素且子元素匹配E。注意：子节点不包含文本节点 关注类型
如：匹配<div><p></p></div 也匹配<div><p></p><h1></h1></div
<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;}
</style>
</head>
<body>
<p></p>
<h1>h1</h1>
<p>p2</p>
<h1>h2</h1>
<p><span></span></p>
<h1>h3</h1>
<p>
<span></span>
<a href="#">链接</a>
</p>
<p>p5</p>
</body>
1 E[attr]只使用属性名，但没有确定任何属性值
例如：
<style>
p{height:30px;border:1pxsolid #000;}
p[miaov]{background:red;}
</style>
</head>
<body>
<pmiaov="leo">leo</p>
<p miaov="dp">杜鹏</p>
<p miaov="zM">子鼠</p>
<p miaov="xm">小美</p>
</body>
2 E[attr="value"]指定属性名，并指定了该属性的属性值
<style>
p{height:30px;border:1pxsolid #000;}
p[miaov=leo]{background:red;}
</style>
</head>
<body>
<pmiaov="leo">leo</p>
<p miaov="dp">杜鹏</p>
<p miaov="zM">子鼠</p>
<p miaov="xm">小美</p>
</body>
</html>
3 E[attr~="value"]指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写
<style>
p{height:30px;border:1pxsolid #000;}
p[miaov~=old]{background:red;}
</style>
</head>
<body>
<p miaov="leoold">leo</p>
<p miaov="dp">杜鹏</p>
<p miaov="zM">子鼠</p>
<p miaov="xm">小美</p>
</body>
4 E[attr|="value"]指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）
<style>
p{height:30px;border:1pxsolid #000;}
p[miaov|=b]{background:#C3C;}
</style>
</head>
<body>
<p miaov="b-leo">leo</p>
<p miaov="bleo">杜鹏</p>
<pmiaov="b-leo">子鼠</p>
<p miaov="g-xm">小美</p>
<p miaov="b">无名氏</p>
</body>
5 E[attr^="value"]指定了属性名，并且有属性值，属性值是以value开头的
<style>
p{height:30px;border:1px solid #000;}
p[miaov^=g]{background:pink;}
</style>
</head>
<body>
<p miaov="bleoold">leo</p>
<pmiaov="bdp">杜鹏</p>
<pmiaov="bzM">子鼠</p>
<p miaov="gxm">小美</p>
</body>
6 E[attr$="value"]指定了属性名，并且有属性值，而且属性值是以value结束的
<style>
p{height:30px;border:1px solid #000;}
p[miaov$=M]{background:#CC0;}
</style>
</head>
<body>
<p miaov="bleoold">leo</p>
<pmiaov="bdp">杜鹏</p>
<p miaov="bzM">子鼠</p>
<p miaov="gXM">小美</p>
</body>
7 E[attr*="value"]指定了属性名，并且有属性值，而且属值中包含了value
<style>
p{height:30px;border:1pxsolid #000;}
p[miaov*=d]{background:#C3C;}
</style>
</head>
<body>
<p miaov="bleo old">leo</p>
<p miaov="bdp">杜鹏</p>
<p miaov="bzM">子鼠</p>
<p miaov="gxm">小美</p>
</body>
二． 结构性伪类
伪类选择器是CSS中已经定义好的选择器，不能随便起名。利用文档结构树实现元素过滤，通过文档结构的相互关系来匹配特定的元素，从而减少文档内Class属性和ID属性的定义，使得文档更加简洁。
1 E:nth-child(n) 表示E父元素中的第n个字节点
p:nth-child(odd){background:red}/*匹配奇数行*/
p:nth-child(even){background:red}/*匹配偶数行*/
p:nth-child(2n){background:red}//匹配偶数行
p:nth-child(2n+1){background:red}//匹配奇数行
<style>
p{height:30px;border:1px solid #000;}
body *:nth-child(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>
2 E:nth-last-child(n)表示E父元素中的第n个字节点，从后向前计算
与1是计算顺序相反的选择器
3 E:nth-of-type(n) 表示E父元素中的第n个字节点，且类型为E
<style>
p{height:30px;border:1px solid #000;}
p:nth-of-type(2){background:red;}
/*
p:nth-of-type(2) 找p标签父级下的第二个子元素，并且这个元素还的是p标签
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>
4 E:nth-last-of-type(n)表示E父元素中的第n个字节点，且类型为E,从后向前计算
5 E:first-child表示E元素中的第一个子节点
6 E:last-child表示E元素中的最后一个子节点
7 E:first-of-type表示E父元素中的第一个子节点且节点类型是E的
8 E:last-of-type表示E父元素中的最后一个子节点且节点类型是E的
: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)
9 E:empty表示E元素中没有子节点。注意：子节点包含文本节点
<style>
p{height:30px;border:1pxsolid #000;}
p:empty{background:red;}
</style>
</head>
<body>
<p></p>
<h1>h1</h1>
<p>p2</p>
<h1>h2</h1>
<p>p3</p>
<h1>h3</h1>
<p><span></span></p>
<p>p5</p>
</body>
10 E:only-child表示E元素中只有一个子节点。注意：子节点不包含文本节点关注子节点
如：匹配<div><p></p></div 但不匹配<div><p></p><h1></h1></div
11 E:only-of-type
表示父元素只包含一个同类子元素且子元素匹配E。注意：子节点不包含文本节点 关注类型
如：匹配<div><p></p></div 也匹配<div><p></p><h1></h1></div
<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;}
</style>
</head>
<body>
<p></p>
<h1>h1</h1>
<p>p2</p>
<h1>h2</h1>
<p><span></span></p>
<h1>h3</h1>
<p>
<span></span>
<a href="#">链接</a>
</p>
<p>p5</p>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 