类选择器
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
.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 |
浏览器兼容性
BCD tables only load in the browser