CSS选择器(翻译)

原文链接
在CSS中，当我们想要给自己的网页添加样式的时候，选择器用于选择其中的HTML标签元素。很多CSS选择器都是可以使用的，当我们选择一个元素要给它样式的时候，可以做到更细粒度的精确。在这篇文章以及子章节中，我们将详细地罗列出各种不同类型的CSS选择器，看看他们是怎么工作的。

什么是选择器？

你已经看过选择器了。一个CSS选择器是CSS规则的第一部分。是一种元素和符号连接器的形式，告诉浏览器哪些HTML元素希望被选择到且利用CSS规则给它CSS的属性值，让CSS规则在这些元素上生效。一个或者多个元素被选择器选中后，被称为选择器的主体。

在之前的文章中，你可能看过不同的选择器了，也学习到他们都是选择器，选择器可以使用不同的方法定位文档。比如要选择一个h1，或者一个 .special这样的类名。

在CSS中，选择器被CSS选择规范所定义；像CSS其他模块一样，他们需要浏览器的支持才能生效。绝大部分你后面遇到的选择器都被定义在选择器规范3中，规范3是一个成熟的规范了，因此你要找到合适的浏览器支持这些选择器。

选择器列表

如果你有一个以上都要使用相同的CSS的话，你可以合并成一个选择器list这样这些CSS规则会被运用到每个选择器上。比如，我想要h1和类名是.special的都使用相同的样式规则，我可以写两条CSS规则。

h1 {
  color: blue;
}

.special {
  color: blue;
} 

我也可以合并它们到一个选择器列表里，在她们中间加一个逗号。

h1, .special {
  color: blue;
} 

在逗号前面和后面的空格都是有用的。你可以发现如果每个选择器都另起一行的话，代码会更可读。

h1,
.special {
  color: blue;
} 

在下面这个例子中，尝试将两个选择器合并起来，它们都有不同的声明。图片显示它们合并之后是一样的效果。

span {
    background-color: yellow;
}

strong {
    color: rebeccapurple;
}

em {
    color: rebeccapurple;
}

<h1>Type selectors</h1>
<p>Veggies es bonus vobis, proinde vos postulo essum magis <span>kohlrabi welsh onion</span> daikon amaranth tatsoi tomatillo
    melon azuki bean garlic.</p>

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

<p>Turnip greens yarrow ricebean rutabaga <em>endive cauliflower</em> sea lettuce kohlrabi amaranth water spinach avocado
    daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach
</p>

当你要像上面一样把这些选择器组合一起的时候，其中的任何一个是无效的话，其他都会被忽略。

在接下来的例子中，..special这个无效的类名会让CSS规则被忽视，也就是说只有h1的样式是生效的。

h1 {
  color: blue;
}

..special {
  color: blue;
} 

无论如何，如果把它们合并的话，无论是h1还是这个类都不会有样式，因为整条CSS规则都被认为是无效的。

h1, ..special {
  color: blue;
} 

选择器类型

有很多不同种类的选择器，知道哪种类型是你需要的可能会帮助你在工作中游刃有余。在这个文章的子章节中，我们将来了解不同种类的选择器的信息。

元素类型、类和ID选择器

这里面包含了像h1这样的HTML元素。

h1 { }

当然也包含了类选择器

.box { }

还有ID选择器

#unique { }

属性选择器

属性选择器让你基于元素上某些显式的属性更灵活地去选择一个元素.

a[title] { }

设置基于一些具体的值去做选择

a[href="https://example.com"] { }

伪类和伪元素

这里包含了伪类,代表着一个元素的某种状态. :hover这样的伪类代表着当鼠标悬浮的时候样式才生效.

a:hover { }

另一个是伪元素,它选择的不是元素本身,而是元素的某一部分.比如::first-line永远选择的元素中的第一行文字(比如下面的p标签),像是一个span包裹着第一行的文字,被选择了.

p::first-line { }

连接符

最后一种模式的选择器,合并了其他的选择器,为了在我们文档中选择元素.比如下面例子中,选择的p标签是<article>元素的第一层级孩子,所以使用了子代连接符>:

article > p { }

接下来

你可以看看下面的表格里面关于选择器的定义,每一条都可以直接链接到MDN官网的关于这个选择器介绍的网页上，或者你可以继续你的学习之旅，学习关于元素类和ID选择器.

选择器表格引用

这个表格可以给你一个直观的介绍,那些你可能用得上的选择器.链接的网页会告诉你如何使用不同的选择器.我也在MDN上在每种选择器的链接的网页加了内容,这样你可以检查所有浏览器的支持情况,你可以当作一个引用材料,当你觉得需要查看一下选择器的时候,或者你平常在体验CSS的时候.

Selector	Example	Learn CSS tutorial
Type selector	h1 {  }	Type selectors
Universal selector	* {  }	The universal selector
Class selector	.box {  }	Class selectors
id selector	#unique { }	ID selectors
Attribute selector	a[title] {  }	Attribute selectors
Pseudo-class selectors	p:first-child { }	Pseudo-classes
Pseudo-element selectors	p::first-line { }	Pseudo-elements
Descendant combinator	article p	Descendant combinator
Child combinator	article > p	Child combinator
Adjacent sibling combinator	h1 + p	Adjacent sibling
General sibling combinator	h1 ~ p	General sibling