类选择器
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
css
/* 所有含有 class="spacious" 类的元素 */ .spacious { margin: 2em; } /* 所有含有 class="spacious" 类的 <li> 元素 */ li.spacious { margin: 2em; } /* 所有同时含有“spacious”和“elegant”类的 <li> 元素 */ /* 例如 class="elegant retro spacious" */ li.spacious.elegant { margin: 2em; } 语法
css
.类名 { 样式声明 } 注意它与下面的属性选择器语句等价：
css
[class~=类名] { 样式声明 } 示例
>CSS
css
.red { color: #f33; } .yellow-bg { background: #ffa; } .fancy { font-weight: bold; text-shadow: 4px 4px 3px #77f; } HTML
html
<p class="red">这段文字是红色的。</p> <p class="red yellow-bg">这段文字是红色的，背景是黄色的。</p> <p class="red fancy">这段文字是红色的，有“fancy”样式。</p> <p>这只是普通的段落。</p> 结果
规范
| Specification |
|---|
| Selectors Level 4> # class-html> |
浏览器兼容性
Loading…