css选择器_CSS选择器

css选择器

CSS选择器简介 (Introducing CSS Selectors)

A CSS selector is the part of a CSS rule set that actually selects the content you want to style. Let’s look at all the different kinds of selectors available, with a brief description of each.

CSS选择器是CSS规则集的一部分，它实际上选择要设置样式的内容。 让我们看一下所有可用的选择器，并对每个选择器进行简要说明。

通用选择器 (Universal Selector)

The universal selector works like a wild card character, selecting all elements on a page. Every HTML page is built on content placed within HTML tags. Each set of tags represents an element on the page. Look at the following CSS example, which uses the universal selector:

通用选择器的作用就像通配符，它​​可以选择页面上的所有元素。 每个HTML页面都基于放置在HTML标签内的内容。 每组标签代表页面上的一个元素。 看下面CSS示例，它使用通用选择器：

* {
   color: green;
   font-size: 20px;
   line-height: 25px;
}

The three lines of code inside the curly braces (color, font-size, and line-height) will apply to all elements on the HTML page. As seen here, the universal selector is declared using an asterisk. You can also use the universal selector in combination with other selectors.

大括号内的三行代码( color ， font-size和line-height )将应用于HTML页面上的所有元素。 如此处所示，通用选择器使用星号声明。 您也可以将通用选择器与其他选择器结合使用。

元素类型选择器 (Element Type Selector)

Also referred to simply as a “type selector,” this selector must match one or more HTML elements of the same name. Thus, a selector of nav would match all HTML nav elements, and a selector of <ul> would match all HTML unordered lists, or <ul> elements.

也称为“类型选择器”，此选择器必须与一个或多个相同名称HTML元素匹配。 因此，nav的选择器将匹配所有HTML nav元素，而<ul>的选择器将匹配所有HTML无序列表或<ul>元素。

The following example uses an element type selector to match all <ul> elements:

以下示例使用元素类型选择器来匹配所有<ul>元素：

ul {
   list-style: none;
   border: solid 1px #ccc;
}

To put this in some context, here’s a section of HTML to which we’ll apply the above CSS:

为了说明这一点，下面是我们将应用上述CSSHTML部分：

<ul>
  <li>Fish</li>
  <li>Apples</li>
  <li>Cheese</li>
</ul>

<div class="example">
  <p>Example paragraph text.</p>
</div>

<ul>
  <li>Water</li>
  <li>Juice</li>
  <li>Maple Syrup</li>
</ul>

There are three main elements making up this part of the page: Two <ul> elements and a <div>. The CSS will apply only to the two <ul> elements, and not to the <div>. Were we to change the element type selector to use <div> instead of <ul>, then the styles would apply to the <div> and not to the two <ul> elements.

该页面的这一部分包含三个主要元素：两个<ul>元素和一个<div> 。 CSS仅适用于两个<ul>元素，不适用于<div> 。 如果我们将元素类型选择器更改为使用<div>而不是<ul> ，则样式将应用于<div>而不是两个<ul>元素。

Also note that the styles will not apply to the elements inside the <ul> or <div> elements. That being said, some of the styles may be inherited by those inner elements.

还要注意，样式将不适用于<ul>或<div>元素内的元素。 话虽如此，某些样式可能是那些内部元素所继承的。

ID选择器 (ID Selector)

