2019-11-05

CSS Selecter 选择器

前言

CSS 选择器用于选择想要的元素的样式的模式。
“CSS” 列表示在 CSS 版本的属性定义（CSS1，CSS2，或对 CSS3）。

选择器	示例	示例说明	CSS	🔗
.class	.intro	选择所有 class=”intro” 的元素	1	🔗
#id	#firstname	选择所有 id=”firstname” 的元素	1	🔗
*	*	选择所有元素	2	🔗
element	p	选择所有 `<p>` 元素	1	🔗
element,element	div,p	选择所有 `<div>` 元素和 `<p>` 元素	1	🔗
element element	div p	选择 `<div>` 元素内的所有 `<p>` 元素	1	🔗
element>element	div>p	选择所有父级是 `<div>` 元素的 `<p>` 元素	2	🔗
element+element	div+p	选择所有紧接着 `<div>` 元素之后的 `<p>` 元素	2	🔗
element~element	div~p	选择 div 元素之后的每一个 p 元素	3	🔗
[attribute]	[target]	选择所有带有 target 属性元素	2	🔗
[attribute=value]	[target=-blank]	选择所有使用 target=”-blank” 的元素	2	🔗
[attribute~=value]	[title~=flower]	选择标题属性包含单词 “flower” 的所有元素	2	🔗
[attribute\|=language]	[lang\|=en]	选择 lang 属性以 en 为开头的所有元素	2	🔗
[attribute^=value]	a[src^=”https”]	选择每一个 src 属性的值以 “https” 开头的元素	3	🔗
[attribute$=value]	a[src$=”.pdf”]	选择每一个 src 属性的值以 “.pdf” 结尾的元素	3	🔗
[attribute*=value]	a[src*=”runoob”]	选择每一个 src 属性的值包含子字符串 “runoob” 的元素	3	🔗
:link	a:link	选择所有未访问链接	1	🔗
:visited	a:visited	选择所有访问过的链接	1	🔗
:active	a:active	选择活动链接	1	🔗
:hover	a:hover	选择鼠标在链接上面时	1	🔗
:focus	input:focus	选择具有焦点的输入元素	2	🔗
:first-letter	p:first-letter	选择每一个 `<p>` 元素的第一个字母	1	🔗
:first-line	p:first-line	选择每一个 `<p>` 元素的第一行	1	🔗
:first-child	p:first-child	指定只有当 `<p>` 元素是其父级的第一个子级的样式	2	🔗
:before	p:before	在每个 `<p>` 元素之前插入内容	2	🔗
:after	p:after	在每个 `<p>` 元素之后插入内容	2	🔗
:lang(language)	p:lang(it)	选择一个 lang 属性的起始值 =”it” 的所有 `<p>` 元素	2	🔗
:first-of-type	p:first-of-type	选择每个 p 元素是其父级的第一个 p 元素	3	🔗
:last-of-type	p:last-of-type	选择每个 p 元素是其父级的最后一个 p 元素	3	🔗
:only-of-type	p:only-of-type	选择每个 p 元素是其父级的唯一 p 元素	3	🔗
:only-child	p:only-child	选择每个 p 元素是其父级的唯一子元素	3	🔗
:nth-child(n)	p:nth-child(2)	选择每个 p 元素是其父级的第二个子元素	3	🔗
:nth-last-child(n)	p:nth-last-child(2)	选择每个 p 元素的是其父级的第二个子元素，从最后一个子项计数	3	🔗
:nth-of-type(n)	p:nth-of-type(2)	选择每个 p 元素是其父级的第二个 p 元素	3	🔗
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择每个 p 元素的是其父级的第二个 p 元素，从最后一个子项计数	3	🔗
:last-child	p:last-child	选择每个 p 元素是其父级的最后一个子级	3	🔗
:root	:root	选择文档的根元素	3	🔗
:empty	p:empty	选择每个没有任何子级的 p 元素（包括文本节点）	3	🔗
:target	#news:target	选择当前活动的 #news 元素（包含该锚名称的点击的 URL）	3	🔗
:enabled	input:enabled	选择每一个已启用的输入元素	3	🔗
:disabled	input:disabled	选择每一个禁用的输入元素	3	🔗
:checked	input:checked	选择每个选中的输入元素	3	🔗
:not(selector)	:not(p)	选择每个并非 p 元素的元素	3	🔗
::selection	::selection	匹配元素中被用户选中或处于高亮状态的部分	3	🔗
:out-of-range	:out-of-range	匹配值在指定区间之外的 input 元素	3	🔗
:in-range	:in-range	匹配值在指定区间之内的 input 元素	3	🔗
:read-write	:read-write	用于匹配可读及可写的元素	3	🔗
:read-only	:read-only	用于匹配设置 “readonly”（只读）属性的元素	3	🔗
:optional	:optional	用于匹配可选的输入元素	3	🔗
:required	:required	用于匹配设置了 “required” 属性的元素	3	🔗
:valid	:valid	用于匹配输入值为合法的元素	3	🔗
:invalid	:invalid	用于匹配输入值为非法的元素	3	🔗

