# 选择器

# 选择器

样式是做用在元素标签上的,通过本章将可以随意查找元素来应用样式。

所有用于选择特定元素的选择符又分三种。

  • 上下文选择符。基于祖先或同胞元素选择一个元素。

  • 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;
}
1
2
3
4

根据标签为元素设置样式

h1 {
	color: red;
}
1
2
3

同时设置多个元素组合

h1,h2 {
    color: red;
}
1
2
3

元素在多个组件中存在

h1,h2 {
    color: red;
}
h1,h3{
    background: #dcdcdc;
}
1
2
3
4
5
6

# 类选择器

ID和类选择符

只要你在HTML标记中为元素添加了id和class属性,就可以在CSS选择符中使用ID和类名,直接选中文档中特定的区域。

类属性就是HTML元素的class属性,body标签中包含的任何HTML元素都可以添加这个属性。

类选择器是为一类状态声明样式规则,下面是把文本居中定义为类样式。

类选择符

.类名

注意,类选择符前面是点(.),紧跟着类名,两者之间没有空格。

类选择符就是在HTML类名前面加一个点(英文句号)。

.specialtext {font-style:italic;}
1

标签带类选择符

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;}
1
2
3
4

多类选择符

可以给元素添加多个类,比如:

<p class="specialtext featured">Here the span tag <span>may or may not</span> be styled.</p>
1

多个类名,如这里的specialtext和featured,放在同一对引号里,用空格分隔。实际上,更准确的说法,就应该是HTML的class属性可以有多个空格分隔的值。要选择同时存在这两个类名的元素,可以这样写:

.specialtext.featured {font-size:120%;}
1

注意,CSS选择符的两个类名之间没有空格,因为我们只想选择同时具有这两个类名的那个元素。如果你加了空格,那就变成了“祖先/后代”关系的上下文选择符了。

.text-center {
    text-align: center;
}
...

<h1 class="text-center">houdunren.com</h1>
<h2 class="text-center">hdcms.com</h2>
1
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>
1
2
3
4
5
6
7
8
9
10

# ID选择器

 <p id="specialtext">This is the special text.</p>
1

那么,相应的ID选择符就是这样的:

#specialtext {CSS样式声明} 或者这样的:

p#specialtext {CSS样式声明}

除此之外,ID与类的用法都一样,而且我们前面讨论的关于类选择符的(几乎)一切,都适应于ID选择符。那两者到底有什么区别呢?

用于页内导航的ID ID也可以用在页内导航链接中。下面就是一个链接,其目标是同一页的另一个位置。

<a href="#bio">Biography</a>
1

看到href属性值开头的#了吗?它表示这个链接的目标在当前页面中,因而不会触发浏览器加载页面(如果没有#,浏览器就会尝试加载bio目录下的默认页面了)。

看到href属性值开头的#了吗?它表示这个

为有 id 属性的元素设置样式

#container {
    background: red;
}

...
<h1 id="container">houdunren.com</h1>
1
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>
1
2
3
4
5
6

有了用唯一ID标识的菜单之后,就可以使用上下文选择符来选择其中包含的各种类型的标签了。比如,可以将这个菜单中的链接设置为橙色,同时又不会影响页面中的其他链接:

#mainmenu a {color:orange;}
1

利用唯一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>
1
2
3
4
5
6
7
8
9
10

然后,再用CSS为链接应用颜色:

