HTML（CSS）四大常用选择器

最新推荐文章于 2024-05-01 13:08:14 发布

温带烧烤

最新推荐文章于 2024-05-01 13:08:14 发布

阅读量2.9k

点赞数 7

文章标签： html css 前端

本文链接：https://blog.csdn.net/Minecraftable/article/details/127668708

版权

本文主要介绍HTML代码中四种常用的css选择器，选择器的应用空间非常广泛，几乎绝大多数标签都可以被修饰（甚至于<HTML>）。其中四大选择器：通配选择器，标签选择器，类选择器，ID选择器是最基本，最常用的，也已经能够满足大部分代码的需求。

一，通配选择器

顾名思义，及对所有内容都生效的，作用如同路基，通常用来为文章文字及其样式进行全体设置，再在此基础上进行细节修理。格式：以*开头，大括号内放置用来设置样式的代码，即*{设置样式}

<style>
    *{color:#e8dd10;  /*通配选择器，将所有文本内容设置为黄色*/}
</style>

<p>文本1</p>
<p>文本2</p>
<p>文本3</p>
<div>文本4</div>

二，标签选择器

通过元素标签(比如p,div,title)来给一整类元素的所有内容进行样式设置。

下图代码所示，通配选择器先将所有文字样式设置为黄色，随后标签选择器将所有<p>元素内的文字设置为红色，而剩余的一个<div>元素则也就是通配选择器设置的黄色。格式与上面的大同小异：标签{样式内容}

<style>
        *{color:#e8dd10;  /*通配选择器*/}
        p{
            color:#ff0000;  /*标签选择器*/
        }
</style>

<p>文本</p>
<p>文本</p>
<p>文本</p>
<div>文本</div>

三，类选择器

在元素内设置不同的类名，这样设置样式的时候可以更具针对性，多个元素可以使用同一个类名，但是多次使用类选择器会降低代码的阅读效率。格式 .类名{样式设置}

<style>
        *{color:#e8dd10;  /*通配选择器*/}
        p{
            color:#ff0000;  /*标签选择器*/
        }
        .nam{color:#00ff00;  /*类选择器*/}
</style>

<p>文本1</p>
<p  class = "nam">在元素中设置类名</p>    
<p>文本3</p>
<div>文本4</div>

四，ID选择器

ID选择器的和类选择器比较类似，用户先设置一个标签的id，在针对此id进行样式设置。而id名不仅可以用来给选择器进行修饰，还可以应用到JavaScript中，即<script>标签。格式：#ID{样式设置}

<style>
        *{color:#e8dd10;  /*通配选择器*/}
        p{color:#ff0000;  /*标签选择器*/}
        .nam{color:#00ff00;  /*类选择器*/}
        #names{color:#0000ff;  /*ID选择器*/}
</style>

<p>标签选择器</p>
<p  class = "nam">类选择器</p>
<p  id = "names">ID选择器</p>
<div>通配选择器</p>