Avatar of Sara Cope
Sara Cope

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()

更多信息

浏览器支持

ChromeSafariFirefoxOperaIEAndroidiOS
任何任何任何任何任何任何任何