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
}
css类选择器与id选择器