类选择器 | Class selectors (Selectors)

  CSS 中文开发手册

类选择器 | Class selectors (Selectors) - CSS 中文开发手册

CSS 类选择器根据其class属性的内容匹配元素。

/* All elements with class="spacious" */
.spacious {
  margin: 2em;
}

/* All <li> elements with class="spacious" */
li.spacious {
  margin: 2em;
}

语法

.class_name { style properties }

请注意，这相当于以下内容attribute selector：

[class~=class_name] { style properties }

实例

CSS

div.classy {
  background-color: skyblue;
}

HTML

<div class="classy">This div has a special class on it!</div>
<div>This is just a regular div.</div>

结果

规范

Specification	Status	Comment
Selectors Level 4The definition of 'class selectors' in that specification.	Working Draft	No changes
Selectors Level 3The definition of 'class selectors' in that specification.	Recommendation	​
CSS Level 2 (Revision 1)The definition of 'child selectors' in that specification.	Recommendation	​
CSS Level 1The definition of 'child selectors' in that specification.	Recommendation	Initial definition

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)	(Yes)

Feature	Android	Chrome for Android	Edge	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	?	?	(Yes)	?	?	?	?

  CSS 中文开发手册

  本文标题：类选择器 | Class selectors (Selectors) – CSS 中文开发手册 - Break易站

转载请保留页面地址：https://www.breakyizhan.com/css/32165.html