css类选择器与id选择器_类选择器（CSS选择器）

css类选择器与id选择器

句法 (Syntax)

.className {
declaration block
}

描述 (Description)

Selecting elements on the basis of their class names is a very common technique in CSS. The attribute selector syntax [class~="warning"] is rather awkward, but thankfully there’s a simpler and shorter form for it: the class selector.

根据类名选择元素是CSS中非常常见的技术。 属性选择器语法[class~="warning"]有点笨拙，但值得庆幸的是，它有一个更简单，更短的形式：类选择器。

Here’s a simple example that selects all elements with a class attribute that contains the value “warning“:

这是一个简单的示例，该示例选择具有class属性(包含值“ warning ”)的所有元素：

.warning {
  ⋮ declarations
}

This example also illustrates the use of an implied universal selector—it’s equivalent to *.warning. Note that whitespace characters can’t appear after the period, or between an element type selector, or explicit universal selector, and the period. For example, the following selector will match all p elements with a class attribute that contains the value “warning“:

此示例还说明了隐式通用选择器的用法-等效于*.warning. 请注意，空格字符不能在句点之后，元素类型选择器或显式通用选择器与句点之间出现。 例如，以下选择器会将所有p元素与包含值“ warning ”的class属性进行匹配：

p.warning {
  ⋮ declarations
}

A simple selector may contain more than one attribute selector and/or class selector; in such cases, the selector pattern matches elements whose attributes contain all the specified components. Here’s an example:

一个简单的选择器可以包含多个属性选择器和/或类选择器。 在这种情况下，选择器模式将匹配其属性包含所有指定组件的元素。 这是一个例子：

div.foo.bar {
  ⋮ declarations
}
div.foo.bar[title^="Help"] {
  ⋮ declarations
}

The first example selector above matches div elements whose class attribute value contains both the words "foo" and "bar". The second example selector matches div elements whose class attribute values contains both the words "foo" and "bar", and whose title attribute values begin with the string "Help". To clarify further the html that would match the above selectors could be as follows:

上面的第一个示例选择器匹配div元素，这些元素的class属性值包含单词"foo"和"bar" 。 第二个示例选择器匹配div元素，这些元素的class属性值包含单词"foo"和"bar" ，并且其title属性值以字符串"Help"开头。 为了进一步阐明将与上述选择器匹配的html，可能如下所示：

<div class="foo bar">Matches first example</div>
<div class="foo bar" title="Help">Matches second example</div>

例 (Example)

The following selector will match all p elements with a class attribute that contains the value "intro":

以下选择器会将所有p元素与包含值"intro"的class属性进行匹配：

p.intro {
  ⋮ declarations
}

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

css类选择器与id选择器