css3新增的选择器

最新推荐文章于 2024-07-06 20:00:00 发布

啊哈前端

最新推荐文章于 2024-07-06 20:00:00 发布

阅读量1.1k

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/wuzhe128520/article/details/51172763

版权

css3 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

css3的属性选择器
E[foo]	选择匹配E的元素，且该元素定义了foo属性。注意，E选择器可以省略，表示选择定义了foo属性的任意类型元素
E[foo="bar"]	选择匹配E的元素，且该元素将foo属性值定义为了"bar"。注意，E选择器可以省略，用法与上一个选择器类似。
E[foo~="bar"]	选择匹配E的元素，且该元素定义了foo属性，foo属性值是一个以空格符分隔的列表，其中一个列表的值为"bar"。注意，E选择符可以省略，表示可以匹配任意类型的元素。例如，a[tittle~="b1"]匹配<a title="b1 b2 b3"></a>，而不是匹配<a title="b2 b3 b5"></a>
E[foo\|="en"]	选择匹配E的元素，且该元素定义了foo属性，foo属性值是一个用连字符(-)分隔的列表，值开头的字符为 en。注意，E选择符可以省略，表示可以匹配任意类型的元素。例如，[lang\|="en"]匹配<body lang="en-us"></body>,而不是匹配<body lang="f-ag"></body>
E[foo^="bar"]	选择匹配E的元素，且该元素定义了foo属性，foo属性值包含了前缀为"bar"的字符串。注意，E选择符可以省略，表示可以匹配任意类型的元素。例如，body[lang^="en"]匹配<body lang="en-us"></body>,而不匹配<body lang="f-ag"></body>
E[foo$="bar"]	选择匹配E的元素，且该元素定义了foo属性，foo属性值包含后缀为"bar"的字符串。注意E选择符可以省略，表示可以匹配任意类型的元素。例如，img[src$=""jpg]匹配<img src="p.jpg" />,而不匹配<img src="p.gif" />
E[foo*="bar"]	选择匹配E的元素，且该元素定义了foo属性，foo属性值包含"bar"的子字符串。注意，E选择符可以省略，表示可以匹配任意类型的元素。例如： img[src$="jpg"]匹配<img src="p.jpg" />,而不匹配<img src="p.gif" />

<style type="text/css">
[align] {color: red}
[align="left"] {font-size: 20px;font-weight: bolder}
[lang^="en"] {color: blue;text-decoration: underline}/*匹配以en开头的lang属性*/
[src$="gif"] {border: 5px solid red} /*匹配以gif结尾的src属性值*/
[class~="wuzhe"] {background: orange} /*匹配以空格隔开的含有wuzhe的class属性（只有一个wuzhe的class也匹配）*/
[class|="wu"] {background: yellow} /*匹配以连字符"-"隔开的含有wu的class属性*/
</style>
</head>
<body>
<p align="center">这是使用属性定义样式</p>
<p align="left">这是使用属性值定义样式</p>
<p lang="en-us">我是蓝色的</p>
<p>下面使用了属性值后缀定义样式</p>
<img src="2.gif" border="1" />
<div class="wuzhe">我命由我不由天</div>
<div class="wuzhe wuming">彰显英雄本色</div>
<div class="wu-zhe">项羽</div>

结构伪类选择器
选择器	含义
E:root	匹配文档的根元素，对于html文档，就是html元素
E:nth-child(n)	匹配其父元素的第n个子元素，第一个编号为1,n也可以是odd或even或n的表达式
E:nth-last-child(n)	匹配其父元素的倒数第n个元素，第一个编号为1
E:nth-of-type(n)	与:nth-child()作用类似，但是仅仅匹配使用同种标签的元素
E:nth-last-of-type(n)	与:nth-last-child()作用类似，但是仅仅匹配使用同种标签的元素
E:last-child	匹配父元素的最后一个子元素，等同于：nth-last-child(1)
E:first-of-type	匹配父元素下使用使用同种标签的第一个子元素，等同于:nth-of-type(1)
E:last-of-type	匹配父元素下使用同种标签的最后一个子元素，等同于:nth-last-of-type(1)
E:only-child	匹配父元素下仅有的一个子元素
E:only-of-type	匹配父元素下使用同种标签的唯一一个子元素
E:empty	匹配一个不包含任何子元素的元素，注意，文本节点也被看做子元素