1、id 选择器

如果你要在 HTML 元素中设置 CSS 样式，可以在元素中设置 “id” 和 “class” 选择器。
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

选择器	示例	示例说明	CSS	备注	🔗
#id	#firstname	选择所有 id=”firstname” 的元素	1		🔗

HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以 # 来定义。

以下的样式规则应用于元素属性 id="para1"。

<style>
     #para1 {
         text-align: center;
         color: red;
     }
</style>

<p id="para1">Hello World!</p>

id 属性不要以数字开头，数字开头的 id 在 Mozilla 或 Firefox 浏览器中不起作用。

2、class 选择器

class 选择器用于描述一组元素的样式，class 选择器有别于 id 选择器，class 可以在多个元素中使用。

选择器	示例	示例说明	CSS	备注	🔗
.class	.intro	选择所有 class=”intro” 的元素	1		🔗

class 选择器在 HTML 中以 class 属性表示, 在 CSS 中，类选择器以一个点 . 来定义。

在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。

<style>
     .center {
         text-align: center;
     }
</style>

<h1 class="center">标题居中</h1>
<p class="center">段落居中</p>

也可以指定特定的 HTML 元素使用 class。

在以下实例中, 所有的 p 元素使用 class=”center” 让该元素的文本居中。

<style>
     p.center {
         text-align: center;
     }
</style>

<h1 class="center">标题居中</h1>
<p class="center">段落居中</p>

类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用。

3、分组选择器

在样式表中有很多具有相同样式的元素。为了尽量减少代码，可以使用分组选择器。每个选择器用逗号分隔。

选择器	示例	示例说明	CSS	备注	🔗
element, element	div, p	选择所有 `<div>` 元素和 `<p>` 元素	1		🔗

在样式表中有很多具有相同样式的元素。

<style>
    h1 {
        color: green;
    }
    h2 {
        color: green;
    }
    p {
        color: green;
    }
</style>

为了尽量减少代码，可以使用分组选择器。
每个选择器用逗号分隔。

实例

<style>
    h1, h2, p {
        color: green;
    }
</style>

1
2
3

<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>

效果

Hello World!

Smaller heading!

This is a paragraph.

4、嵌套选择器

嵌套选择器可能适用于选择器内部的选择器的样式。
它可能适用于选择器内部的选择器的样式。
在下面的例子设置了三个样式：
- p { }: 为所有 p 元素指定一个样式。
- .marked { }: 为所有 class=”marked” 的元素指定一个样式。
- .marked p { }: 为所有 class=”marked” 元素内的 p 元素指定一个样式。
- p.marked { }: 为所有 class=”marked” 的 p 元素指定一个样式。

实例

<style>
    p {
        color: blue;
        text-align: center;
    }
    .marked {
        background-color: red;
    }
    .marked p {
        color: white;
    }
    p.marked {
        text-decoration: underline;
    }
</style>

<p>这个段落是蓝色文本，居中对齐。</p>
<div class="marked">
    <p>这个段落不是蓝色文本。</p>
</div>
<p>所有 class="marked"元素内的 p 元素指定一个样式，但有不同的文本颜色。</p>
<p class="marked">带下划线的 p 段落。</p>

效果

这个段落是蓝色文本，居中对齐。

这个段落不是蓝色文本。

所有 class=”marked”元素内的 p 元素指定一个样式，但有不同的文本颜色。

带下划线的 p 段落。

5、组合选择器

CSS 组合选择符包括各种简单选择符的组合方式。组合选择符说明了两个选择器直接的关系。在 CSS3 中包含了四种组合方式:
- 后代选择器（以空格分隔）
- 子元素选择器（以大于 > 号分隔）
- 相邻兄弟选择器（以加号 + 分隔）
- 后续兄弟选择器（以波浪号 ～ 分隔）

