:CSS选择器-知识库免费ppt模版下载-道格办公
投稿
  1. JustNews首页
  2. 知识库
  3. CSS选择器

CSS选择器

作者: 道格办公 • • 知识库 • 浏览量 636

同时列在一起，用逗号分隔。例如： ``` h1, h2, h3 { color: red; } ``` 上述代码中，选择器列表包含了 `h1`、`h2` 和 `h3`。它们都会应用相同的样式规则，即将文本颜色设为红色。 2 类选择器 类选择器允许你为一个或多个元素指定相同的样式。类选择器以一个点号开头，后面紧跟着类名。例如： ``` .highlight { background-color: yellow; } ``` 上述代码中，`.highlight` 是一个类选择器，所有使用这

CSS选择器

CSS中使用选择器来指定网页上我们想要格式化的HTML元素。

1 选择器列表

如果有多个使用相同样式的CSS选择器，那么这些选择器可以被编排为一个列表。

h1 {
  color: blue;
}

.special {
  color: blue;
}

以上两个标签使用了同样的样式可以写成两个分开的规则，也可以则合起来，在他们之间加上逗号即可组成为一个选择器列表。

h1, .special {
  color: blue;
}

注意：在使用选择器列表时，如果任何一个选择器无效（存在语法错误）那么整条规则都会被疏略。

2 选择器种类

标签选择器 h1 { } html标签
通配选择器 * { } 选择所有元素
类选择器 .box { } 类选择器
ID 选择器 #unique { } 标签选择器
标签属性选择器 a[title] { } 根据标签一个元素上某个标签的属性的存在选择元素
伪类选择器 a:hover {} 表示一个元素的特定的状态  (在鼠标指针悬浮到一个元素上的时候选择这个元素)
伪元素选择器 p::first-line { } 选择一个元素的某个部分而不是元素自己 (::first-line是会选择一个元素（下面的情况中是<p>）中的第一行)
后代选择器 article p （通常用单个空格（' '）字符表示）组合了两个选择器，如果第二个选择器匹配的元素具有与第一个选择器匹配的祖先（父母，父母的父母，父母的父母的父母等）元素，则它们将被选择。
子代选择器 article > p 当使用 > 选择符分隔两个元素时，它只会匹配那些作为第一个元素的**直接后代 (**子元素) 的第二元素。与之相比，当两个元素由 后代选择器 相连时，它表示匹配存在的所有由第一个元素作为祖先元素 (但不一定是父元素) 的第二个元素，无论它在 DOM 中'跳跃' 多少次。
相邻兄弟选择器 h1 + p 介于两个选择器之间，当第二个元素紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。
通用兄弟选择器 h1 ~ p 兄弟选择符，位置无须紧邻，只须同层级，A~B 选择A元素之后所有同层级B元素。

2.1 标签、类和 ID 选择器

类型选择器有时也叫做“标签名选择器”或者是”元素选择器“，因为它在文档中选择了一个 HTML 标签/元素的缘故。

类选择器以一个句点（.）开头，会选择文档中应用了这个类的所有元素。

ID 选择器开头为#而非句点，和类选择器是同种用法。

2.1.1 全局选择器

全局选择器，是由一个星号（*）代指的，它选中了文档中的所有内容（或者是父元素中的所有内容。

更易读的全局选择器， 例如：

如果我想选中任何<article>元素的第一子元素，不论它是什么元素，都给它加粗。

article :first-child {
}

这看起来可能会和 为元素选择器混淆

article:first-child

为了避免这种混淆，我们可以向:first-child选择器加入全局选择器，这样选择器所做的事情很容易就能看懂。选择器正选中<article>元素的任何第一子元素：

article *:first-child {
}

2.2 属性选择器

