属性选择器和模糊匹配
根据部分属性值选择:
如果需要根据属性值中的词列表的某个词进行选择,则需要使用波浪号(~)。
假设您想选择 class 属性中包含 important 的元素,可以用下面这个选择器做到这一点:
p[class~="important"] {color: red;}
如果忽略了波浪号,则说明需要完成完全值匹配。
部分值属性选择器与点号类名记法的区别:
该选择器等价于我们在类选择器中讨论过的点号类名记法。
也就是说,p.important 和 p["important"] 应用到 HTML 文档时是等价的。
那么,为什么还要有 "~=" 属性选择器呢?因为它能用于任何属性,而不只是 class。
例如,可以有一个包含大量图像的文档,其中只有一部分是图片。对此,可以使用一个基于 title 文档的部分属性选择器,只选择这些图片:
img[title~="Figure"] {border: 1px solid gray;}
这个规则会选择 title 文本包含 "Figure" 的所有图像。没有 title 属性或者 title 属性中不包含 "Figure" 的图像都不会匹配。
子串匹配属性选择器
下面为您介绍一个更高级的选择器模块,它是 CSS2 完成之后发布的,其中包含了更多的部分值属性选择器。
按照规范的说法,应该称之为“子串匹配属性选择器”。很多现代浏览器都支持这些选择器,包括 IE7。
下表是对这些选择器的简单总结:
类型 描述
------------------------------------------------------
[abc^="def"] 选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"] 选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"] 选择 abc 属性值中包含子串 "def" 的所有元素
------------------------------------------------------
可以想到,这些选择有很多用途。
举例来说,如果希望对指向 W3School 的所有链接应用样式,不必为所有这些链接指定 class,再根据这个类编写样式,而只需编写以下规则:
a[href*="w3school.com.cn"] {color: red;}
结构性伪类选择器
p:first-line{
color:red; /*给p标签中第一行加样式*/
}
p:first-letter {
color:red; /*给p标签中第一个字或字母加样式 */
}
li:before {
content:"--"; /*给每一个li标签之前插入内容 //或:text-indent:10px; 首行文本缩进10像素*/
font-size:10px;
color:gray;
}
li:after {
content:"解释语"; /*给每一个li标签之后插入内容*/
font-size:10px;
color:gray;
}
root、not、empty、target选择器
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>CSS3_选择器测试</title>
<style type="text/css">
:root {
background-color: lightgray;
}
/*如果使用了root,则body选择器只对内容区域起作用*/
body {
background-color: darkseagreen;
}
div *:not(h1) {
color: red;
}
table tr td:empty {
background-color: gray;
}
/*URL 带有后面跟有锚名称 #,指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)*/
div:target {
background-color: darkorange;
}
</style>
</head>
<body>
<div>
<h2>h2标签</h2>
<h1>这是标题</h1>
<p>这是一个p标签</p>
</div>
<hr/>
<table border="1">
<tr>
<td>内容1</td>
<td>内容2</td>
</tr>
<tr>
<td></td>
<td>内容2</td>
</tr>
<tr>
<td>内容1</td>
<td></td>
</tr>
</table>
<hr/>
<!-- 锚 -->
<a href="#a1">菜单一</a>
<a href="#a2">菜单二</a>
<a href="#a3">菜单三</a>
<a href="#a4">菜单四</a>
<div id="a1">
<h1>菜单一</h1>
<p>内容一</p>
</div>
<div id="a2">
<h1>菜单二</h1>
<p>内容二</p>
</div>
<div id="a3">
<h1>菜单三</h1>
<p>内容三</p>
</div>
<div id="a4">
<h1>菜单四</h1>
<p>内容四</p>
</div>
</body>
</html>
效果图:
序号选择器
li:first-child { /*第一个*/
background-color: yellow;
}
li:last-child { /*最后一个*/
background-color: lightblue;
}
li:nth-child(3) { /*从前往后数*/
background-color: darkorange;
}
li:nth-last-child(3) { /*从后向前数*/
background-color: darkgray;
}
li:nth-child(odd) { /*从前往后数奇数个*/
background-color: yellow;
}
li:nth-child(even) { /*从前往后数偶数个*/
background-color:darkgray;
}
li:nth-last-child(odd) { /*从后往前数奇数个*/
background-color: yellow;
}
li:nth-last-child(even) { /*从后往前数偶数个*/
background-color:darkgray;
}
/*h2:nth-child(odd){ *//*计数的时候连同其同级元素计算在内*//*
background-color: yellowgreen;
}*/
h2:nth-of-type(odd) { /*只算h2标签*/
background-color: yellowgreen;
}
li:nth-child(4n+1) { /*变量必须是n 且形式为an+b*/;
background-color: red;
}
li:nth-child(4n+2) {
background-color: orange;
}
li:nth-child(4n+3) {
background-color: yellow;
}
li:nth-child(4n+4) {
background-color: green;
margin-bottom: 10px;
}
伪类选择器
:hover /*鼠标掠过*/
:active /*鼠标按下后*/
:focus /*获得焦点*/
:disabled /*属性disabled="disabled"时*/
:enabled /*属性disabled=“”时*/
:read-only /*属性readonly=“readonly”时*/
:checked {outline:2px solid green;} /*单选多选框选中后*/
::selection /*使被选中的文本成为红色 ::selection{color:red;} 只能向 ::selection 选择器应用少量 CSS 属性:color、background、cursor、outline*/
:invalid /*input:invalid{border:2px solid red;} 如果 input 元素中的值是非法的,设置样式为红色 */
:valid /*input:valid{border:2px solid green;} 如果 input 元素中的值是合法的,设置样式为绿色 */
:required /* input:required{background-color:yellow;} 如果 input 元素设置了 "required" 属性,设置其为黄色:*/
:optional /*选择器在表单元素是可选项时设置指定样式 optional 选择器只适用于表单元素: input, select 和 textarea*/
:in-range/out-of-range
/*
用来指定当元素的有效值被限定在一段范围之内的样式,例如:
<input type="text" min="0" max="100">
input[type='number']:in-range {
background-color: green;
}
input[type='number']:out-of-range {
background-color: red;
}
*/
兄弟选择器
div~p{ /*处在同一个父元素中,与div同级的下文所有p元素*/
background-color: yellow;
}