资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/CSS 选择器

CSS 选择器

cnio / 3361人阅读

摘要：加号相连的两个选择器实现同级紧邻的元素选择的功能。我最好的朋友是米老鼠。样式紧挨的第一个同级元素是我最好的朋友是米老鼠。注意区分新增的属性选择器。是中新增的选择器，用于标示当前处于活动的锚标记。选择器的取反，这个很好理解。

概览

在 CSS 中，选择器用于选择需要添加样式的元素。

CSS 选择器非常丰富，现将 CSS 1 - 3 目前所有的选择器列举如下。

选择器 例子 例子描述 CSS版本
.class .intro 选择 class="intro" 的所有元素。 1
#id #firstname 选择 id="firstname" 的元素。 1
* * 选择所有元素。 2
element p 选择所有

元素。

 1
selector,selector div,p 选择所有
元素和所有

元素。

 1
selector selector div p 选择
元素内部的所有

元素。

 1
selector>selector div>p 选择父元素为
元素的所有

元素。

 2
selector+selector div+p 选择紧接在
元素之后的所有

元素。

 2
[attribute] [target] 选择带有 target 属性所有元素。 2
[attribute=value] [target=_blank] 选择 target="_blank" 的所有元素。 2
[attribute~=value] [title~=flower] 选择 title 属性包含单词 "flower" 的所有元素。 2
[attribute|=value] [lang|=en] 选择 lang 属性值以 "en" 开头的所有元素。 2
:link a:link 选择所有未被访问的链接。 1
:visited a:visited 选择所有已被访问的链接。 1
:active a:active 选择活动链接。 1
:hover a:hover 选择鼠标指针位于其上的链接。 1
:focus input:focus 选择获得焦点的 input 元素。 2
:first-letter p:first-letter 选择每个

元素的首字母。

 1
:first-line p:first-line 选择每个

元素的首行。

 1
:first-child p:first-child 选择属于父元素的第一个子元素的每个

元素。

 2
:before p:before 在每个

元素的内容之前插入内容。

 2
:after p:after 在每个

元素的内容之后插入内容。

 2
:lang(language) p:lang(it) 选择带有以 "it" 开头的 lang 属性值的每个

元素。

 2
selector~selector p~ul 选择前面有

元素的每个

    元素。
 3
[attribute^=value] a[src^="https"] 选择其 src 属性值以 "https" 开头的每个 元素。 3
[attribute$=value] a[src$=".pdf"] 选择其 src 属性以 ".pdf" 结尾的所有 元素。 3
[attribute*=value] a[src*="abc"] 选择其 src 属性中包含 "abc" 子串的每个 元素。 3
:first-of-type p:first-of-type 选择属于其父元素的首个

元素。

 3
:last-of-type p:last-of-type 选择属于其父元素的最后

元素。

 3
:only-of-type p:only-of-type 选择属于其父元素只有唯一的

元素。

 3
:only-child p:only-child 选择属于其父元素只有唯一的子元素

.

 3
:nth-child(n) p:nth-child(2) 选择属于其父元素的第二个子元素

.

 3
:nth-last-child(n) p:nth-last-child(2) 同上，从最后一个子元素开始计数。 3
:nth-of-type(n) p:nth-of-type(2) 选择属于其父元素第二个

元素。

 3
:nth-last-of-type(n) p:nth-last-of-type(2) 同上，但是从最后一个子元素开始计数。 3
:last-child p:last-child 选择属于其父元素最后一个子元素

.

 3
:root :root 选择文档的根元素。 3
:empty p:empty 选择没有子元素的每个

元素（包括文本节点）。

 3
:target #news:target 选择当前活动的 #news 元素。 3
:enabled input:enabled 选择每个启用的 元素。 3
:disabled input:disabled 选择每个禁用的 元素 3
:checked input:checked 选择每个被选中的 元素。 3
:not(selector) :not(p) 选择非

元素的每个元素。

 3
::selection ::selection 选择被用户选取的元素部分。 3
:out-of-range input:out-of-range 匹配值在指定区间之外的 元素。 3
:in-range input:in-range 匹配值在指定区间之内的 元素。 3
:read-write input:read-write 匹配可读可写的 元素。 3
:optional input:optional 匹配可选输入的 元素。 3
:required input:required 匹配必须输入的 元素。 3
:valid input:valid 匹配输入有效的 元素。 3
:invalid input:invalid 匹配输入无效的 元素。 3

