css 选择器 class
时间: 2023-11-19 18:52:42 浏览: 46
在CSS中,使用类选择器来选择具有相同类名的元素。类选择器使用英文句点(.)后面跟着类名来指定选择的元素。
示例代码如下:
HTML:
```html
<div class="box">这是一个具有box类的div元素</div>
<p class="box">这是一个具有box类的p元素</p>
<span>这是一个没有box类的span元素</span>
```
CSS:
```css
.box {
color: red;
}
```
在上面的代码中,我们在HTML中有三个元素,其中两个具有相同的类名为`box`,一个没有该类名。然后,在CSS中使用类选择器`.box`来选择具有`box`类名的元素,并给它们设置了`color: red;`样式。
这样,具有`box`类名的div和p元素就会应用该样式,文字颜色将变为红色。而没有`box`类名的span元素不会应用该样式。
相关问题
css选择器class用什么表示
A:CSS选择器class可以用 "." (点号) 表示。例如,要选取class为"container"的元素,可以使用如下 CSS 选择器:
```
.container {
/* 样式规则 */
}
```
css选择器 class中包括article的写法
可以使用以下 CSS 选择器来选取 class 中包括 "article" 的元素:
```
[class*="article"]
```
这个选择器会匹配所有 class 属性中包含 "article" 的元素。例如,如果一个元素的 class 属性值为 "post-article",那么这个选择器就会匹配该元素。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)