首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

类选择器 | Class selectors

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

代码语言:javascript
复制
/* All elements with class="spacious" */
.spacious {
  margin: 2em;
}

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

语法

代码语言:javascript
复制
.class_name { style properties }

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

代码语言:javascript
复制
[class~=class_name] { style properties }

实例

CSS

代码语言:javascript
复制
div.classy {
  background-color: skyblue;
}

HTML

代码语言:javascript
复制
<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)

?

?

?

?

扫码关注腾讯云开发者

领取腾讯云代金券

http://www.vxiaotou.com