CSS 选择器这么多，都需要掌握吗？多吗，分组去记忆还是很好掌握的，掌握的越多你就越能随心所欲的操纵HTML文档。

上面的选择器只是基础，掌握了上面的内容，只能说明你识字了，至于能不能组成句子，甚至优美的句子还有很大的距离。

记住并使用选择器

如何记住这么多选择器呢？我个人记忆方式是，一是分组，二是使用，在此分享给大家。

基础选择器

类选择器.class，ID选择器#id，通配符选择器*，元素选择器element是四个最基本的选择器，相信你早就记住了。

</>复制代码 
  1. * {
  2.     color: black;
  3. }
  4. a {
  5.     color: blue;
  6. }
  7. .msg {
  8.     color: red;
  9. }
  10. #top {
  11.     background-color: #ff0000;
  12. }
选择器组合

通过使用特定的符号来连接选择器可以实现更加丰富的选择功能。

selector, selector

逗号连接两个或多个选择器实现多选的功能。

</>复制代码 
  1. h1, h2, .title {
  2.     color: black;
  3. }

h1, h2 标签和 class="title" 的元素的字体颜色都设置为黑色。

selector selector

空格直接相连的两个或多个选择器可以实现精确定位的功能。

</>复制代码 
  1. #header h3 {
  2.     color: #fff;
  3. }

ID为header的元素下面的h3元素字体颜色设置为白色。

selector > selector

大于号连接的两个选择器实现父子选择的功能。

HTML文档片段

</>复制代码 
  2.     
    hello,job1...
  3.     
    hello,job2...
  4.     
  5.         
    hi,job3...
  6.     
  8. hi,job4...

CSS样式

</>复制代码 
  1. .info > p {
  2.     background-color: yellow;
  3. }

.info下的所有直接子元素 p(带有hello的段落)背景被设置为黄色，其余的(带有hi的段落，不是子元素或不是直接子元素)不受影响。

selector + selector

加号相连的两个选择器实现同级紧邻的元素选择的功能。

HTML部分文档

</>复制代码 
  1. 欢迎来到我到的主页
  3. 我是唐老鸭。
  5. 我最好的朋友是米老鼠。
  6. 我的样式会改变。

CSS样式

</>复制代码 
  1. div + p + p {
  2.     background-color: yellow;
  3. }

div 紧挨的第一个同级元素 p 是“我最好的朋友是米老鼠。”，然后又一个 + 连着 p 最终选中最后一个 p.

selector ~ selector

波浪线连接的两个选择器实现同级并在其下面所有选择器指定元素的选择功能（好绕，看例子吧）。

HTML文档

</>复制代码 
  1. A div element.
    •   
    • Coffee
    •   
    • Tea
    •   
    • Milk
  3. The first paragraph.
    •   
    • Coffee
    •   
    • Tea
    •   
    • Milk
  5. Another list
    •   
    • Coffee
    •   
    • Tea
    •   
    • Milk

CSS样式

</>复制代码 
  1. p ~ ul{
  2.     background:#ff0000;
  3. }

p 元素同级的 ul 并且 ul 元素是在 p 的下面。

注意：这个是CSS3新增的选择器。

选择器结合

结合的意思嘛，就是连着写在一起呗。

</>复制代码 
  1. div#user {
  2.     color: black;
  3. }
  4. 我是黑色字体

常用的就是 element#id,element.class.

也有一种多类选择器，也算选择器结合

HTML文档

</>复制代码 
  1. This paragraph is very important.
  2. This is a warning.
  3. This paragraph is a very important warning.

CSS样式

</>复制代码 
  1. .important {font-weight: bold;}
  2. .warning {font-style: italic;}
  3. .important.warning {background: silver;}

注意：在 IE7 之前的版本中，不能正确地处理多类选择器。

属性选择器

HTML标签可以定义若干属性，我们可以通过属性选择器进行元素的选取。

注意区分CSS3新增的属性选择器。

[attribute]

选取包含某属性的元素。

</>复制代码 
  1. a[href]

选取包含href属性的a标签。

[attribute=value]

选择某个属性attribute并且属性值为value的元素。

</>复制代码 
  1. .info[ref="good"]
[attribute~=value]

选择某个属性attribute并且属性值中有value这个单词的元素。

这里是指单词，属性值如果是 boy man 则有两个单词。

</>复制代码 
  1. p[class~="man"]
[attribute|=value]

属性起始值为value的元素。