5.1 后代选择器

后代选择器用于选取某元素的后代元素。

选择器	示例	示例说明	CSS	备注	🔗
element element	div p	选择 `<div>` 元素内的所有 `<p>` 元素	1		🔗

以下实例选取所有 <p> 元素插入到 <div> 元素中。

实例

<style>
    div p {
        background-color: yellow;
    }
</style>

<div>
    <p>段落 1。 在 div 中。</p>
    <p>段落 2。 在 div 中。</p>
</div>

<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>

效果

段落 1。在 div 中。

段落 2。在 div 中。

段落 3。不在 div 中。

段落 4。不在 div 中。

5.2 子元素选择器

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

选择器	示例	示例说明	CSS	备注	🔗
element>element	div>p	选择所有父级是 `<div>` 元素的 `<p>` 元素	2		🔗

以下实例选择了 <div> 元素中所有直接子元素 <p>。

实例

<style>
    div>p {
        background-color: yellow;
    }
</style>

<div>
    <p>段落 1。 在 div 中。</p>
    <p>段落 2。 在 div 中。</p>
</div>

<div>
    <span>
        <p>段落 3。不在 div 中。</p>
    </span>
</div>

<p>段落 4。不在 div 中。</p>

效果

段落 1。在 div 中。

段落 2。在 div 中。

段落 3。不在 div 中。

段落 4。不在 div 中。

5.3 相邻兄弟选择器

相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。
如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器（Adjacent sibling selector）。

选择器	示例	示例说明	CSS	备注	🔗
element+element	div+p	选择所有紧接着 `<div>` 元素之后的 `<p>` 元素	2		🔗

以下实例选取了所有位于 <div> 元素后的第一个 <p> 元素。

实例

<style>
    div+p {
        background-color: yellow;
    }
</style>

<div>
    <p>DIV 内部段落。</p>
    <p>DIV 内部段落。</p>
</div>

<p>DIV 之后的第一个 P 元素。</p>

<p>DIV 之后的第二个 P 元素。</p>

效果

DIV 内部段落。

DIV 内部段落。

DIV 之后的第一个 P 元素。

DIV 之后的第二个 P 元素。

5.4 后续兄弟选择器

后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。

选择器	示例	示例说明	CSS	备注	🔗
element~element	div~p	选择 div 元素之后的每一个 p 元素	3		🔗

以下实例选取了所有 <div> 元素之后的所有相邻兄弟元素 <p>。

实例

<style>
    div~p {
        background-color: yellow;
    }
</style>

<p>之前段落，不会添加背景颜色。</p>
<div>
    <p>段落 1。 在 div 中。</p>
    <p>段落 2。 在 div 中。</p>
</div>

<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>

效果

之前段落，不会添加背景颜色。

段落 1。在 div 中。

段落 2。在 div 中。

段落 3。不在 div 中。

段落 4。不在 div 中。

6、属性选择器

具有特定属性的 HTML 元素样式不仅仅是 class 和 id。

选择器	示例	示例说明	CSS	🔗
[attribute]	[target]	选择所有带有 target 属性元素	2	🔗
[attribute=value]	[target=-blank]	选择所有使用 target=”-blank” 的元素	2	🔗
[attribute~=value]	[title~=flower]	选择标题属性包含单词 “flower” 的所有元素	2	🔗
[attribute\|=language]	[lang\|=en]	选择 lang 属性以 en 为开头的所有元素	2	🔗
[attribute^=value]	a[src^=”https”]	选择每一个 src 属性的值以 “https” 开头的元素	3	🔗
[attribute$=value]	a[src$=”.pdf”]	选择每一个 src 属性的值以 “.pdf” 结尾的元素	3	🔗
[attribute*=value]	a[src*=”runoob”]	选择每一个 src 属性的值包含子字符串 “runoob” 的元素	3	🔗

注意：IE7 和 IE8 需声明 !DOCTYPE 才支持属性选择器！IE6 和更低的版本不支持属性选择器。
下面的例子是把包含标题 title 的所有元素变为蓝色。

实例

<style>
    [title] {
        color: blue;
    }
</style>

<h2>Will apply to:</h2>
<p title="Hello world">Hello world</p>
<p title="qianchia">qianchia.com</p>

