DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费信用额度!
CSS 中的类选择器以点 (.) 开头,如下所示
.class {
}
类选择器选择所有具有匹配类属性的元素。
例如,此元素
<button class="big-button">Push Me</button>
如下选择并设置样式
.big-button {
font-size: 60px;
}
您可以为类指定任何以字母、连字符 (-) 或下划线 (_) 开头的名称。您可以在类名中使用数字,但数字不能作为第一个字符或连字符后的第二个字符。除非您变得疯狂并开始 转义选择器,这可能会变得很奇怪
.\3A \`\( {
/* matches elements with class=":`(" */
}
一个元素可以有多个类
<p class="intro blue">
This paragraph will get styles from .intro and .blue selectors.
</p>
具有多个类的元素将使用每个类的 CSS 规则设置样式。您还可以组合多个类来选择元素
/* only selects elements with BOTH of these classes */
.intro.blue {
font-size: 1.3em;
}
此演示展示了单类选择器与组合选择器的区别
您还可以将类选择器限制为特定类型的元素,这有时称为“标记限定”
ul.menu {
list-style: none;
}
特异性
类选择器本身的特异性值为 0, 0, 1, 0。这比元素选择器(如:a { }
)“更强大”,但不如 ID 选择器(如 #header { }
)强大。当您组合类选择器或将选择器限制为特定元素时,特异性会增加。
使用 JavaScript 访问类
您可以使用 JavaScript 中的 classList
读取和操作元素的类。例如,添加一个类可能类似于
document.getElementById('italicize').classList.add('italic');
此演示展示了 classList
的基本使用示例
jQuery 还具有用于与类交互的方法,包括 .addClass()
、.removeClass()
、.toggleClass()
和 .hasClass()
。
更多信息
- 阅读 W3C 关于类选择器的规范。
- 了解有关语义类名的更多信息。
- 了解有关特异性的更多信息。
- 了解类和 ID 之间的区别。
- 了解多个类选择器和类/ID 选择器组合。
- 了解 .classList API。
- 了解 jQuery 中的类操作。
浏览器支持
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
任何 | 任何 | 任何 | 任何 | 任何 | 任何 | 任何 |
0, 0, 1, 0 ,
理解CSS规范非常重要