# 选择器
# 选择器
样式是做用在元素标签上的，通过本章将可以随意查找元素来应用样式。
所有用于选择特定元素的选择符又分三种。
上下文选择符。基于祖先或同胞元素选择一个元素。
ID和类选择符。基于id和class属性的值（你自己设定）选择元素。
属性选择符。基于属性的有无和特征选择元素。
1.上下文选择符
上下文选择符的格式如下：
标签1 标签2 {声明}
其中，标签2就是我们想要选择的目标，而且只有在标签1是其祖先元素（不一定是父元素）的情况下才会被选中。
上下文选择符，严格来讲（也就是CSS规范里），叫后代组合式选择符（descendant combinator selector），就是一组以空格分隔的标签名。用于选择作为指定祖先元素后代的标签。
p em {color:green;}
特殊的上下文选择符
子选择符>
标签1 > 标签2 标签2必须是标签1的子元素，或者反过来说，标签1必须是标签2的父元素。与常规的上下文选择符不同，这个选择符中的标签1不能是标签2的父元素之外的其他祖先元素。
section > h2 {font-style:italic;}
紧邻同胞选择符+
标签1 + 标签2
标签2必须紧跟在其同胞标签1的后面。
h2 + p {font-variant:small-caps;}
一般同胞选择符~
标签1 ~ 标签2
标签2必须跟（不一定紧跟）在其同胞标签1后面。
h2 ~ a {color:red;}
通用选择符*
通用选择符*（常被称为星号选择符）是一个通配符，它匹配任何元素，因此下面这条规则
*{color:green;}
p * {color:red;}
section * a {font-size:1.3em;}
任何是section孙子元素，而非子元素的a标签都会被选中。至于a的父元素是什么，没有关系。
# 基本选择器
| 选择器 | 示例 | 描述 |
|---|---|---|
| .class | .intro | 选择 class="intro" 的所有元素 |
| #id | #firstname | 选择 id="firstname" 的所有元素 |
| * | * | 选择所有元素 |
| element | p | 选择所有P元素 |
| element,element | div,p | 选择所有div元素和所有div元素 |
| element element | div p | 选择div元素内部的所有p元素 |
| element>element | div>p | 选择父元素为div元素的所有p元素 |
| element+element | div+p | 选择紧接在div元素之后的所有p元素 |
# 标签选择
使用 * 可为所有元素设置样式。
* {
text-decoration: none;
color: #6c757d;
}
2
3
4
根据标签为元素设置样式
h1 {
color: red;
}
2
3
同时设置多个元素组合
h1,h2 {
color: red;
}
2
3
元素在多个组件中存在
h1,h2 {
color: red;
}
h1,h3{
background: #dcdcdc;
}
2
3
4
5
6
# 类选择器
ID和类选择符
只要你在HTML标记中为元素添加了id和class属性，就可以在CSS选择符中使用ID和类名，直接选中文档中特定的区域。
类属性就是HTML元素的class属性，body标签中包含的任何HTML元素都可以添加这个属性。
类选择器是为一类状态声明样式规则，下面是把文本居中定义为类样式。
类选择符
.类名
注意，类选择符前面是点（.），紧跟着类名，两者之间没有空格。
类选择符就是在HTML类名前面加一个点（英文句号）。
.specialtext {font-style:italic;}
标签带类选择符
p.specialtext {color:red;} 只选择带specialtext类的段落。
p {font-family:helvetica, sans-serif; font-size:1.2em;}
.specialtext {font-style:italic;}
p.specialtext {color:red;}
p.specialtext span {font-weight:bold;}
2
3
4
多类选择符
可以给元素添加多个类，比如：
<p class="specialtext featured">Here the span tag <span>may or may not</span> be styled.</p>
多个类名，如这里的specialtext和featured，放在同一对引号里，用空格分隔。实际上，更准确的说法，就应该是HTML的class属性可以有多个空格分隔的值。要选择同时存在这两个类名的元素，可以这样写：
.specialtext.featured {font-size:120%;}
注意，CSS选择符的两个类名之间没有空格，因为我们只想选择同时具有这两个类名的那个元素。如果你加了空格，那就变成了“祖先/后代”关系的上下文选择符了。
.text-center {
text-align: center;
}
...
<h1 class="text-center">houdunren.com</h1>
<h2 class="text-center">hdcms.com</h2>
2
3
4
5
6
7
将类选择器指定为具体标签
.help-block {
background: red;
}
span.help-block {
font-size: 12px;
color: #aaa;
background: none;
}
...
<span class="help-block">感谢访问后盾人</span>
2
3
4
5
6
7
8
9
10
# ID选择器
<p id="specialtext">This is the special text.</p>
那么，相应的ID选择符就是这样的：
#specialtext {CSS样式声明} 或者这样的：
p#specialtext {CSS样式声明}
除此之外，ID与类的用法都一样，而且我们前面讨论的关于类选择符的（几乎）一切，都适应于ID选择符。那两者到底有什么区别呢？
用于页内导航的ID ID也可以用在页内导航链接中。下面就是一个链接，其目标是同一页的另一个位置。
<a href="#bio">Biography</a>
看到href属性值开头的#了吗？它表示这个链接的目标在当前页面中，因而不会触发浏览器加载页面（如果没有#，浏览器就会尝试加载bio目录下的默认页面了）。
看到href属性值开头的#了吗？它表示这个
为有 id 属性的元素设置样式
#container {
background: red;
}
...
<h1 id="container">houdunren.com</h1>
2
3
4
5
6
文档中ID应该是唯一的，虽然为多个元素设置同一个ID也可以产生样式效果，但这是不符合规范的。 建议优先使用类选择器
什么时候用ID，什么时候用类
乍一看，类和ID都是用于在标记中标识特定标签的HTML属性，似乎完全是可以相互取代嘛。然而，它们的用途实际上大不相同。
什么时候使用ID
ID的用途是在页面中唯一地标识一个元素。正因为如此，同一个页面中的每一个ID属性，都必须有独一无二的值（名字）。好吧，换一个角度讲，每个ID名在页面中都只能用一次。
也可以使用ID把JavaScript与某个标签关联起来（比如，当用户鼠标移动到一个链接上面时，运行激活动画的脚本）。ID值的唯一性对JavaScript尤其重要，否则就会导致JavaScript行为异常。 在这里，页面中就不能再有其他元素使用mainmenu作为ID名了。为了标识页面的某一部分，比如主导航菜单，可以为nav（navigation，导航）添加一个ID属性，并让它包含菜单元素。
<nav id="mainmenu">
<ul>
<li><a href="#">Yin</a></li>
<li><a href="#">Yang</a></li>
</ul>
</nav>
2
3
4
5
6
有了用唯一ID标识的菜单之后，就可以使用上下文选择符来选择其中包含的各种类型的标签了。比如，可以将这个菜单中的链接设置为橙色，同时又不会影响页面中的其他链接：
#mainmenu a {color:orange;}
利用唯一ID，可以在CSS中方便地定位到这个元素，以及它的子元素。到了后面读者会发现，我经常会给页面中每个顶级区域都添加一个ID，从而得到非常明确的上下文，以便编写CSS时只选择嵌套在相应区域内的标签。
差不多了吧，你已经理解了ID表示的是页面中一个唯一的HTML元素，下面就来聊一聊什么时候使用类吧。
什么时候使用类
类的目的是为了标识一组具有相同特征的元素，比如本章前面例子中的那个specialtext类。
在下面这个孩子名字的列表中，我想把男孩的名字变成蓝色，把女孩的名字变成粉红色。首先，我用类在标记中标识出了性别。
<nav>
<ul>
<li class="boy"><a href="#">Alan</a></li>
<li class="boy"><a href="#">Andrew</a></li>
<li class="girl"><a href="#">Angela</a></li>
<li class="boy"><a href="#">Angus</a></li>
<li class="girl"><a href="#">Anne</a></li>
<li class="girl"><a href="#">Annette</a></li>
</ul>
</nav>
2
3
4
5
6
7
8
9
10
然后，再用CSS为链接应用颜色：
.boy a {color:#6CF;}/*蓝色*/
.girl a {color:#F9C;}/*粉红色*/
2
第一条规则选择所有类名为boy的祖先元素包含的a元素，第二条规则选择所有类名为girl的祖先元素包含的a元素。这两种情况下的祖先元素，都是作为相应链接父元素的li元素。
不要乱用类 要避免Web开发专家Jeffrey Zeldman说的“类泛滥——标记中的麻疹”出现。什么意思呢？就是说你不要像使用ID一样，每个类都指定一个不同的类名，然后再为每个类编写规则。如果你确实有这种随意使用类的习惯，那说明你可能像大多数对CSS充满激情的初学者一样，还不了解继承和上下文选择符的作用。于是，你可能会给每个标签都重复写同样的样式（比如为页面中很多标签分别指定相同的字体）。实际上，继承和上下文选择符能让不同的标签共享样式，从而降低你需要编写和维护的CSS量。
ID和类的小结
ID的用途是在页面标记中唯一地标识一个特定的元素。它能够为我们编写CSS规则提供必要的上下文，排除无关的标记，而只选择该上下文中的标签。
相对来说，类是可以应用给任意多个页面中的任意多个HTML元素的公共标识符，以便我们为这些元素应用相同的CSS样式。而且，使用类也让为不同标签名的元素应用相同的样式成为可能。
# 结构选择器
| 选择器 | 示例 | 描述 |
|---|---|---|
| element element | div p | 选择div元素内部的所有p元素（里面的） |
| element>element | div>p | 选择父元素为div元素的所有p元素 （仅是父子关系） |
| element+element | div+p | 选择紧接在div元素之后的所有p元素（紧挨着的兄弟） |
| element1~element2 | p~ul | 选择前面有p元素的每个ul元素（同级的兄弟） |
# 后代选择器
HTML中元素是以父子级、兄弟关系存在的。后代选择器指元素后的元素（不只是子元素，是后代元素）。
main article h2,main h1 {
color: green;
}
...
<main>
<article>
<h2 name="houdunren">houdunren.com</h2>
<aside>
<h2>houdunwang.com</h2>
</aside>
</article>
<h2 name="hdcms.com">hdcms.com</h2>
<h1>后盾人</h1>
</main>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 子元素选择
子元素选择器中选择子元素，不包括孙级及以下元素。
main article>h2 {
color: green;
}
...
<main>
<article>
<h2 name="houdunren">houdunren.com</h2>
<aside>
<h2>houdunwang.com</h2>
</aside>
</article>
<h2 name="hdcms.com">hdcms.com</h2>
<h1>后盾人</h1>
</main>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 紧邻兄弟元素
用于选择紧挨着的同级兄弟元素。
main article+h2 {
color: green;
}
...
<main>
<article>
<h2 name="houdunren">houdunren.com</h2>
<aside>
<h2>houdunwang.com</h2>
</aside>
</article>
<h2 name="hdcms.com">hdcms.com</h2>
<h1>后盾人</h1>
</main>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 后面兄弟元素
用于选择后面的所有兄弟元素。
main article~* {
color: green;
}
...
<main>
<article>
<h2 name="houdunren">houdunren.com</h2>
<aside>
<h2>houdunwang.com</h2>
</aside>
</article>
<h2 name="hdcms.com">hdcms.com</h2>
<h1>后盾人</h1>
</main>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 属性选择器
有一种选择元素的方法是属性选择符，它基于HTML标签的属性选择元素。
属性名选择符
标签名[属性名] 选择任何带有属性名的标签名。
比如，下面的CSS
img[title] {border:2px solid blue;}
属性值选择符
标签名[属性名="属性值"] 在HTML5中，属性值的引号可加可不加，在此为了清楚起见，我们加了。 选择任何带有值为属性值的属性名的标签名。
这个选择符可以让你控制到属性的值是什么。例如，这条规则
img[title="red flower"] {border:4px solid green;}
在图片的title属性值为red flower的情况下，才会为图片添加边框。换句话说，下面这个img元素就会被加上边框。
<img src="images/red_flower.jpg" title="red flower" alt="red flower" />
属性选择符的小结
基于属性名和属性的其他特征选择元素，为我们提供了另一种区别对待相同标签的机会。只要事先规划好，就可以编写出适合属性选择符的标记来。
根据属性来为元素设置样式也是常用的场景。
| 选择器 | 示例 | 描述 |
|---|---|---|
| [attribute] | [target] | 选择带有 target 属性所有元素 |
| [attribute=value] | [target=_blank] | 选择 target 属性包含单词 "_blank" 的所有元素 |
| [attribute~=value] | [title~=flower] | 选择 title 属性包含单词 "flower" 的所有元素 |
| [attribute|=value] | [lang|=en] | 选择 lang 属性值以 "en" 开头的所有元素。 |
| [attribute*=value] | a[src*="abc"] | 选择其 src 属性中包含 "abc" 子串的每个 元素 |
| [attribute^=value] | a[src^="https"] | 选择其 src 属性值以 "https" 开头的每个 元素 |
| [attribute$=value] | a[src$=".pdf"] | 选择其 src 属性以 ".pdf" 结尾的所有 元素 |
为具有 class 属性的 h1标签设置样式
h1[class] {
color: red;
}
...
<h1 class="container">houdunren.com</h1>
2
3
4
5
6
约束多个属性
h1[class][id] {
color: red;
}
...
<h1 class="container" id >houdunren.com</h1>
2
3
4
5
6
具体属性值设置样式
a[href="https://www.houdunren.com"] {
color: green;
}
...
<a href="https://www.houdunren.com">后盾人</a>
<a href="">HDCMS</a>
2
3
4
5
6
7
^ 以指定值开头的元素
h2[name^="hdcms"] {
color: red;
}
...
<h2 name="houdunren">houdunren.com</h2>
<h2 name="hdcms.com">hdcms.com</h2>
2
3
4
5
6
7
$ 以指定值结尾的元素
h2[name$="com"] {
color: red;
}
...
<h2 name="houdunren">houdunren.com</h2>
<h2 name="hdcms.com">hdcms.com</h2>
2
3
4
5
6
* 属性内部任何位置出现值的元素
h2[name*="houdunren"] {
color: red;
}
...
<h2 name="houdunren">houdunren.com</h2>
<h2 name="houdunren.com">hdcms.com</h2>
2
3
4
5
6
7
~ 属性值中包含指定词汇的元素
h2[name~="houdunren"] {
color: red;
}
...
<h2 name="houdunren">houdunren.com</h2>
<h2 name="houdunren web">hdcms.com</h2>
2
3
4
5
6
7
| 以指定值开头或以属性连接破折号的元素
h2[name|="houdunren"] {
color: red;
}
...
<h2 name="houdunren">houdunren.com</h2>
<h2 name="houdunren-web">hdcms.com</h2>
2
3
4
5
6
7
# 伪类选择器
伪类这个叫法源自它们与类相似，但实际上并没有类会附加到标记中的标签上。伪类分两种。
UI（User Interface，用户界面）伪类会在HTML元素处于某个状态时（比如鼠标指针位于链接上），为该元素应用CSS样式。
结构化伪类会在标记中存在某种结构上的关系时（如某个元素是一组元素中的第一个或最后一个），为相应元素应用CSS样式。
链接伪类
针对链接的伪类一共有4个，因为链接始终会处于如下4种状态之一。
Link。此时，链接就在那儿等着用户点击。
Visited。用户此前点击过这个链接。
Hover。鼠标指针正悬停在链接上。
Active。链接正在被点击（鼠标在元素上按下，还没有释放）。
2
3
4
以下就是这些状态对应的4个伪类选择符（使用了a选择符和一些示例声明）：
a:link {color:black;}
a:visited {color:gray;}
a:hover {text-decoration:none;}
a:active {color:red;}
2
3
4
选择符中与众不同的:（冒号）好像在向我们宣示：“我是一个伪类！”
一个冒号（:）表示伪类，两个冒号（::）表示CSS3新增的伪元素。尽管浏览器目前都支持对CSS 1和CSS 2的伪元素使用一个冒号，但希望你能习惯于用双冒号代替单冒号，因为这些单冒号的伪元素最终可能都会被淘汰掉。
:focus伪类
e:focus
在这个以及后续的例子中，e表示任何元素，如p、h1、section，等等。 表单中的文本字段在用户单击它时会获得焦点，然后用户才能在其中输入字符。下面的规则
input:focus {border:1px solid blue;}
会在光标位于input字段中时，为该字段添加一个蓝色边框。这样可以让用户明确地知道输入的字符会出现在哪里。
:target伪类
e:target
如果用户点击一个指向页面中其他元素的链接，则那个元素就是目标（target），可以用:target伪类选中它。
对于下面这个链接
<a href="#more_info">More Information</a>
位于页面其他地方、ID为more_info的那个元素就是目标。该元素可能是这样的：
<h2 id="more_info">This is the information you are looking for.</h2>
那么，如下CSS规则
#more_info:target {background:#eee;}
会在用户单击链接转向ID为more_info的元素时，为该元素添加浅灰色背景。
维基百科在其引证中大量使用了:target伪类。维基百科的引证链接就是正文里那些不起眼的数字链接。引证本身则位于长长的页面的最下方。如果没有:target应用的突出显示，很难知道你点击的链接对应着一大堆引证中的哪一个。
结构化伪类
结构化伪类可以根据标记的结构应用样式，比如根据某元素的父元素或前面的同胞元素是什么。
1.:first-child和:last-child
e:first-child
e:last-child
2
:first-child代表一组同胞元素中的第一个元素，而:last-child则代表最后一个。比如，把下面的规则
ol.results li:first-child {color:blue;}
应用给以下标记：
<ol class="results">
<li>My Fast Pony</li>
<li>Steady Trotter</li>
<li>Slow Ol' Nag</li>
</ol>
2
3
4
5
文本“My Fast Pony”就会变成蓝色。如果选择符改成这样：
ol.results li:last-child {color:red;}
那变成红色的文本就是“Slow Ol' Nag”了。
2.:nth-child
e:nth-child(n)
e表示元素名，n表示一个数值（也可以使用odd或even）。 例如，
li:nth-child(3)
会选择一组列表项中的每个第三项。
:nth-child伪类最常用于提高表格的可读性，比如，对表格的所有行交替应用不同颜色。
伪元素
顾名思义，伪元素就是你的文档中若有实无的元素。以下我们介绍几个最有用的伪元素
- ::first-letter伪元素
e::first-letter
比如，以下CSS规则：
p::first-letter {font-size:300%;}
可以得到的段落首字符放大的效果。
如果不用伪元素创建这个首字符放大效果，必须手工给该字母加上标签，然后再为该标签应用样式。而伪元素实际上是替我们添加了无形的标签。
- ::first-line伪元素
e::first-line
可以选中文本段落（一般情况下是段落）的第一行。例如
p::first-line {font-variant:small-caps;}
可以把第一行以小型大写字母显示，
用::first-line伪元素把第一行变成了小型大写字母。注意，::first-line伪元素的长度会随浏览器窗口大小的变化而改变。
3.::before和::after伪元素
以下两个伪元素
e::before
e::after
2
可用于在特定元素前面或后面添加特殊内容。
以下标记
<p class="age">25</p>
和如下样式
p.age::before {content:"Age: ";}
p.age::after {content:" years.";}
2
注意，每个content属性值中都包含了空格，以便输出结果中有适当的空距。 能得到以下结果：
Age: 25 years.
如果标签中的内容是通过数据库查询生成的结果，那么用这种技巧再合适不过了。因为所有结果都是数字，使用这两个伪元素可以在把数字呈现给用户时，加上说明性文字。
这个例子展示了对::before和::after伪元素很基本又很实用的应用。
为元素的不同状态或不确定存在的元素设置样式规则。
| 状态 | 示例 | 说明 |
|---|---|---|
| :link | a:link | 选择所有未被访问的链接 |
| :visited | a:visited | 选择所有已被访问的链接 |
| :hover | a:hover | 鼠标移动到元素上时 |
| :active | a:active | 点击正在发生时 |
| :focus | input::focus | 选择获得焦点的 input 元素 |
| :root | :root | 选择文档的根元素即html |
| :empty | p:empty | 选择没有子元素的每个元素（包括文本节点） |
| :first-child | p:first-child | 选择属于父元素的第一个子元素的每个元素 |
| :last-child | p:last-child | 选择属于其父元素最后一个子元素每个元素 |
| :first-of-type | p:first-of-type | 选择属于其父元素的首个元素的每个元素 |
| :last-of-type | p:last-of-type | 选择属于其父元素的最后元素的每个元素 |
| :only-of-type | p:only-of-type | 选择属于其父元素唯一的元素的每个元素 |
| :only-child | p:only-child | 选择属于其父元素的唯一子元素的每个元素 |
| :nth-child(n) | p:nth-child(2) | 选择属于其父元素的第二个子元素的每个元素 |
| :nth-child(odd) | p:nth-child(odd) | 选择属于其父元素的奇数元素 |
| :nth-child(even) | p:nth-child(even) | 选择属于其父元素的偶数元素 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择属于其父元素第二个元素的每个元素 |
| :nth-last-child(n) | p:nth-last-child(2) | 同上，从最后一个子元素开始计数 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 同上，但是从最后一个子元素开始计数 |
| :not(selector) | :not(p) | 选择非元素的每个元素 |
# :超链接伪类
定义链接的不同状态
a:link {
color: red
}
a:visited {
color: green
}
a:hover {
color: blue
}
a:active {
color: yellow
}
...
<a href="https://www.houdunren.com">后盾人</a>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
不只是链接可以使用伪类，其他元素也可以使用。下面是对表单的点击与获取焦点状态的样式设置。
input:focus {
background: green;
}
input:hover {
background: blue;
}
input:active {
background: yellow;
}
...
<input type="text">
2
3
4
5
6
7
8
9
10
11
12
13
14
# : target
用于控制具有锚点目标元素的样式
div {
height: 900px;
}
div:target {
color: red;
}
...
<a href="#hdcms">hdcms</a>
<div></div>
<div id="hdcms">
hdcms内容管理系统
</div>
2
3
4
5
6
7
8
9
10
11
12
13
14
# :root
根元素选择伪类即选择html
:root {
font-size: 100px;
}
2
3
# :empty
没有内容和空白的元素。下面第一个p标签会产生样式，第二个不会因为有空白内容
:empty {
border: solid 2px red;
}
...
<p></p>
<p> </p>
2
3
4
5
6
7
# 结构伪类
下面来通过结构伪类选择器选择树状结构中的标签元素。
# :first-child
选择元素中span 标签并且是第一个。
article span:first-child {
color: red;
}
...
<article>
<span>houdunren.com</span>
<aside>
<span>houdunwang.com</span>
<span>hdcms.com</span>
</aside>
</article>
2
3
4
5
6
7
8
9
10
11
12
# :first-of-type
选择类型是span 的第一个元素
article span:first-of-type {
color: red;
}
...
<article>
<span>houdunren.com</span>
<aside>
<strong>hdcms.com</strong>
<span>houdunwang.com</span>
</aside>
</article>
2
3
4
5
6
7
8
9
10
11
12
# :last-child
选择元素中span 标签并且是最后一个。
article span:last-child {
color: red;
}
...
<article>
<span>houdunren.com</span>
<aside>
<strong>hdcms.com</strong>
<span>houdunwang.com</span>
</aside>
<span>hdphp.com</span>
</article>
2
3
4
5
6
7
8
9
10
11
12
13
# :last-of-type
选择类型为span 的最后一个元素
article span:last-of-type {
color: red;
}
...
<article>
<span>houdunren.com</span>
<aside>
<span>houdunwang.com</span>
<strong>hdcms.com</strong>
</aside>
<span>hdphp.com</span>
</article>
2
3
4
5
6
7
8
9
10
11
12
13
# :only-child
选择是唯一子元素的span 标签
article span:only-child {
color: red;
}
...
<article>
<span>houdunren.com</span>
<aside>
<span>houdunwang.com</span>
</aside>
</article>
2
3
4
5
6
7
8
9
10
11
# :only-of-type
选择同级中类型是span 的唯一子元素
article span:only-of-type {
color: red;
}
...
<article>
<span>houdunren.com</span>
<aside>
<span>houdunwang.com</span>
<span>hdcms.com</span>
</aside>
</article>
2
3
4
5
6
7
8
9
10
11
12
# :nth-child(n)
选择第二个元素并且是span标签的
article span:nth-child(2) {
color: red;
}
...
<article>
<span>houdunren.com</span>
<aside>
<span>houdunwang.com</span>
<span>hdcms.com</span>
</aside>
<span>hdphp.com</span>
</article>
2
3
4
5
6
7
8
9
10
11
12
13
# :nth-of-type(n)
选择第二个span 元素，不管中间的其他元素
article span:nth-of-child(2) {
color: red;
}
...
<article>
<span>houdunren.com</span>
<aside>
<span>houdunwang.com</span>
<span>hdcms.com</span>
</aside>
<span>hdphp.com</span>
</article>
2
3
4
5
6
7
8
9
10
11
12
13
# 计算数量
n为0/1/2/3... ，下面是隔列变色
table tr>td:nth-child(2n+1) {
background: green;
color: white;
}
...
<table border="1">
<tr>
<td>houdunren.com</td>
<td>hdcms.com</td>
<td>后盾人</td>
<td>houdunwang.com</td>
<td>hdcms</td>
</tr>
</table>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
从第三个开始设置样式
table tr>td:nth-child(n+3) {
background: rgb(128, 35, 2);
color: white;
}
2
3
4
设置前三个元素
table tr>td:nth-child(-n+3) {
background: rgb(128, 35, 2);
color: white;
}
2
3
4
# 奇数元素
选择奇数单元格
table tr>td:nth-child(odd) {
background: green;
color: white;
}
...
<table border="1">
<tr>
<td>houdunren.com</td>
<td>hdcms.com</td>
<td>后盾人</td>
<td>houdunwang.com</td>
<td>hdcms</td>
</tr>
</table>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 偶数元素
选择偶数单元格
table tr>td:nth-child(even) {
background: green;
color: white;
}
...
<table border="1">
<tr>
<td>houdunren.com</td>
<td>hdcms.com</td>
<td>后盾人</td>
<td>houdunwang.com</td>
<td>hdcms</td>
</tr>
</table>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# :nth-last-child(n)
从最后一个元素开始获取
table tr>td:nth-last-child(2n+1){
background: green;
color: white;
}
...
<table border="1">
<tr>
<td>houdunren.com</td>
<td>hdcms.com</td>
<td>后盾人</td>
<td>houdunwang.com</td>
<td>hdcms</td>
</tr>
</table>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
取最后两个元素
main>ul li:nth-last-child(-n+2) {
color: red;
}
2
3
# :nth-last-of-type(n)
从最后一个元素开始选择span 标签 。
article span:nth-last-of-type(1) {
background: red;
color: white;
}
...
<article>
<aside>
<span>houdunren.com</span>
<span>houdunwang.com</span>
<strong>hdcms.com</strong>
</aside>
<span>hdphp.com</span>
</article>
2
3
4
5
6
7
8
9
10
11
12
13
14
# :not(selector)
排除第一个li元素
ul li:not(:nth-child(1)) {
background: red;
}
...
<ul>
<li>houdunren.com</li>
<li>hdcms.com</li>
<li>后盾人</li>
</ul>
2
3
4
5
6
7
8
9
10
# 表单伪类
| 选择器 | 示例 | 说明 |
|---|---|---|
| :enabled | input:enabled | 选择每个启用的 input 元素 |
| :disabled | input:disabled | 选择每个禁用的 input 元素 |
| :checked | input:checked | 选择每个被选中的 input 元素 |
| :required | input:required | 包含required属性的元素 |
| :optional | input:optional | 不包含required属性的元素 |
| :valid | input:valid | 验证通过的表单元素 |
| :invalid | input:invalid | 验证不通过的表单 |
# 表单属性样式
input:enabled {
background: red;
}
input:disabled {
background: #dddddd;
}
input:checked+label {
color: green;
}
...
<input type="text" disabled>
<input type="text" name="info">
<input type="radio" name="sex" checked id="boy">
<label for="boy">男</label>
<input type="radio" name="sex" checked id="girl">
<label for="girl">女</label>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 表单必选样式
input:required {
border: solid 2px blue;
}
input:optional {
background: #dcdcdc;
border: none;
}
...
<input type="text" name="title" required>
<input type="text" name="name">
2
3
4
5
6
7
8
9
10
11
12
# 表单验证样式
input:valid {
border: solid 1px green;
}
input:invalid {
border: solid 1px red;
}
...
<form>
<input type="email">
<button>保存</button>
</form>
2
3
4
5
6
7
8
9
10
11
12
13
# 字符伪类
| 状态 | 示例 | 说明 |
|---|---|---|
| ::first-letter | p:first-letter | 选择每个元素的首字母 |
| ::first-line | p:first-line | 选择每个元素的首行 |
| ::before | p:before | 在每个元素的内容之前插入内容 |
| ::after | p:after | 在每个元素的内容之后插入内容 |
# 首字母大写
p::first-line {
font-size: 20px;
}
...
<p>
后盾人不断更新视频教程
</p>
2
3
4
5
6
7
8
# 段落首行处理
p::first-letter {
font-size: 30px;
}
...
<p>
后盾人不断更新视频教程
</p>
2
3
4
5
6
7
8
# 在元素前添加
span::before {
content: '⇰';
color: red;
}
span::after {
content: '⟲';
color: green;
}
...
<span>后盾人</span>
2
3
4
5
6
7
8
9
10
11
# 搜索框示例
div {
border: solid 1px #ddd;
width: 150px;
}
div>input[type="text"] {
border: none;
outline: none;
}
div>input[type="text"]+span:after {
content: "\21AA";
font-size: 14px;
cursor: pointer;
}
...
<div>
<input type="text"><span></span>
</div>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# 添加属性内容
h2::before {
content: attr(title);
}
...
<h2 title="后盾人">houdunren.com</h2>
2
3
4
5
6