.boy a {color:#6CF;}/*蓝色*/
.girl a {color:#F9C;}/*粉红色*/
1
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>
1
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>

1
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>
1
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 属性选择器

有一种选择元素的方法是属性选择符,它基于HTML标签的属性选择元素。

属性名选择符

标签名[属性名] 选择任何带有属性名的标签名。

比如,下面的CSS

img[title] {border:2px solid blue;}
1

属性值选择符

标签名[属性名="属性值"] 在HTML5中,属性值的引号可加可不加,在此为了清楚起见,我们加了。 选择任何带有值为属性值的属性名的标签名。

这个选择符可以让你控制到属性的值是什么。例如,这条规则

img[title="red flower"] {border:4px solid green;}
1

在图片的title属性值为red flower的情况下,才会为图片添加边框。换句话说,下面这个img元素就会被加上边框。

<img src="images/red_flower.jpg" title="red flower" alt="red flower" />
1

属性选择符的小结

基于属性名和属性的其他特征选择元素,为我们提供了另一种区别对待相同标签的机会。只要事先规划好,就可以编写出适合属性选择符的标记来。

根据属性来为元素设置样式也是常用的场景。

选择器 示例 描述
[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>
1
2
3
4
5
6

约束多个属性

h1[class][id] {
    color: red;
}
...

<h1 class="container" id >houdunren.com</h1>
1
2
3
4
5
6

具体属性值设置样式

a[href="https://www.houdunren.com"] {
    color: green;
}
...

<a href="https://www.houdunren.com">后盾人</a>
<a href="">HDCMS</a>
1
2
3
4
5
6
7

^ 以指定值开头的元素

h2[name^="hdcms"] {
    color: red;
}
...

<h2 name="houdunren">houdunren.com</h2>
<h2 name="hdcms.com">hdcms.com</h2>
1
2
3
4
5
6
7

$ 以指定值结尾的元素

h2[name$="com"] {
    color: red;
}
...
<h2 name="houdunren">houdunren.com</h2>
<h2 name="hdcms.com">hdcms.com</h2>
1
2
3
4
5
6

* 属性内部任何位置出现值的元素

h2[name*="houdunren"] {
    color: red;
}
...

<h2 name="houdunren">houdunren.com</h2>
<h2 name="houdunren.com">hdcms.com</h2>
1
2
3
4
5
6
7

~ 属性值中包含指定词汇的元素

h2[name~="houdunren"] {
    color: red;
}
...

<h2 name="houdunren">houdunren.com</h2>
<h2 name="houdunren web">hdcms.com</h2>
1
2
3
4
5
6
7

| 以指定值开头或以属性连接破折号的元素

h2[name|="houdunren"] {
    color: red;
}
...

<h2 name="houdunren">houdunren.com</h2>
<h2 name="houdunren-web">hdcms.com</h2>
1
2
3
4
5
6
7

# 伪类选择器

伪类这个叫法源自它们与类相似,但实际上并没有类会附加到标记中的标签上。伪类分两种。

UI(User Interface,用户界面)伪类会在HTML元素处于某个状态时(比如鼠标指针位于链接上),为该元素应用CSS样式。

结构化伪类会在标记中存在某种结构上的关系时(如某个元素是一组元素中的第一个或最后一个),为相应元素应用CSS样式。

链接伪类

针对链接的伪类一共有4个,因为链接始终会处于如下4种状态之一。

Link。此时,链接就在那儿等着用户点击。
Visited。用户此前点击过这个链接。
Hover。鼠标指针正悬停在链接上。
Active。链接正在被点击(鼠标在元素上按下,还没有释放)。
1
2
3
4

以下就是这些状态对应的4个伪类选择符(使用了a选择符和一些示例声明):

a:link {color:black;}
a:visited {color:gray;}
a:hover {text-decoration:none;}
a:active {color:red;}
1
2
3
4

选择符中与众不同的:(冒号)好像在向我们宣示:“我是一个伪类!”

一个冒号(:)表示伪类,两个冒号(::)表示CSS3新增的伪元素。尽管浏览器目前都支持对CSS 1和CSS 2的伪元素使用一个冒号,但希望你能习惯于用双冒号代替单冒号,因为这些单冒号的伪元素最终可能都会被淘汰掉。

:focus伪类

e:focus
1

在这个以及后续的例子中,e表示任何元素,如p、h1、section,等等。 表单中的文本字段在用户单击它时会获得焦点,然后用户才能在其中输入字符。下面的规则

input:focus {border:1px solid blue;}
1

会在光标位于input字段中时,为该字段添加一个蓝色边框。这样可以让用户明确地知道输入的字符会出现在哪里。

:target伪类

e:target
1

如果用户点击一个指向页面中其他元素的链接,则那个元素就是目标(target),可以用:target伪类选中它。

对于下面这个链接

<a href="#more_info">More Information</a>
1

位于页面其他地方、ID为more_info的那个元素就是目标。该元素可能是这样的:

<h2 id="more_info">This is the information you are looking for.</h2>
1

那么,如下CSS规则

#more_info:target {background:#eee;}
1

会在用户单击链接转向ID为more_info的元素时,为该元素添加浅灰色背景。

维基百科在其引证中大量使用了:target伪类。维基百科的引证链接就是正文里那些不起眼的数字链接。引证本身则位于长长的页面的最下方。如果没有:target应用的突出显示,很难知道你点击的链接对应着一大堆引证中的哪一个。

结构化伪类

结构化伪类可以根据标记的结构应用样式,比如根据某元素的父元素或前面的同胞元素是什么。

1.:first-child和:last-child

e:first-child
e:last-child
1
2

:first-child代表一组同胞元素中的第一个元素,而:last-child则代表最后一个。比如,把下面的规则

ol.results li:first-child {color:blue;}
1

应用给以下标记:

<ol class="results">
    <li>My Fast Pony</li>
    <li>Steady Trotter</li>
    <li>Slow Ol' Nag</li>
</ol>
1
2
3
4
5

文本“My Fast Pony”就会变成蓝色。如果选择符改成这样:

ol.results li:last-child {color:red;}
1

那变成红色的文本就是“Slow Ol' Nag”了。

2.:nth-child

e:nth-child(n)
1

e表示元素名,n表示一个数值(也可以使用odd或even)。 例如,

li:nth-child(3)
1

会选择一组列表项中的每个第三项。

:nth-child伪类最常用于提高表格的可读性,比如,对表格的所有行交替应用不同颜色。

伪元素

顾名思义,伪元素就是你的文档中若有实无的元素。以下我们介绍几个最有用的伪元素

  1. ::first-letter伪元素
e::first-letter
1

比如,以下CSS规则:

p::first-letter {font-size:300%;}
1

可以得到的段落首字符放大的效果。

如果不用伪元素创建这个首字符放大效果,必须手工给该字母加上标签,然后再为该标签应用样式。而伪元素实际上是替我们添加了无形的标签。

  1. ::first-line伪元素
e::first-line
1

可以选中文本段落(一般情况下是段落)的第一行。例如

p::first-line {font-variant:small-caps;} 
1

可以把第一行以小型大写字母显示,

用::first-line伪元素把第一行变成了小型大写字母。注意,::first-line伪元素的长度会随浏览器窗口大小的变化而改变。

3.::before和::after伪元素

以下两个伪元素

e::before
e::after
1
2

可用于在特定元素前面或后面添加特殊内容。

以下标记

<p class="age">25</p>
1

和如下样式

p.age::before {content:"Age: ";}
p.age::after {content:" years.";}
1
2

注意,每个content属性值中都包含了空格,以便输出结果中有适当的空距。 能得到以下结果:

Age: 25 years.
1

如果标签中的内容是通过数据库查询生成的结果,那么用这种技巧再合适不过了。因为所有结果都是数字,使用这两个伪元素可以在把数字呈现给用户时,加上说明性文字。

这个例子展示了对::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>
1
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">
1
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# :root

根元素选择伪类即选择html

:root {
    font-size: 100px;
}
1
2
3

# :empty

没有内容和空白的元素。下面第一个p标签会产生样式,第二个不会因为有空白内容

:empty {
    border: solid 2px red;
}
...

<p></p>
<p> </p>
1
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>
1
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>
1
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>
1
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>
1
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>
1
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>
1
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>
1
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>
1
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>
1
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;
}
1
2
3
4

设置前三个元素

table tr>td:nth-child(-n+3) {
    background: rgb(128, 35, 2);
    color: white;
}
1
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>
1
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>
1
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

取最后两个元素

main>ul li:nth-last-child(-n+2) {
	color: red;
}
1
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>
1
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>
1
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>
1
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">
1
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>
1
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>
1
2
3
4
5
6
7
8

# 段落首行处理

p::first-letter {
    font-size: 30px;
}
...

<p>
	后盾人不断更新视频教程
</p>
1
2
3
4
5
6
7
8

# 在元素前添加

span::before {
    content: '⇰';
    color: red;
}
span::after {
    content: '⟲';
    color: green;
}
...

<span>后盾人</span>
1
2
3
4
5
6
7
8
9
10
11

# 搜索框示例

image-20190813223919156

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>
1
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>
1
2
3
4
5
6
更新时间: 2020-3-21 20:06:05