An ID selector is declared using a hash, or pound symbol (#) preceding a string of characters. The string of characters is defined by the developer. This selector matches any HTML element that has an ID attribute with the same value as that of the selector, but minus the hash symbol.

ID选择器使用在字符串前面的井号或井号( # )声明。 字符串由开发人员定义。 该选择器匹配具有ID属性的任何HTML元素，该属性具有与选择器相同的值，但减去哈希符号。

Here’s an example:

这是一个例子：

#container {
   width: 960px;
   margin: 0 auto;
}

This CSS uses an ID selector to match an HTML element such as:

该CSS使用ID选择器来匹配HTML元素，例如：

<div id="container"></div>

In this case, the fact that this is a <div> element doesn’t matter—it could be any kind of HTML element. As long as it has an ID attribute with a value of container, the styles will apply.

在这种情况下，这是<div>元素的事实无关紧要-它可以是任何种类HTML元素。 只要它具有ID属性且值为container ，就将应用样式。

An ID element on a web page should be unique. That is, there should only be a single element on any given page with an ID of container. This makes the ID selector quite inflexible, because the styles used in the ID selector rule set can be used only once per page.

网页上的ID元素应该是唯一的。 也就是说，任何给定页面上的ID只能为单个元素container 。 这使ID选择器非常不灵活，因为ID选择器规则集中使用的样式每页只能使用一次。

If there happens to be more than one element on the page with the same ID, the styles will still apply, but the HTML on such a page would be invalid from a technical standpoint, so you’ll want to avoid doing this.

如果页面上有多个具有相同ID的元素，则样式仍将适用，但是从技术角度来看，此类页面上HTML无效，因此您将避免这样做。

In addition to the problems of inflexibility, ID selectors also have the problem of very high specificity.

除了不灵活性的问题之外，ID选择器还具有很高的特异性问题。

类选择器 (Class Selector)

The class selector is the most useful of all CSS selectors. It’s declared with a dot preceding a string of one or more characters. Just as is the case with an ID selector, this string of characters is defined by the developer. The class selector also matches all elements on the page that have their class attribute set to the same value as the class, minus the dot.

类选择器是所有CSS选择器中最有用的。 在一个或多个字符的字符串前面加一个点来声明。 与ID选择器一样，此字符串由开发人员定义。 类选择器还匹配页面上所有其class属性设置为与该类相同的值(减去点)的元素。

Take the following rule set:

采取以下规则集：

.box {
   padding: 20px;
   margin: 10px;
   width: 240px;
}

These styles will apply to the following HTML element:

这些样式将适用于以下HTML元素：

<div class="box"></div>

The same styles will also apply to any other HTML elements that have a class attribute with a value of box. Having multiple elements on a single page with the same class attribute is beneficial, because it allows you to reuse styles, and avoid needless repetition. In addition to this, class selectors have very low specificity—again, more on this later.

相同的样式也将应用于具有class属性值为box任何其他HTML元素。 在单个页面上具有相同class属性的多个元素是有好处的，因为它使您可以重用样式，并避免不必要的重复。 除此之外，类选择器的特异性很低-再次在后面介绍。

Another reason the class selector is a valuable ally is that HTML allows multiple classes to be added to a single element. This is done by separating the classes in the HTML class attribute using spaces. Here’s an example:

类选择器是有价值的盟友的另一个原因是HTML允许将多个类添加到单个元素。 这是通过使用空格分隔HTML类属性中的类来完成的。 这是一个例子：

<div class=”box box-more box-extended”></div>

后代组合器 (Descendant Combinator)

The descendant selector or, more accurately, the descendant combinator lets you combine two or more selectors so you can be more specific in your selection method. For example:

后代选择器，或更准确地说，后代组合器可让您组合两个或多个选择器，因此您可以在选择方法上更加具体。 例如：

#container .box {
   float: left;
   padding-bottom: 15px;
}

This declaration block will apply to all elements that have a class of box that are inside an element with an ID of container. It’s worth noting that the .box element doesn’t have to be an immediate child: there could be another element wrapping .box, and the styles would still apply.

此声明块将应用于具有框类的所有元素，这些元素位于具有ID为container的元素内部。 值得注意的是， .box元素不必是直接子元素：可能还有另一个包装.box元素，样式仍然适用。

Look at the following HTML:

查看以下HTML：

<div id="container">
  <div class="box"></div>

  <div class="box-2"></div>
</div>

<div class="box"></div>

If we apply the CSS in the previous example to this section of HTML, the only element that’ll be affected by those styles is the first <div> element that has a class of box. The <div> element that has a class of box-2 won’t be affected by the styles. Similarly, the second <div> element with a class of box won’t be affected because it’s not inside an element with an ID of container.

如果我们将前面示例中CSS应用于HTML的这一部分，则唯一会受到这些样式影响的元素是第一个具有box类的<div>元素。 具有box-2类的<div>元素不会受到样式的影响。 同样，第二个具有box类的<div>元素也不会受到影响，因为它不在ID为container的元素内。

You should be careful when using the descendant combinator in your CSS. This kind of selector, while making your CSS a little easier to read, can unnecessarily restrict your styles to a specific context—in this case, the styles are restricted to boxes inside of #container—which can make your code inflexible.

