阅读目录
- CSS 组合选择符
- 后代选择器
- 子元素选择器
- 相邻兄弟选择器
- 后续兄弟选择器
- CSS 伪类 (Pseudo-classes)
- 伪类和CSS类
- CSS :first-child 伪类
- 匹配第一个 `
` 元素
- 匹配所有 `
` 元素中的第一个 ` ` 元素
- 匹配所有作为第一个子元素的 `
` 元素中的所有 ` ` 元素
- 匹配第一个 `
- CSS – :lang 伪类
- 所有CSS伪类/元素
- CSS3 :checked 选择器匹配每个选中的输入元素
- CSS3 :disabled 选择器匹配每个禁用的的元素
- CSS3 :empty 选择器择每个没有任何子级的元素
- CSS3 :enabled 选择器匹配每个启用的的元素
- :first-of-type 选择器匹配元素其父级是特定类型的第一个子元素
- :in-range 选择器用于标签的值在指定区间值时显示的样式
- :invalid 选择器用于在表单元素中的值是非法时设置指定样式
- :last-child 选择器用来匹配父元素中最后一个子元素
- :last-of-type 选择器匹配元素其父级是特定类型的最后一个子元素
- CSS 伪元素
- :first-line 伪元素
- :first-letter 伪元素
- 伪元素和CSS类
- 多个伪元素
- CSS – :before 伪元素
- CSS – :after 伪元素
- 所有CSS伪类/元素
CSS 组合选择符
CSS 组合选择符可以让你直观的明白选择器与选择器之间的关系。
组合选择符说明了两个选择器直接的关系。
CSS组合选择符包括各种简单选择符的组合方式。
在 CSS3 中包含了四种组合方式:
后代选择器（以空格 分隔)
子元素选择器（以大于 > 号分隔）
相邻兄弟选择器（以加号 + 分隔）
普通兄弟选择器（以波浪号 ～ 分隔）
后代选择器
后代选择器用于选取某元素的后代元素。
以下实例选取所有 <p> 元素插入到 <div> 元素中:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字竖直方向居中显示</title>
<style>
div p {
background-color:yellow;
}
</style>
</head>
<body>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
</body>
</html>
子元素选择器
与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素直接 / 一级子元素的元素。
以下实例选择了 <div> 元素中所有直接子元素 <p> ：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文字竖直方向居中显示</title>
<style>
div>p {
background-color:yellow;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div>
<h2>My name is Donald</h2>
<p>I live in Duckburg.</p>
</div>
<div>
<span>
<p>I will not be styled.</p>
</span>
</div>
<p>My best friend is Mickey.</p>
</body>
</html>
相邻兄弟选择器
相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。
以下实例选取了所有位于 <div> 元素后的第一个 <p> 元素:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>显示</title>
<style>
div+p {
background-color:yellow;
}
</style>
</head>
<body>
<h1>文章标题</h1>
<div>
<h2>DIV 内部标题</h2>
<p>DIV 内部段落。</p>
</div>
<p>DIV 之后的第一个 P 元素。</p>
<p>DIV 之后的第二个 P 元素。</p>
</body>
</html>
后续兄弟选择器
后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。
以下实例选取了所有 <div> 元素之后的所有相邻兄弟元素 <p> :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>显示</title>
<style>
div~p {
background-color:yellow;
}
</style>
</head>
<body>
<p>之前段落，不会添加背景颜色。</p>
<div>
<p>段落 1。 在 div 中。</p>
<p>段落 2。 在 div 中。</p>
</div>
<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>
</body>
</html>
CSS 伪类 (Pseudo-classes)
CSS 伪类是用来添加一些选择器的特殊效果。
由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式；
当状态改变时，它又会失去这个样式。由此可以看出，它的功能和 class 有些类似，但它是基于文档之外的抽象，所以叫伪类。
伪类的语法：
selector:pseudo-class {property:value;}
CSS类也可以使用伪类：
selector.class:pseudo-class {property:value;}
anchor 伪类
在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示：
a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */
注意：
(1) 在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
(2 ) 在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
(3) 伪类的名称不区分大小写。
伪类和CSS类
伪类可以与 CSS 类配合使用：
a.red:visited {color:#FF0000;}
<a class="red" href="mybj123">CSS 语法</a>
如果在上面的例子的链接已被访问，它会显示为红色。
CSS :first-child 伪类
您可以使用 :first-child 伪类来选择父元素的第一个子元素。
注意：在IE8的之前版本必须声明 <!DOCTYPE> ，这样 :first-child 才能生效。
匹配第一个 <p> 元素
在下面的例子中，选择器匹配作为任何元素的第一个子元素的 <p> 元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>显示</title>
<style>
p:first-child {
color:blue;
}
</style>
</head>
<body>
<p>This is some text.</p>
<p>This is some text.</p>
</body>
</html>
匹配所有 <p> 元素中的第一个 <i> 元素
在下面的例子中，选择相匹配的所有 <p> 元素的第一个 <i> 元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>显示</title>
<style>
p>i:first-child {
color: blue;
}
</style>
</head>
<body>
<p>我是一个 <i>强壮</i> 的男人. 我是一个 <i>强壮</i> 的男人.</p>
<p>我是一个 <i>强壮</i> 的男人. 我是一个 <i>强壮</i> 的男人.</p>
</body>
</html>
匹配所有作为第一个子元素的 <p> 元素中的所有 <i> 元素
在下面的例子中，选择器匹配所有作为元素的第一个子元素的 <p> 元素中的所有 <i> 元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>显示</title>
<style>
p:first-child i {
color:blue;
}
</style>
</head>
<body>
<p>我是一个 <i>强壮</i> 的男人. 我是一个 <i>强壮</i> 的男人.</p>
<p>我是一个 <i>强壮</i> 的男人. 我是一个 <i>强壮</i> 的男人.</p>
</body>
</html>
CSS – :lang 伪类
:lang 伪类使你有能力为不同的语言定义特殊的规则。
注意：IE8必须声明 <!DOCTYPE> 才能支持 :lang 伪类。
在下面的例子中，:lang 类为属性值为 no 的 q 元素定义引号的类型：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>显示</title>
<style>
q:lang(no) {
quotes: "~""~";
}
</style>
</head>
<body>
<p>一些文字 <q lang="no">段落中的引用</q> 一些文字。</p>
</body>
</html>
所有CSS伪类/元素
| 选择器 | 示例 | 示例说明 |
|---|---|---|
| :checked | input:checked | 选择所有选中的表单元素 |
| :disabled | input:disabled | 选择所有禁用的表单元素 |
| :empty | p:empty | 选择所有没有子元素的p元素 |
| :enabled | input:enabled | 选择所有启用的表单元素 |
| :first-of-type | p:first-of-type | 选择的每个 p 元素是其父元素的第一个 p 元素 |
| :in-range | input:in-range | 选择元素指定范围内的值 |
| :invalid | input:invalid | 选择所有无效的元素 |
| :last-child | p:last-child | 选择所有p元素的最后一个子元素 |
| :last-of-type | p:last-of-type | 选择每个p元素是其母元素的最后一个p元素 |
| :not(selector) | :not(p) | 选择所有p以外的元素 |
| :nth-child(n) | p:nth-child(2) | 选择所有 p 元素的父元素的第二个子元素 |
| :nth-last-child(n) | p:nth-last-child(2) | 选择所有p元素倒数的第二个子元素 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 选择所有p元素倒数的第二个为p的子元素 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择所有p元素第二个为p的子元素 |
| :only-of-type | p:only-of-type | 选择所有仅有一个子元素为p的元素 |
| :only-child | p:only-child | 选择所有仅有一个子元素的p元素 |
| :optional | input:optional | 选择没有”required”的元素属性 |
| :out-of-range | input:out-of-range | 选择指定范围以外的值的元素属性 |
| :read-only | input:read-only | 选择只读属性的元素属性 |
| :read-write | input:read-write | 选择没有只读属性的元素属性 |
| :required | input:required | 选择有”required”属性指定的元素属性 |
| :root | root | 选择文档的根元素 |
| :target | #news:target | 选择当前活动#news元素(点击URL包含锚的名字) |
| :valid | input:valid | 选择所有有效值的属性 |
| :link | a:link | 选择所有未访问链接 |
| :visited | a:visited | 选择所有访问过的链接 |
| :active | a:active | 选择正在活动链接 |
| :hover | a:hover | 把鼠标放在链接上的状态 |
| :focus | input:focus | 选择元素输入后具有焦点 |
| :first-letter | p:first-letter | 选择每个<p> 元素的第一个字母 |
| :first-line | p:first-line | 选择每个<p> 元素的第一行 |
| :first-child | p:first-child | 选择器匹配属于任意元素的第一个子元素的 <p> 元素 |
| :before | p:before | 在每个<p>元素之前插入内容 |
| :after | p:after | 在每个<p>元素之后插入内容 |
| :lang(language) | p:lang(it) | 为<p>元素的lang属性选择一个开始值 |
CSS3 :checked 选择器匹配每个选中的输入元素
:checked 选择器匹配每个选中的输入元素（仅适用于单选按钮或复选框）。
为所有选中的输入元素设置背景颜色：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>显示</title>
<style>
input:checked {
height: 50px;
width: 50px;
}
</style>
</head>
<body>
<form action="">
<input type="radio" checked="checked" value="male" name="gender" /> Male<br>
<input type="radio" value="female" name="gender" /> Female<br>
<input type="checkbox" checked="checked" value="Bike" /> I have a bike<br>
<input type="checkbox" value="Car" /> I have a car
</form>
</body>
</html>
CSS3 :disabled 选择器匹配每个禁用的的元素
:disabled 选择器匹配每个禁用的的元素（主要用于表单元素）。
设置所有 type=”text” 的禁用的输入元素的背景颜色：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>显示</title>
<style>
input[type="text"]:enabled {
background: #ffff00;
}
input[type="text"]:disabled {
background: #dddddd;
}
</style>
</head>
<body>
<form action="">
用户名: <input type="text" value="请输入用户名" /><br>
密码: <input type="text" value="请输入密码" /><br>
手机: <input type="text" disabled="disabled" value="请输入手机号" /><br>
</form>
</body>
</html>
CSS3 :empty 选择器择每个没有任何子级的元素
:empty 选择器选择每个没有任何子级的元素（包括文本节点）。
指定空的 p 元素的背景色：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>显示</title>
<style>
p:empty{
width:100px;
height:20px;
background:#ff0000;
}
</style>
</head>
<body>
<p></p>
<p>一个段落</p>
<p>另一个段落</p>
</body>
</html>
CSS3 :enabled 选择器匹配每个启用的的元素
:enabled 选择器匹配每个启用的的元素（主要用于表单元素）。
设置所有 type=”text” 的启用的输入元素的背景颜色：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>显示</title>
<style>
input[type="text"]:enabled {
background:#ffff00;
}
</style>
</head>
<body>
<form action="">
用户名: <input type="text" value="请输入用户名" /><br>
密码: <input type="text" value="请输入密码" /><br>
手机: <input type="text" disabled="disabled" value="请输入手机号" /><br>
</form>
</body>
</html>
:first-of-type 选择器匹配元素其父级是特定类型的第一个子元素
提示: 和 :nth-of-type(1) 是一个意思。
选择的 p 元素是其父元素的第一个 p 元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>显示</title>
<style>
p:first-of-type{
background:#ff0000;
}
</style>
</head>
<body>
<p>一个段落</p>
<p>另一个段落</p>
</body>
</html>
:in-range 选择器用于标签的值在指定区间值时显示的样式
注意： :in-range 选择器只作用于能指定区间值的元素，例如 input 元素中的 min 和 max 属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>显示</title>
<style>
input:in-range
{
border:2px solid yellow;
}
</style>
</head>
<body>
<h3>:in-range 选择器实例演示。</h3>
<input type="number" min="5" max="10" value="7" />
<p>在input中输入一个值 (小于 5 或者 大于 10), 查看样式的变化。</p>
</body>
</html>
:invalid 选择器用于在表单元素中的值是非法时设置指定样式
注意： :invalid 选择器只作用于能指定区间值的元素，例如 input 元素中的 min 和 max 属性，及正确的 email 字段, 合法的数字字段等。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob)</title>
<style>
input:invalid
{
border:2px solid red;
}
</style>
</head>
<body>
<h3> :invalid 选择器实例演示。</h3>
<input type="email" value="supportEmail" />
<p>请输入合法 e-mail 地址，查看样式变化。</p>
</body>
</html>
:last-child 选择器用来匹配父元素中最后一个子元素
:last-child 选择器用来匹配父元素中最后一个子元素。
提示: p:last-child 等同于 p:nth-last-child(1)。
指定父元素中最后一个 p 元素的背景色：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob)</title>
<style>
p:last-child
{
background:#ff0000;
}
</style>
</head>
<body>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
</body>
</html>
:last-of-type 选择器匹配元素其父级是特定类型的最后一个子元素
提示: 和 :nth-last-of-type(1) 是一个意思
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob)</title>
<style>
p:last-of-type
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
</body>
</html>
CSS 伪元素
CSS伪元素是用来添加一些选择器的特殊效果。
伪元素的语法：
selector:pseudo-element {property:value;}
CSS类也可以使用伪元素：
selector.class:pseudo-element {property:value;}
:first-line 伪元素
:first-line 伪元素用于向文本的首行设置特殊样式。
在下面的例子中，浏览器会根据 :first-line 伪元素中的样式对 p 元素的第一行文本进行格式化：
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
注意： :first-line 伪元素只能用于块级元素。
注意： 下面的属性可应用于 :first-line 伪元素：
font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
:first-letter 伪元素
:first-letter 伪元素用于向文本的首字母设置特殊样式：
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
注意： :first-letter 伪元素只能用于块级元素。
注意： 下面的属性可应用于 :first-letter 伪元素：
font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (only if “float” is “none”)
text-transform
line-height
float
clear
伪元素和CSS类
伪元素可以结合CSS类：
p.article:first-letter {color:#ff0000;}
<p class="article">文章段落</p>
上面的例子会使所有 class 为 article 的段落的首字母变为红色。
多个伪元素
可以结合多个伪元素来使用。
在下面的例子中，段落的第一个字母将显示为红色，其字体大小为 xx-large。第一行中的其余文本将为蓝色，并以小型大写字母显示。
段落中的其余文本将以默认字体大小和颜色来显示：
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}
CSS – :before 伪元素
:before 伪元素可以在元素的内容前面插入新内容。
下面的例子在每个 <h1> 元素前面插入wgchen ：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob)</title>
<style>
p:before
{
content:"Read this -";
}
</style>
</head>
<body>
<p>My name is Donald</p>
<p>I live in Ducksburg</p>
<p><b>注意:</b> :before 作用于 IE8,DOCTYPE 必须已经声明.</p>
</body>
</html>
CSS – :after 伪元素
:after 伪元素可以在元素的内容之后插入新内容。
下面的例子在每个 <h1> 元素后面插入 wgchen：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob)</title>
<style>
p:after
{
content:"- 注意我";
}
</style>
</head>
<body>
<p>我的名字是 Donald</p>
<p>我住在 Ducksburg</p>
<p><b>注意：</b> :after在IE8中运行，必须声明 !DOCTYPE </p>
</body>
</html>
所有CSS伪类/元素
| 选择器 | 示例 | 示例说明 |
|---|---|---|
| :link | a:link | 选择所有未访问链接 |
| :visited | a:visited | 选择所有访问过的链接 |
| :active | a:active | 选择正在活动链接 |
| :hover | a:hover | 把鼠标放在链接上的状态 |
| :focus | input:focus | 选择元素输入后具有焦点 |
| :first-letter | p:first-letter | 选择每个<p> 元素的第一个字母 |
| :first-line | p:first-line | 选择每个<p> 元素的第一行 |
| :first-child | p:first-child | 选择器匹配属于任意元素的第一个子元素的 <p> 元素 |
| :before | p:before | 在每个<p>元素之前插入内容 |
| :after | p:after | 在每个<p>元素之后插入内容 |
| :lang(language) | p:lang(it) | 为<p>元素的lang属性选择一个开始值 |
更多推荐
css基础 CSS 组合选择符、CSS 伪类、CSS 伪元素
发布评论