html中vegetable选择器,CSS选择器总结

8种机械键盘轴体对比

本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？

在CSS中，选择器用于定位我们想要样式化的网页HTML 元素。各种各样可用的CSS选择器允许我们精确选择要样式化的元素。在接下来的几篇文章中，我们将详细介绍不同类型的选择器，看看它们是如何工作的。

基于元素的类型或class或id，直接匹配文档的一个或多个元素。

元素选择器1

2

3p {

color: red;

}

类选择器

类选择器由一个点“.”以及类后面的类名组成。类名是在HTML class文档元素属性中没有空格的任何值。由你自己选择一个名字。同样值得一提的是，文档中的多个元素可以具有相同的类名，而单个元素可以有多个类名(以空格分开多个类名的形式书写)。

HTML1

Create an HTML document

CSS1

2

3.first {

font-weight: bold;

}

ID选择器1

2

3#polite {

font-family: cursive;

}

通用选择器

使用通用选择时小心。因为它适用于所有的元素，在大型网页利用它可以对性能有明显的影响：网页可以显示比预期要慢。大多数情况下，你都不会使用这个选择器。1

2

3

4

5* {

padding: 5px;

border: 1px solid black;

background: rgba(255,0,0,0.25)

}

属性选择器

属性选择器是一种特殊类型的选择器，它根据元素的 属性和属性值来匹配元素。它们的通用语法由方括号([]) 组成，其中包含属性名称，后跟可选条件以匹配属性的值。 属性选择器可以根据其匹配属性值的方式分为两类： 存在和值属性选择器和子串值属性选择器。

存在和值(Presence and value)属性选择器

这些属性选择器尝试匹配精确的属性值：[attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。

[attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。

[attr~=val]：该选择器仅选择具有 attr 属性的元素，而且要求 val 值是 attr 值包含的被空格分隔的取值列表里中的一个时(以空格间隔出多个值)的。

HTML1

2

Red pepperChicken

CSS1

2

3

4

5

6

7

8

9[data-vegetable] {

color: green

}

[data-vegetable="liquid"] {

background-color: goldenrod;

}

[data-vegetable~="spicy"] {

color: red;

}

##子串值(Substring value)属性选择器

这种情况的属性选择器也被称为“伪正则选择器”，因为它们提供类似 regular expression 的灵活匹配方式(但请注意，这些选择器并不是真正的正则表达式)：

[attr|=val] : 选择attr属性的值是 val 或值以 val- 开头的元素(注意，这里的 “-” 不是一个错误，这是用来处理语言编码的)。

[attr^=val] : 选择attr属性的值以 val 开头(包括 val)的元素。

[attr$=val] : 选择attr属性的值以 val 结尾(包括 val)的元素。

[attr*=val] : 选择attr属性的值中包含子字符串 val 的元素(一个子字符串就是一个字符串的一部分而已，例如，”cat“ 是 字符串 ”caterpillar“ 的子字符串)。

伪类和伪元素

伪类

一个 CSS 伪类(pseudo-class) 是一个以冒号(:)作为前缀，被添加到一个选择器末尾的关键字，当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类(pseudo-class)。你可能希望某个元素在处于某种状态下呈现另一种样式，例如当鼠标悬停在元素上面时，或者当一个复选框被禁用或被勾选时，又或者当一个元素是它在 DOM 树中父元素的第一个孩子元素时。1

2

3

4

5

6a:hover,

a:active,

a:focus {

color: darkred;

text-decoration: none;

}

伪元素

伪元素(Pseudo-element)跟伪类很像，但它们又有不同的地方。它们都是关键字，但这次伪元素前缀是两个冒号 (::) ， 同样是添加到选择器后面去选择某个元素的某个部分。

::after

::before

::first-letter

::first-line

::selection

::backdrop

例子

html1

2

3

4

• CSS defined in the MDN glossary.
• HTML defined in the MDN glossary.

CSS1

2

3[href^=http]::after {

content: '⤴';

}

#组合器和多用选择器

虽然一次使用一个选择器就很有用，但在某些情形中却可能效率低下。 CSS选择器在你开始组合他们进行细粒度选择的时候变得更具使用价值。基于元素之间的相互关联关系，CSS提供了几种方法来对元素进行选择。下表使用连接符展示了这些关联关系(A和B代表前文所述的任意选择器):CombinatorsSelectA,B匹配满足A(和/或)B的任意元素(参见下方 同一规则集上的多个选择器).

A B匹配任意元素，满足条件：B是A的后代结点(B是A的子节点，或者A的子节点的子节点)

A > B匹配任意元素，满足条件：B是A的直接子节点

A + B匹配任意元素，满足条件：B是A的下一个兄弟节点(AB有相同的父结点，并且B紧跟在A的后面)

A ~ B匹配任意元素，满足条件：B是A之后的兄弟节点中的任意一个(AB有相同的父节点，B在A之后，但不一定是紧挨着A)