<style type="text/css">
:root {background: aquamarine} /*选择html*/
tr:nth-child(even) { /*选择tr的父元素下的偶数行的tr*/
	background: red;
}
tr:nth-last-child(2) { /*选择tr父元素下的倒数第三个的tr*/
	background: blue;
}
/*ul li:nth-of-type(odd) { /!*不是li元素则会跳过，不会在表达式计算*!/
	background: purple;
}*/
ul:first-of-type { /*匹配ul父元素下第一个ul元素(不管ul之前有多少其他元素，都会匹配ul)*/
	background: green;
}
ul:first-child { /*匹配ul父元素下第一个ul元素(如果ul之前有其他元素，则匹配不成功)*/
   background: purple;
}
</style>

<table>
	<tr class="1">
		<td>01</td>
		<td>02</td>
		<td>03</td>
		<td>04</td>
		<td>05</td>
		<td>06</td>
		<td>07</td>
		<td>08</td>
	</tr>
	<tr class="2">
		<td>01</td>
		<td>02</td>
		<td>03</td>
		<td>04</td>
		<td>05</td>
		<td>06</td>
		<td>07</td>
		<td>08</td>
	</tr>
	<tr class="3">
		<td>01</td>
		<td>02</td>
		<td>03</td>
		<td>04</td>
		<td>05</td>
		<td>06</td>
		<td>07</td>
		<td>08</td>
	</tr>
	<tr class="4">
		<td>01</td>
		<td>02</td>
		<td>03</td>
		<td>04</td>
		<td>05</td>
		<td>06</td>
		<td>07</td>
		<td>08</td>
	</tr>
	<tr class="5">
		<td>01</td>
		<td>02</td>
		<td>03</td>
		<td>04</td>
		<td>05</td>
		<td>06</td>
		<td>07</td>
		<td>08</td>
	</tr>
	<tr class="6">
		<td>01</td>
		<td>02</td>
		<td>03</td>
		<td>04</td>
		<td>05</td>
		<td>06</td>
		<td>07</td>
		<td>08</td>
	</tr>
	<tr class="7">
		<td>01</td>
		<td>02</td>
		<td>03</td>
		<td>04</td>
		<td>05</td>
		<td>06</td>
		<td>07</td>
		<td>08</td>
	</tr>
	<tr class="8">
		<td>01</td>
		<td>02</td>
		<td>03</td>
		<td>04</td>
		<td>05</td>
		<td>06</td>
		<td>07</td>
		<td>08</td>
	</tr>
</table>
<ul>
	<p>wwu</p>
	<li>1</li>
	<li>2
		<ul>
			<li>01</li>
			<li>02</li>
			<li>03</li>
			<li>04</li>
			<li>05</li>
			<li>06</li>
		</ul>
	</li>
	<li>3
		<ul>
			<li>鲁班大师</li>
		</ul>
	</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
</ul>
<ul>
	<li>001</li>
	<li>002
		<ul>
			<li>廉颇</li>
		</ul>
	</li>
	<li>003</li>
</ul>

UI元素常用的状态伪类选择器
E:enabled	匹配E的所有可用UI元素。注意、在网页中，UI元素一般是指包含在form元素内的表单元素。例如input:enabled匹配<form><input type="text"><input type="button" disabled=disabled /></form>代码中的文本框，而不匹配代码中的按钮
E:disabled	与上相反
E:checked	例如，input:checked匹配<form><input type="checkbox" /></form><input type="radio" checked="checked"/></form>代码中的单选按钮，但不匹配改代码中的复选框