CSS 的选择器有很多,常用的有 元素选择器、id 选择器、class 选择器、后代选择器、子代选择器、并集选择器、交集选择器、伪类选择器、通配符选择器 等。
本篇博客说的是 class 选择器,详细内容如下
一:类名选择器
class 选择器,也叫类选择器。与 id 选择器不同的是,你可以在一个页面设置多个相同的 class ,就好比身份证号没有相同的,但却可以同名同姓。
我们可以对"相同的元素" 或者 “不同的元素” 定义相同的 class 属性,然后对拥有相同 class 属性的元素进行 CSS 样式操作。
1:语法
对于 class 选择器,我们必须在 class 名前面加上前缀符号 . ,后面紧跟 class 名,表示这是一个 class 选择器,不加 . 前缀该选择器就是无效的。基本语法格式如下图所示
再在需要指定样式的元素加上 class 属性,属性值是你指定的 class 名。
2:举例说明
如下代码所示
<div>雄心志四海,万里望风尘</div>
<div>雄心志四海,万里望风尘</div>
<div>雄心志四海,万里望风尘</div>
浏览器运行效果如下所示
我希望前两个 div 元素和 p 元素的文本颜色为红色,字体大小为 18 像素,这时就可以使用 class 选择器,HTML 代码如下
<div class="myClass">雄心志四海,万里望风尘</div>
<div class="myClass">雄心志四海,万里望风尘</div>
<p class="myClass">雄心志四海,万里望风尘</p>
<div>雄心志四海,万里望风尘</div>
CSS 代码如下
.myClass {color: red;font-size: 18px;}
浏览器运行效果如下所示
.myClass {color: red;font-size: 18px;} 这行代码的意思是选中 class 为 myClass 的元素,然后设置该元素的文本颜色为红色,字体大小为 18 像素。
3:注意事项
1:什么时候使用 class 选择器
![](/qrcode.jpg)
如果你要为两个或多个元素定义相同的样式,元素可以是相同的,也可以是不同的,建议使用 class 选择器,这样可以减少代码的冗余度。
2:class 名的命名规范
- 先字母,后数字的命名是允许的,如 a1
- 先数字,后字母的命名是不允许的,如 1a
如果你自己测试过,你会发现,你可以在 HTML 中定义 class = “1a” ,这是不会报错的,但当你在 CSS 中去引用这个类名时,就会出错,提示你 unexpected token ,翻译过来就是 “意外的标记”。
除了这个外
- 不建议使用下划线 _ 来命名 CSS 选择器,以便区分 JavaScript 中的变量命名。
- 不要以纯数字、中文命名,尽量使用英文字母来表示。
二:多类名选择器
多类名选择器也属于类名选择器,只不过可以一次引用多个类选择器,使用上也很简单,只需要在之前的类名后再按一下空格,然后直接写上类名即可。
1:举例说明
比如现在分别有 classOne 和 classTwo 的类名,classOne 负责修改元素的文本颜色和字体大小,classTwo 负责字体加粗显示,CSS 代码如下所示
.classOne{color: blue;font-size: 18px;}
.classTwo{font-weight: bold}
HTML 代码如下
<div class="classOne classTwo">雄心志四海,万里望风尘</div>
浏览器运行效果如下所示
也许你会问,那为什么不写成下面这种写法呢
<div class="classOne" class="classTwo">雄心志四海,万里望风尘</div>
首先需要说明一下,这种写法是错误的,因为一个标签里面只能写一个 class,需要记住这一点。
如果这篇博客有幸帮到了您,欢迎点击下方链接,和更多志同道合的伙伴一起交流,一起进步。
结束语