CSS选择器的分类

最新推荐文章于 2023-06-19 14:24:28 发布

许州和

最新推荐文章于 2023-06-19 14:24:28 发布

阅读量260

点赞数

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/weixin_52146596/article/details/130333224

版权

文章详细介绍了CSS中的基础选择器，包括标签选择器、类选择器、ID选择器和通配符选择器，以及复合选择器的应用，如后代选择器、子选择器、并集选择器和伪类选择器。这些选择器用于精准地定位和样式化HTML元素，实现网页的样式控制。

摘要由CSDN通过智能技术生成

CSS选择器分为两大类，基础选择器和复合选择器，其中复合选择器由两个及以上基础选择器组成形成。

一.基础选择器：

基础选择器的分类如下：

1.标签选择器：

标签选择器的作用对象是标签。

使用该选择器后，对所对应的标签进行样式修改。

<!DOCTYPE html>
<html lang="en">
<head>
     /*部分内容省略*/
    <style>
        p {
            color: palegreen;
            font-size: 25px;
        }
    </style>
</head>

<body>
    <p>1</p>
    <p>2</p>
    <div>1</div>
</body>

</html>

运行后，所有p标签的样式进行修改

2类选择器

类选择器的作用对象是该类对象。

使用该选择器后，使用该类名的标签都会进行样式修改。

<!DOCTYPE html>
<html lang="en">

<head>
  
    <style>
        .a {
            color: palegreen;
            font-size: 25px;
        }
    </style>
</head>

<body>
    <p class="a">1</p>
    <p>2</p>
    <div>1</div>
</body>

</html>

运行后结果如下：（只用类名为a的标签的样式改变，其余都不发生变化）

3.id选择器：

id选择器的作用对象是id对象。

使用该选择器后，所对应的标签都会进行样式修改。

（注意：id选择器一般只可以调用一次，常与js搭配使用；而类选择器可以多次调用，故常用类选择器进行样式修改）

<!DOCTYPE html>
<html lang="en">
<!--该代码主要用于解释id选择器，与实际使用习惯无关-->
<head>
  
    <style>
        #a {
            color: palegreen;
            font-size: 25px;
        }
    </style>
</head>

<body>
    <p >1</p>
    <p id="a">2</p>
    <div>1</div>
</body>

</html>

结果如下：

4.通配符选择器：

通配符选择器的作用对象是该文档中的所有标签。

使用该选择器后，会对所有标签进行样式修改。

<!DOCTYPE html>
<html lang="en">

<head>
  
    <style>
        * {
            color: purple;
            font-size: 25px;
        }
    </style>
</head>

<body>
    <p class="a">1</p>
    <p>2</p>
    <div>1</div>
</body>

</html>

运行结果如下：

二.复合选择器：

复合选择器由两个及以上任意基础选择器组合而成。

其分类如下：

1.后代选择器和子选择器：

后代选择器作用对象是前一个对象的所有后代即可以为前一个对象的下一级即子标签，也可以是下两级即孙标签。

子选择器作用对象只能是前一个对象的下一级即子标签，对隔代标签无作用。

<!DOCTYPE html>
<html lang="en">

<head>
   
    <style>
        div p {
            color: pink;
        }
    </style>
</head>

<body>
    <div>
        <p>1</p>
        <ul>
            <li>
                <p>2</p>
            </li>
            <li>3</li>
        </ul>
    </div>
</body>

</html>

该代码为后代选择器，即对div后代中的所有p标签进行样式修改，故p和li中的p都发生样式变化。

<!DOCTYPE html>
<html lang="en">

<head>
   
    <style>
        div>p {
            color: pink;
        }
    </style>
</head>

<body>
    <div>
        <p>1</p>
        <ul>
            <li>
                <p>2</p>
            </li>
            <li>3</li>
        </ul>
    </div>
</body>

</html>

而该代码为子选择器，只作用于紧连div的子标签p，对隔代标签即li中的p无作用

2.并集选择器：

并集选择器的作用对象是多个标签。

<!DOCTYPE html>
<html lang="en">

<head>
    
    <style>
       p,
        li {
            color: pink;
        }
    </style>
</head>

<body>
    <div>
        <p>1</p>
        <ul>
            <li>
                <p>2</p>
            </li>
            <li>3</li>
        </ul>
    </div>
</body>

</html>

该代码对p和li标签都作用，发生同样的样式修改

3.伪类选择器:

该选择器的作用是对某些标签添加特殊效果。最常用的是对a标签和input标签的修改。

其内容如下：

a:link <!--选择所有未被访问的链接-->
a:visited <!--选择所有已被访问的链接-->
a:hover <!--选择鼠标指针位于其上的链接-->
a:active <!--选择活动链接（鼠标按下未弹起的链接）-->
<!--若要对该四个同时进行样式修改，必须按照LVHA的顺序-->

input:focus<!--光标获取时发生的变化-->

以focus伪类选择器为例子：

<!DOCTYPE html>
<html lang="en">

<head>

        input:focus {
            background: pink;
        }
    </style>
</head>

<body>
    <input type="text" value="">
</body>

</html>

运行结果如下：