</>复制代码 
  1. p[class|="cls"]

以上是CSS2开始提供的属性选择器，下面的将是CSS3提供的选择器，注意区别使用。

[attribute^=value]

属性值以value开始的元素。

[attribute$=value]

属性值以value结尾的元素。

[attribute*=value]

属性值包含value的元素，不一定是单词哟。

伪类选择器

所谓的伪类，你可以简单的理解为带 : 的选择器。伪类很好理解，一般从名称上就可以知道其作用了。

可以从以下几个方面去记。下面的归类只用来方便记忆，这些选择器并不局限于我所列举的场景。

跟 a 紧密关联的 a:link

所有未被访问的链接。

a:hover

鼠标移动到链接上面。

a:active

鼠标点按在链接上不松开。

a:visited

链接已经点击过。

注意: 为了产生预期的效果，在CSS定义中，尽量采用上面四个的顺序去定义。

:target

是CSS3中新增的选择器，用于标示当前处于活动的锚标记。

HTML文档

</>复制代码 
  1. This is a heading
  2. Jump to New content 1
  3. Jump to New content 2
  4. Click on the links above and the :target selector highlight the current active HTML anchor.
  5. New content 1...
  6. New content 2...

CSS样式

</>复制代码 
  1. :target {
  2.     border: 2px solid #D4D4D4;
  3.     background-color: #e5eecc;
  4. }

当点击锚定位a标签时，相应的锚元素会设置为指定样式。

跟 input 紧密关联的 :focus

选择具有焦点的元素，一般都是输入元素。

除了 :focus 是CSS2开始有的，下面的都是CSS3新增的伪类。

:enabled

可用的输入元素。

:disabled

不可用的输入元素。

</>复制代码 
  1. input[type="text"]:disabled {
  2.     background:#ffffdffffd;
  3. }
:valid

匹配输入合法的元素，例如：email,number等等。

:invalid

不合法的。

</>复制代码 
  1. input:invalid {
  2.     border:2px solid red;
  3. }
:optional

匹配可选输入元素。

:required

匹配设置了“required”的元素。

</>复制代码 
  1. input:required {
  2.     background-color: yellow;
  3. }
:read-write

匹配可读可写的元素。

:read-only

匹配设置了“readonly”的元素。

</>复制代码 
  1. input:read-only {
  2.     background-color: yellow;
  3. }

readonly 和 disabled 可以实现同样的功能，禁止用户输入和更改。

:out-of-range

匹配设置范围且值范围超出范围的元素。

</>复制代码 
  1. input:out-of-range {
  2.     border:2px solid red;
  3. }
:in-range

匹配在设置值范围内的元素。

:checked

匹配被选中的元素。

父子及排序关系相关

先说一下常用于 p 的：

:first-letter

第一个字母，一般用于实现首字母大写。

:first-line

选取第一行。

比较通用的

:before

在元素之前插入内容。

:after

在元素之后插入内容。

示例

</>复制代码 
  1. p:before {
  2.     content:"Read this -";
  3. }

之前之后是指元素内部的前面和后面。

</>复制代码 
  2. ::before
  3. xxxx
  4. ::after

上面几个是CSS1或2开始支持的，下面的除了:first-child 是CSS2开始的，其余的都是CSS3伪类。

:root

选择文档的根元素，基本就是 标签。

:empty

没有任何子级（包括文本内容）的元素。

父子关系伪类有两种，一种是*-type 的，作用于父元素，另一种是*-child的，作用于子元素，还是看例子好理解。

:first-of-type

选取一个元素的父元素的第一个这个元素。

HTML文档

</>复制代码 
  1. This is a heading
  2. The first paragraph.
  3. The second paragraph.
  4. The third paragraph.
  5. The fourth paragraph.

CSS样式

</>复制代码 
  1. p:first-of-type {
  2.     background:#ff0000;
  3. }

第一个 p 标签将被设置背景色。p 的父元素是body,body的第一个p元素被选中。

:last-of-type

这个元素的父元素的最后一个这个元素被选中。

:only-of-type

这个元素的父元素只有一个这个元素，可以有其他元素不影响，唯一的这个元素被选中。

:nth-of-type(n)

这个元素的父元素的第n个元素被选中。

n 可以是一个数字，一个关键字，或者一个公式。

数字：从1开始，代表第一个元素

关键字：奇数 odd 偶数 even

表达式：公式（an+b） a 代表一个循环的大小，n是计数器（从0开始），b是偏移量。