在CSS中使用后代组合器时应格外小心。 这种选择器可以使CSS更加易于阅读，但不必要地将您的样式限制为特定的上下文(在这种情况下，样式仅限于#container内部的框)，这会使您的代码不灵活。

儿童组合器 (Child Combinator)

A selector that uses the child combinator is similar to a selector that uses a descendant combinator, except it only targets immediate child elements:

使用child组合器的选择器类似于使用后代组合器的选择器，不同之处在于它仅针对直接child元素：

#container > .box {
   float: left;
   padding-bottom: 15px;
}

This is the same code from the descendant combinator example, but instead of a space character, we’re using the greater-than symbol (or right angle bracket.)

这与后代组合器示例中的代码相同，但是我们使用大于号(或直角括号)代替空格字符。

In this example, the selector will match all elements that have a class of box and that are immediate children of the #container element. That means, unlike the descendant combinator, there can’t be another element wrapping .box—it has to be a direct child element.

在此示例中，选择器将匹配所有具有box类并且是#container元素的直接子元素的元素。 这意味着，与后代组合器不同，没有其他元素可以包装.box它必须是直接子元素。

Here’s an HTML example:

这是一个HTML示例：

<div id="container">
  <div class="box"></div>

  <div>
    <div class="box"></div>
  </div>
</div>

In this example, the CSS from the previous code example will apply only to the first <div> element that has a class of box. As you can see, the second <div> element with a class of box is inside another <div> element. As a result, the styles will not apply to that element, even though it too has a class of box.

在此示例中，上一个代码示例中CSS将仅应用于具有box类的第一个<div>元素。 正如可以看到，在第二<div>一类的元件box是另一个内<div>元素。 结果，即使元素也具有box类，样式也不会应用于该元素。

Again, selectors that use this combinator can be somewhat restricting, but they can come in handy—for example, when styling nested lists.

同样，使用此组合器的选择器可能会有所限制，但它们会派上用场-例如，在样式化嵌套列表时。

普通同级组合器 (General Sibling Combinator)

A selector that uses a general sibling combinator matches elements based on sibling relationships. That is to say, the selected elements are beside each other in the HTML.

使用通用同级组合器的选择器根据同级关系匹配元素。 也就是说，所选元素在HTML中彼此相邻。

h2 ~ p {
   margin-bottom: 20px;
}

This type of selector is declared using the tilde character (~). In this example, all paragraph elements (<p>) will be styled with the specified rules, but only if they are siblings of <h2> elements. There could be other elements in between the <h2> and <p>, and the styles would still apply.

使用波浪号(〜)声明这种选择器。 在此示例中，所有段落元素( <p> )都将使用指定的规则设置样式，但前提是它们是<h2>元素的同级元素。 在<h2>和<p>之间可能还有其他元素，并且样式仍然适用。

Let’s apply the CSS from above to the following HTML:

让我们将CSS从上方应用到以下HTML：

<h2>Title</h2>
<p>Paragraph example.</p>
<p>Paragraph example.</p>
<p>Paragraph example.</p>
<div class="box">
  <p>Paragraph example.</p>
</div>

In this example, the styles will apply only to the first three paragraph elements. The last paragraph element is not a sibling of the <h2> element because it sits inside the <div> element.

在此示例中，样式将仅应用于前三个段落元素。 最后一个段落元素不是<h2>元素的同级元素，因为它位于<div>元素内。

相邻兄弟组合器 (Adjacent Sibling Combinator)

A selector that uses the adjacent sibling combinator uses the plus symbol (+), and is almost the same as the general sibling selector. The difference is that the targeted element must be an immediate sibling, not just a general sibling. Let’s see what the CSS code for this looks like:

使用相邻兄弟组合器的选择器使用加号(+)，并且与常规兄弟选择器几乎相同。 不同之处在于，目标元素必须是直接同级，而不仅仅是普通同级。 让我们看看它CSS代码是什么样的：

p + p {
   text-indent: 1.5em;
   margin-bottom: 0;
}

This example will apply the specified styles only to paragraph elements that immediately follow other paragraph elements. This means the first paragraph element on a page would not receive these styles. Also, if another element appeared between two paragraphs, the second paragraph of the two wouldn’t have the styles applied.

