【CSS】常见的选择器

原创

于 2023-06-10 15:28:12 发布

· 1.4k 阅读

1 ·

版权

文章标签：

#css #html #css3

本文详细介绍了CSS中的各种选择器，包括标签选择器用于按标签名选择元素，ID选择器通过ID属性定位唯一元素，类选择器针对一类元素设置样式，通配符选择器作用于所有元素，后代选择器和子选择器用于选择元素的子元素，以及并集选择器和伪类选择器用于处理元素的特定状态或组合选择。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.标签选择器

语法

标签 {
   
}

作用

标签选择器用于选择某种标签

比如

选择p标签，并设置背景颜色

p {
    
	background-color:yellow;
}

例子

选择div标签，并将其字体大小设置为100px，字体设置为"微软雅黑"，文字颜色设置为rgb(251, 114, 153)

<style>
     div {
     
         font-size: 100px;
         font-family:"微软雅黑";
         color: rgb(251, 114, 153);
     }
</style>

<div>hello</div>
<div>world</div>

效果

2.id选择器

语法

#id {
   
}

作用

为指定id的元素设置样式

比如

为 id="firstid" 的元素设置样式

#firstid {
    
	background-color:yellow;
}

例子：

针对id="test1"和id="test2"的两个元素各自设置样式。

<style>
     #test1 {
     
            font-size: 100px;
            color:cadetblue;
        }
     #test2 {
     
         font-size: 50px;
         color:rgb(251, 114, 153);
     }
</style>

<span id="test1">biubiubiu</span> <br/>
<span id="test2">bangbang</span>