选择器
作者: dkvirus 发表于: 2018-06-29 11:03:00 最近更新: 2018-07-05 15:47:29

CSS 要对 html 进行样式修饰,首先要知道修饰哪个 html 标签,这就需要 css 选择器。
CSS 选择器及其丰富,本文只总结笔者常用的一些选择器。

一、常用选择器

选择器 示例 说明
id 选择器 #demo {} 选择 id 属性为 demo 的 html 元素
class 选择器 .demo {} 选择 class 属性为 demo 的 html 元素
通用选择器 * {} 选择 html 所有元素
父子选择器 div>p {} 只获取 div 元素下儿子元素为 p 的元素(儿子和后代的概念不一样哦~)
后代选择器 div p {} 获取 div 元素下所有 p 元素,p 可以是 div 的儿子元素,还可以是孙子元素…
分组选择器 div, p {} 同时选择 div 元素和 p 元素

二、伪类选择器

伪类选择器就是用 : 开头的选择器,丰富了 css 选择器的选取范围。

1. 常用伪类选择器

这类伪类选择器有书写顺序 :link、:visited、:hover、:active。

伪类选择器 含义 使用
:link 尚未被点击过的链接设置样式 a:link {}
:visited 被点击过的链接设置样式 a:visited {}
:hover 鼠标悬浮到元素上时设置样式 a:hover {}
:active 鼠标按住还没松开时设置的样式 a:active {}

2. :first-child 和 :last-child

可以选择第一个子元素和最后一个子元素,作用在子元素上。

1
2
3
4
5
<ul>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>This text will be orange.</li>
</ul>
伪类选择器 使用 说明
:first-child li:first-child {} 为 ul 下的第一个 li 元素设置样式
:last-child li:last-child {} 为 ul 下最后一个 li 元素设置样式

3. :first-of-type 和 :last-of-type

可以选择第一个子元素和最后一个子元素,作用在父元素上。

1
2
3
4
5
6
7
8
<ul>
<li>Lorem ipsum dolor sit amet.
<span>Lorem ipsum dolor sit amet.</span>
<span>This text will be orange.</span>
</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>This text will be orange.</li>
</ul>
伪类选择器 使用 说明
:first-of-type ul:first-of-type {} 为 ul 下的第一个 li 元素和第一个 span 元素设置样式
:last-of-type ul:last-of-type {} 为 ul 下最后一个 li 元素和最后一个 span 元素设置样式

4. :nth-child 和 :nth-last-child

可以选择指定位置的子元素。作用元素为父元素。

1
2
3
4
5
6
7
8
9
10
11
12
<ol>
<li>Alpha</li>
<li>Beta</li>
<li>Gamma</li>
<li>Delta</li>
<li>Epsilon</li>
<li>Zeta</li>
<li>Eta</li>
<li>Theta</li>
<li>Iota</li>
<li>Kappa</li>
</ol>
使用 说明
ol :nth-child(2) {} 给 ol 元素第二个 li 子元素设置样式
ol :nth-child(2n) {} 给 ol 元素下偶数位的 li 子元素设置样式
ol :nth-child(even) {} 给 ol 元素下偶数位的 li 子元素设置样式
ol :nth-child(2n+1) {} 给 ol 元素下奇数位的 li 子元素设置样式
ol :nth-child(odd) {} 给 ol 元素下奇数位的 li 子元素设置样式
ol :nth-child(2n+6) {} 从 ol 下第6个 li 子元素开始,偶数位设置样式

:nth-last-child 与 :nth-child 含义相似,:nth-child 从第一个元素往后数,:nth-last-child 从最后一个元素往前数。

5. :nth-of-type 和 :nth-last-of-type

可以选择指定位置的元素,作用在元素本身。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>
p:nth-of-type(2) {
color: orange;
}
</style>

<article>
<div>
<p>this is first p in div.</p>
<p>this is second p in div.</p>
</div>
<p>this is first p in article.</p>
<p>this is second p in article.</p>
</article>

页面展示如下,可以看到页面中有 4 个 p 标签,只会作用同一级别的元素。如 div 下两个 p 元素第二个变成了橘色,article 下两个直接子元素 p 元素中第二个也变成了橘色。

nth-of-type

6. :not 取反选择器

ul 元素下除了 .first-item 的第一个 li 元素,给其它 li 元素设置样式。

1
2
3
4
5
6
7
8
9
10
11
12
<style>
li:not(.first-item) {
color: orange;
}
</style>

<ul>
<li class="first-item">Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
首页
友链
归档
dkvirus
动态
RSS