本示例将指定的样式仅应用于紧随其他段落元素之后的段落元素。 这意味着页面上的第一段元素将不会收到这些样式。 另外，如果在两个段落之间出现另一个元素，则两个段落的第二个段落都不会应用样式。

So, if we apply this selector to the following HTML:

因此，如果我们将此选择器应用于以下HTML：

<h2>Title</h2>
<p>Paragraph example.</p>
<p>Paragraph example.</p>
<p>Paragraph example.</p>

<div class="box">
  <p>Paragraph example.</p>
  <p>Paragraph example.</p>
</div>

…the styles will apply only to the second, third, and fifth paragraphs in this section of HTML.

…样式仅适用于HTML本部分的第二，第三和第五段。

属性选择器 (Attribute Selector)

The attribute selector targets elements based on the presence and/or value of HTML attributes, and is declared using square brackets:

属性选择器基于HTML属性的存在和/或值来定位元素，并使用方括号声明：

input[type="text"] {
   background-color: #444;
   width: 200px;
}

There should not be a space before the opening square bracket unless you intend to use it along with a descendant combinator. The above CSS would match the following element:

除非要与后代组合器一起使用，否则在方括号前不能有空格。 上面CSS将匹配以下元素：

<input type="text">

But it wouldn’t match this one:

但这不符合以下条件：

<input type="submit">

The attribute selector can also be declared using just the attribute itself, with no value, like this:

属性选择器也可以只使用属性本身声明，不带任何值，如下所示：

input[type] {
   background-color: #444;
   width: 200px;
}

This will match all input elements with an attribute of type, regardless of the value.

这将匹配具有类型属性的所有输入元素，而不管其值如何。

You can also use attribute selectors without specifying anything outside the square brackets (thus targeting based on the attribute alone, irrespective of the element). It’s also worth noting that, when using values, you have the option to include quotes (single or double,) or not.

您也可以使用属性选择器，而无需在方括号内指定任何内容(因此，仅基于属性(而不考虑元素)来定位)。 还值得注意的是，使用值时，可以选择是否包括引号(单引号或双引号)。

伪类 (Pseudo-class)

A pseudo-class uses a colon character to identify a pseudo-state that an element might be in—for example, the state of being hovered, or the state of being activated. Let’s look at a common example:

伪类使用冒号字符来标识元素可能处于的伪状态，例如，处于悬停状态或被激活状态。 让我们看一个常见的例子：

a:hover {
   color: red;
}

In this case, the pseudo-class portion of the selector is the :hover part. Here we’ve attached this pseudo-class to all anchor elements ( elements). This means that when the user hovers their mouse over an element, the color property for that element will change to red. This type of pseudo-class is a dynamic pseudo-class, because it occurs only in response to user interaction—in this case, the mouse moving over the targeted element.

在这种情况下，选择器的伪类部分是:hover部分。 在这里，我们已经将此伪类附加到所有锚元素( 元素)。 这意味着，当用户将鼠标悬停在 元素，该元素的color属性将变为红色。 这种类型的伪类是动态伪类，因为它仅在响应用户交互时发生(在这种情况下，鼠标在目标元素上移动)。

It’s important to recognize that these types of selectors do not just select elements; they select elements that are in a particular state. For the purposes of this example, the state is the “hover” state.

重要的是要认识到，这些类型的选择器不仅仅选择元素。 他们选择处于特定状态的元素。 出于本示例的目的，状态为“悬停”状态。

伪元素 (Pseudo-element)

Finally, CSS has a selector referred to as a pseudo-element and, used appropriately, it can be very useful. The only caveat is that this selector is quite different from the other examples we’ve considered. Let’s see a pseudo-element in context:

最后，CSS具有一个称为伪元素的选择器，如果使用得当，它会非常有用。 唯一的警告是此选择器与我们考虑的其他示例完全不同。 让我们在上下文中查看一个伪元素：

.container:before {
   content: "";
   display: block;
   width: 50px;
   height: 50px;
   background-color: #141414;
}

This example uses one kind of pseudo-element, the :before pseudo-element. As the name suggests, this selector inserts an imaginary element into the page, inside the targeted element, before its contents.

本示例使用一种伪元素:before伪元素。 顾名思义，该选择器将虚构元素插入到页面中目标元素之前的内容之前。

翻译自: https://www.sitepoint.com/css-selectors/

css选择器