示例

</>复制代码 
  1. tr:nth-of-type(2n+1) {
  2.     background:#ff0000;
  3. }

奇数行（1,3,5,7...）设置背景。

:nth-last-of-type(n)

从后往前计算。

说完 type 该说 child 了。

:first-child

这个是CSS2开始有的伪类选择器，选取这个元素的第一个子元素。

示例

</>复制代码 
  1. ul:first-child {
  2.     color: blue;
  3. }

让ul的第一个li的字体为蓝色。

:last-child

最后一个子元素。

:nth-child(n)

第几个子元素，n配置同上。

:nth-last-child(n)

从后开始找子元素。

还剩下几个，多带带列出来吧。

其他 :lang(language)

选取lang属性的起始值为language的元素。

:not(selector)

选择器的取反，这个很好理解。

示例

</>复制代码 
  1. :not(a) {
  2.     color: black;
  3. }

所有的非a标签。

::selection

匹配元素中被用户选中或处于高亮状态的部分。

示例

</>复制代码 
  1. ::selection {
  2.     color:#ff0000;
  3.     background-color:blue;
  4. }

鼠标拉选中的部分字体设置为红色，背景设置为蓝色。

后续会再跟进和补充一些东西，先发这些吧。

GPU云服务器 云服务器 css选择器 基础选择器css css选择 js css 加载器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111157.html

相关文章

  • WEB前端 CSS

    摘要：后代选择器，儿子选择器，毗邻选择器，弟弟选择器。后代选择器后代选择器标签选择器后跟标签后代，无论直属还是间接直属，直接后代毗邻后代中最近的一个弟弟，找到和自己同级的标签如通过多个选择器好到具体的标签。目录 WEB前端 CSS WEB前端 CSS TOC CSS简介 CSS引入方式 CSS结构 CSS选择器 标签选择...

    darry 评论0 收藏0

  • 编写高效的 CSS 选择器 – CSS魔法

    摘要：最基本的选择器是元素选择器比如选择器比如还有类选择器比如。选择器和类选择器在速度上的差异基本上没有关系。现在我们回到讨论开始的地方，哪类选择器是最高效的哪个是会影响选择器效率的关键选择器写代码的时候，关键选择器是能否高效的决定因素。 高效的CSS已经不是一个新的话题了，也不是我一个非得重拾的话题，但它却是我在工作之时，所感兴趣的，关注已久的话题。 有很多人都忘记了，或在简单的说没有意识...

    forrest23 评论0 收藏0

  • 编写高效的 CSS 选择器 – CSS魔法

    摘要：最基本的选择器是元素选择器比如选择器比如还有类选择器比如。选择器和类选择器在速度上的差异基本上没有关系。现在我们回到讨论开始的地方，哪类选择器是最高效的哪个是会影响选择器效率的关键选择器写代码的时候，关键选择器是能否高效的决定因素。 高效的CSS已经不是一个新的话题了，也不是我一个非得重拾的话题，但它却是我在工作之时，所感兴趣的，关注已久的话题。 有很多人都忘记了，或在简单的说没有意识...

    hyuan 评论0 收藏0

  • 前端面试题-CSS选择器性能优化

    摘要：不要在编写规则时用标签名或类名不要在编写规则时用标签名把多层标签选择规则用规则替换，减少查找避免使用子选择器后代选择器在中是最昂贵的选择器。如果你关心页面性能的话，他们真不该被使用扩展阅读前端面试题选择器前端面试题优先级 一、CSS选择符 CSS选择符由一些初始化参数组成，这些参数指明了要应用这个CSS规则的页面元素。 作为一个网站的前端开发工程师，应该避免编写一些常见的开销很大的CS...

    Scott 评论0 收藏0

  • 前端面试题-CSS选择器性能优化

    摘要：不要在编写规则时用标签名或类名不要在编写规则时用标签名把多层标签选择规则用规则替换，减少查找避免使用子选择器后代选择器在中是最昂贵的选择器。如果你关心页面性能的话，他们真不该被使用扩展阅读前端面试题选择器前端面试题优先级 一、CSS选择符 CSS选择符由一些初始化参数组成，这些参数指明了要应用这个CSS规则的页面元素。 作为一个网站的前端开发工程师，应该避免编写一些常见的开销很大的CS...

    XGBCCC 评论0 收藏0

发表评论

登陆后可评论

0条评论

cnio

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<