选择器 示例 描述
[attr] a[title] 匹配带有一个名为attr的属性的元素——方括号里的值。
[attr=value] a[href='https://example.com'] 匹配带有一个名为attr的属性的元素，其值正为value——引号中的字符串。
[attr~=value] p[class~='special'] 匹配带有一个名为attr的属性的元素，其值正为value，或者匹配带有一个attr属性的元素，其值有一个或者更多，至少有一个和value匹配。注意，在一列中的好几个值，是用空格隔开的。
`[attr =value]` `div[lang

2.2.1 字符串匹配选择器

选择器 示例 描述
[attr^=value] li[class^='box-'] 匹配带有一个名为attr的属性的元素，其值开头为value子字符串。
[attr$=value] li[class$='-box'] 匹配带有一个名为attr的属性的元素，其值结尾为value子字符串
[attr*=value] li[class*='box'] 匹配带有一个名为attr的属性的元素，其值的字符串中的任何地方，至少出现了一次value子字符串。

如果你想在大小写不敏感的情况下，匹配属性值的话，你可以在闭合括号之前，使用i值。这个标记告诉浏览器，要以大小写不敏感的方式匹配 ASCII 字符。没有了这个标记的话，值会按照文档语言对大小写的处理方式进行匹配，在HTML中是大小写敏感的。

li[class^='a' i] {
    color: red;
}

<h1>Case-insensitivity</h1>
<ul>
    <li class='a'>Item 1</li>
    <li class='A'>Item 2</li>
    <li class='Ab'>Item 3</li>
</ul>

2.3 伪类伪元素选择器

2.3.1 伪类选择器

它用于选择处于特定状态的元素，比如当它们是这一类型的第一个元素时，或者是当鼠标指针悬浮在元素上面的时候。伪元素开头为双单冒号:。

应用案例：

比如要让某个文章的第一段加粗，字体变大。

.first {
    font-size: 120%;
    font-weight: bold;
} 
<article>
    <p class='first'>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
            melon azuki bean garlic.</p>

    <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
            greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
</article>

使用以上样式的确可以实现需求，但是此时文章开头又加入了一段话，就需要将 class='first'改到第一段，比较麻烦。此时就可以使用伪类选择器class='first'。

article p:first-child {
    font-size: 120%;
    font-weight: bold;
}   
<article>
    <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
            melon azuki bean garlic.</p>

    <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
            greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
</article>

这样始终能够保持article下面第一个标签样式被加粗字体变大。

此外还有其他的几个伪类选择器

  • :last-child 父元素的最后一个元素。
  • :only-child 匹配没有任何兄弟元素的元素。等效的选择器还可以写成 :first-child:last-child或者:nth-child(1):nth-last-child(1),当然，前者的权重会低一点。
  • :invalid 表示任意内容未通过验证的 input或其他 form 元素， 这个伪类对于突出显示用户的字段错误非常有用。

用户行为伪类也叫做动态伪类。表现形式为像是一个类在用户和元素交互的时候加到了元素上一样。

  • :hover——上面提到过，只会在用户将指针挪到元素上的时候才会激活，一般就是链接元素。
  • :focus——只会在用户使用键盘控制，选定元素的时候激活。
常见的伪类类型
选择器 描述
:active 在用户激活（例如点击）元素的时候匹配。
:any-link 匹配一个链接的:link和:visited状态。
:blank 匹配空输入值的``元素。
:checked 匹配处于选中状态的单选或者复选框。
:current 匹配正在展示的元素，或者其上级元素。
:default 匹配一组相似的元素中默认的一个或者更多的 UI 元素。
:dir 基于其方向性（HTMLdir属性或者 CSSdirection属性的值）匹配一个元素。
:disabled 匹配处于关闭状态的用户界面元素
:empty 匹配除了可能存在的空格外，没有子元素的元素。
:enabled 匹配处于开启状态的用户界面元素。
:first 匹配分页媒体的第一页。
:first-child 匹配兄弟元素中的第一个元素。
:first-of-type 匹配兄弟元素中第一个某种类型的元素。
:focus 当一个元素有焦点的时候匹配。
:focus-visible 当元素有焦点，且焦点对用户可见的时候匹配。
:focus-within 匹配有焦点的元素，以及子代元素有焦点的元素。
:future 匹配当前元素之后的元素。
:hover 当用户悬浮到一个元素之上的时候匹配。
:indeterminate 匹配未定态值的 UI 元素，通常为复选框。
:in-range 用一个区间匹配元素，当值处于区间之内时匹配。
:invalid 匹配诸如<input>的位于不可用状态的元素。
:lang 基于语言（HTMLlang属性的值）匹配元素。
:last-child 匹配兄弟元素中最末的那个元素。
:last-of-type 匹配兄弟元素中最后一个某种类型的元素。
:left 在分页媒体 中，匹配左手边的页。
:link 匹配未曾访问的链接。
:local-link 匹配指向和当前文档同一网站页面的链接。
:is() 匹配传入的选择器列表中的任何选择器。
:not 匹配作为值传入自身的选择器未匹配的物件。
:nth-child 匹配一列兄弟元素中的元素——兄弟元素按照an+b形式的式子进行匹配（比如 2n+1 匹配元素 1、3、5、7 等。即所有的奇数个）。
:nth-of-type 匹配某种类型的一列兄弟元素（比如，<p>元素）——兄弟元素按照an+b形式的式子进行匹配（比如 2n+1 匹配元素 1、3、5、7 等。即所有的奇数个）。
:nth-last-child 匹配一列兄弟元素，从后往前倒数。兄弟元素按照an+b形式的式子进行匹配（比如 2n+1 匹配按照顺序来的最后一个元素，然后往前两个，再往前两个，诸如此类。从后往前数的所有奇数个）。
:nth-last-of-type 匹配某种类型的一列兄弟元素（比如，<p>元素），从后往前倒数。兄弟元素按照an+b形式的式子进行匹配（比如 2n+1 匹配按照顺序来的最后一个元素，然后往前两个，再往前两个，诸如此类。从后往前数的所有奇数个）。
:only-child 匹配没有兄弟元素的元素。
:only-of-type 匹配兄弟元素中某类型仅有的元素。
:optional 匹配不是必填的 form 元素。
:out-of-range 按区间匹配元素，当值不在区间内的的时候匹配。
:past 匹配当前元素之前的元素。
:placeholder-shown 匹配显示占位文字的 input 元素。
:playing 匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“播放”的元素。
:paused 匹配代表音频、视频或者相似的能“播放”或者“暂停”的资源的，且正在“暂停”的元素。
:read-only 匹配用户不可更改的元素。
:read-write 匹配用户可更改的元素。
:required 匹配必填的 form 元素。
:right 在分页媒体 中，匹配右手边的页。
:root 匹配文档的根元素。
:scope 匹配任何为参考点元素的的元素。
:valid 匹配诸如<input>元素的处于可用状态的元素。
:target 匹配当前 URL 目标的元素（例如如果它有一个匹配当前URL 分段的元素）。
:visited 匹配已访问链接。

2.3.2 伪元素选择器

伪元素和伪类的形式差不多，但是是表现得像往标记文本中加入全新的 HTML 元素一样，伪元素开头为双冒号::。

应用案例：

比如要让某个文章的第一行字体加粗，变大。

如果用span来实现，当无法知道屏幕的大小，或者字体大小的时候就无法准确选择第一行，所以伪元素选择器就可以完全很好的实现这一样式。

article p::first-line {
    font-size: 120%;
    font-weight: bold;
} 
<article>
    <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
            melon azuki bean garlic.</p>

    <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
            greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
</article>

特别的伪元素 ::before和::after和cotent属性一起使用，使用CSS将内容插入到你的文档中。

.box::before {
    content: 'This should show before the other content.'
}   
<p class='box'>Content in the box in my HTML page.</p>

这些伪元素并不会在 Web 浏览器上经常这么做，更推荐的用法是插入一些图标，作为一个视觉性的提示，或者插入一个空字符串，并设计他的样式，使其成为一个视觉的性的提示。

常见的伪元素类型
选择器 描述
::after 匹配出现在原有元素的实际内容之后的一个可样式化元素。
::before 匹配出现在原有元素的实际内容之前的一个可样式化元素。
::first-letter 匹配元素的第一个字母。
::first-line 匹配包含此伪元素的元素的第一行。
::grammar-error 匹配文档中包含了浏览器标记的语法错误的那部分。
::selection 匹配文档中被选择的那部分。
::spelling-error 匹配文档中包含了浏览器标记的拼写错误的那部分。

2.4 关系选择器

关系选择器都是针对于第二个元素。

2.4.1 后代选择器

使用空格隔开（“ ”），组合两个选择器，比如第二个选择器的元素被选择，且其余的相同元素都和第二个选择器有同一个祖先的都会被选择。（不管多少代都会被选择）

.box p {
    color: red;
}  
<div class='box'>
    <p>Text in .box</p>
    <div class='box2'>
        <p>Text in .box2</p>
    </div>
    <p>Text in .box</p>
</div>
<p>Text not in .box</p>

2.4.2 子代关系选择器

子代关系选择器是个大于号（>），只会在选择器选中直接子元素的时候匹配。（只选择第一代的所有相同元素）

2.4.3 邻接兄弟选择器

邻接兄弟选择器（+）用来选中恰好处于另一个在继承关系上同级的元素旁边的元素。

比如要设置紧跟h1的p标签，设计样式，如果在他们之间再加一个其他的标签，就无法应用样式。

h1 + p {
    font-weight: bold;
    background-color: #333;
    color: #fff;
    padding: .5em;
} 
<article>
    <h1>A heading</h1>
    <!--<h2>哈哈哈</h2>-->
    <p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
        melon azuki bean garlic.</p>

    <p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
        greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
</article>

2.4.4 通用兄弟选择器

选中一个标签的兄弟标签，即使它们不直接相邻，你还是可以使用通用兄弟关系选择器（~）

h1 ~ p {
    font-weight: bold;
    background-color: #333;
    color: #fff;
    padding: .5em;
}
<article>
    <h1>A heading</h1>
    <p>I am a paragraph.</p>
    <div>I am a div</div>
    <p>I am another paragraph.</p>
</article>

使用关系选择器可以将以上任意选择器组合起来，达到选择某个元素的目的。

文章为用户上传，仅供非商业浏览。发布者：Lomu，转转请注明出处： https://www.daogebangong.com/articles/detail/CSS%20selector.html

赞 (810)
打赏 支付宝扫一扫 支付宝扫一扫
Lomu RPG饼干 专栏作者
48 196
single-end

相关推荐