CSS中的 class 和 id 是两种常见的选择器,它们都用于定义HTML元素的样式。下面来看看它们的用法和区别。首先, class 选择器用于定义一组具有相同样式的元素,它以点号 . 开头,后面接
CSS中的"class"和"id"是两种常见的选择器,它们都用于定义HTML元素的样式。下面来看看它们的用法和区别。
首先,"class"选择器用于定义一组具有相同样式的元素,它以点号"."开头,后面接上自定义的类名。例如:
.my-class { color: red; }
在HTML中,我们可以给一个或多个元素添加该类名,这些元素将会拥有上述样式:
<p class="my-class">这是一个红色的段落</p> <div class="my-class">这是一个红色的块级元素</div>
而"id"选择器则是用于定义唯一的元素,它以井号"#"开头,后面是对应的ID名称。举个例子:
#my-id { border: 1px solid black; }
在HTML中,我们给一个元素添加该ID,这个元素将会拥有上述样式:
<div id="my-id">这是一个有边框的块级元素</div>
注意,同一个ID只能被用一次,而一个元素可以同时具有多个class名称。
另外,"class"选择器也可以用于CSS中的组合选择器,来定义某些特定情况下的样式,例如:
.common-class { font-size: 14px; } .highlighted { background-color: yellow; } .common-class.highlighted { font-weight: bold; }
在HTML中,我们可以给一个元素添加"common-class"和"highlighted"类名,这个元素将会拥有上述样式。
综上所述,"class"和"id"选择器都是非常常用的CSS选择器,它们分别用于定义一组元素和唯一一个元素的样式,同时也可以组合使用来定义更加复杂的样式。
粉丝
0
关注
0
收藏
0