web开发——CSS常用选择器

 

CSS中用到的选择器有4种：

1. 元素选择器
2. id选择器
3. 类选择器
4. 通配选择器

先来说第一种：元素选择器，根据标签名来选中指定的元素。

语法：标签名{}

例子：将“标题”和“段落”设置为红色。

 <h1>我是标题</h1>
 <p>少小离家老大回</p>
 <p>乡音无改鬓毛衰</p>

 代码演示：

<style>
     h1{
       color:red
}

      p{
       color:red
}


</style>

 效果：

 

第二种：id选择器，根据元素的id属性选中一个元素。

语法：#id的属性值{}

例子：将“乡音无改鬓毛衰”设置为绿色,字体大小为50。

<h1>我是标题</h1>
<p>少小离家老大回</p>
<p id="p2">乡音无改鬓毛衰</p>

 代码演示：

<style>
      #p2{
         color:green;
         font-size:50px;
}

</style>

 效果图：

 

 

第三种：类选择器，根据元素的class属性来选中一组元素。

语法：.class属性值{}

例子：将秋水...和落霞...设置为蓝色。

<h1>我是标题</h1>
<p>少小离家老大回</p>
<p>乡音无改鬓毛衰</p>
<p>儿童相见不相识</p>
<p>笑问客从何处来</p>
<p class="blue">秋水共长天一色</p>
<p class="blue">落霞与孤鹜齐飞</p>

 代码演示：

<style>
     .blue{
         color: blue;
}


</style>

 效果图：

 

 

 第四种：通配选择器，选中页面种所有的元素。

语法：*{}

例子：当使用通配选择器时，所有的元素都会变为橙色。

<h1>我是标题</h1>
<p>少小离家老大回</p>
<p>乡音无改鬓毛衰</p>
<p>儿童相见不相识</p>
<p>笑问客从何处来</p>
<p>秋水共长天一色</p>
<p>落霞与孤鹜齐飞</p>

 代码演示：

<style>
     *{
     color:orange;
}

</style>

 效果图:

 总结：以上就是4种常用的选择器，大家根据自己需求来进行选择。

如果觉得我的文章有帮助到你，希望给个关注个赞，谢谢！