<hr />

<h2>Will not apply to:</h2>
<p>Hello!</p>
<p>qianchia.com</p>

效果

Will apply to:

Hello world

qianchia.com

Will not apply to:

Hello!

qianchia.com

6.1 属性和值连接符

比较符	描述
~=, \|=	value 是完整单词
*=, ^=, $=	value 是拼接字符串

6.1.1 属性中包含 value:　

比较符	描述
~=	value 是完整单词
*=	value 是拼接字符串

[attribute~=value] 属性中包含独立的单词为 value，例如：

1	[title~=flower] --> <img src="/i/eg_tulip.jpg" title="tulip flower" />

[attribute*=value] 属性中做字符串拆分，只要能拆出来 value 这个词就行，例如：
1
[title*=flower] --> <img src="/i/eg_tulip.jpg" title="ffffflowerrrrrr" />

6.1.2 属性以 value 开头:

比较符	描述
\|=	value 是完整单词
^=	value 是拼接字符串

[attribute|=value] 属性中必须是完整且唯一的单词，或者以 - 分隔开：，例如：
1
[lang|=en] --> <p lang="en"> <p lang="en-us">[
attribute^=value] 属性的前几个字母是 value 就可以，例如：
1
[lang^=en] --> <p lang="ennn">

6.1.3 属性以 value 结尾:

比较符	描述
$=	value 是拼接字符串

[attribute$=value] 属性的后几个字母是 value 就可以，例如：
1
a[src$=".pdf"]

6.2 属性和值选择器

下面的实例改变了标题 title=’qianchia’ 元素的边框样式。

实例

<style>
    [title=qianchia] {
        border: 5px solid green;
    }
</style>

<h2>Will apply to:</h2>
<p title="Hello world">Hello world</p>
<p title="qianchia">qianchia.com</p>

<hr />

<h2>Will not apply to:</h2>
<p>Hello!</p>
<p title="qianchia">qianchia.com</p>

效果

Will apply to:

Hello world

qianchia.com

Will not apply to:

Hello!

qianchia.com

6.2.1 多值

下面是包含指定值的 title 属性的元素样式的例子，使用（~）分隔属性和值。

实例

<style>
    [title~=hello] {
        color: blue;
    }
</style>

<h2>Will apply to:</h2>
<p title="hello world">Hello world</p>
<p title="qianchia">qianchia.com</p>

<hr />

<h2>Will not apply to:</h2>
<p title="student hello">Hello!</p>
<p title="qianchia">qianchia.com</p>

效果

Will apply to:

Hello world

qianchia.com

Will not apply to:

Hello!

qianchia.com
下面是包含指定值的 lang 属性的元素样式的例子，使用（|）分隔属性和值。

实例

<style>
    [lang|=en] {
        color: blue;
    }
</style>

<h2>Will apply to:</h2>
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<p lang="en-gb">Ello!</p>

<hr />

<h2>Will not apply to:</h2>
<p lang="us">Hi!</p>
<p lang="no">Hei!</p>

效果

Will apply to:

Hello!

Hi!

Ello!

Will not apply to:

Hi!

Hei!

6.3 表单样式

属性选择器样式无需使用 class 或 id 的形式。

实例

<style>
    input[type="text"] {
        width: 150px;
        display: block;
        margin-bottom: 10px;
        background-color: yellow;
    }

    input[type="button"] {
        width: 120px;
        margin-left: 25px;
        margin-top: 25px;;
        display: block;
    }
</style>

<form name="input" action="demo-form.php" method="get">
    Firstname: <input type="text" name="fname" value="Peter" size="20" />
    Lastname: <input type="text" name="lname" value="Griffin" size="20" />
    <input type="button" value="Example Button" />
</form>

效果

Firstname:

Lastname:

7、CSS 实例

组选择器

嵌套选择器

选择具有 title 属性的元素

选择标题 = 一个特定值的元素

选择标题 = 一个特定值的元素 (使用（~）分隔属性和值)

选择标题 = 一个特定值的元素 (使用（|）分隔属性和值)

如果您觉得阅读本文对您有帮助，请用微信、支付宝 or QQ 扫码赞助，您的支持是我写作最大的动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文链接，否则保留追究法律责任的权利。

Qian Chia

Posted @ 2019-11-05 20:09

Qian Chia's Blog

赞助

搜索

分类

标签