传统CSS选择器

最新推荐文章于 2024-10-02 15:35:50 发布

小露最可爱

最新推荐文章于 2024-10-02 15:35:50 发布

阅读量47

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/2201_75534982/article/details/129836709

版权

本文详细介绍了CSS中的选择器，包括基本选择器（如标签选择器、ID选择器、类选择器和通配符选择器），包含选择器（子代、后代和并集选择器），属性选择器，以及伪类和伪元素选择器。每个选择器类型都配有介绍和实例，帮助读者理解和掌握不同选择器的用法及其在网页样式控制中的作用。

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

选择器基本格式

标签{

属性: 属性值;

...

}

一、基本选择器

1.1、介绍

基本选择器有以下4种：

名称	格式	说明
标签选择	标签名{...}	通过标签名来获取
id选择	#(id名){...}	通过id属性来获取
class选择	.(class名){...}	通过class属性来获取
通配符选择	*{...}	适用于所有标签

优先级：ID > class > 标签 > 通配符

ps：在css文件编写中最好加入以下通配符选择器代码

*{
margin: 0;//外边距
padding: 0;//内边距
}

1.2、实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="author" content=""/>
    <title></title>
    <style type="text/css">
    p{
        font-size: 20px;
    }
    #chongqing{
        color: red;
    }
    .区{
        color: blue;
    }
    </style>
</head>
<body>
    <p id="chongqing">
        重庆市
    </p>
    <p class="区">
        九龙坡
    </p>
    <p>
        城市科技学院
    </p>
</body>
</html>

二、包含选择器

2.1、介绍

包含选择器有以下3种：

名称	格式	说明
子代选择	()>(){...}	获取指定标签下的指定标签
后代选择	() (){...}	获取指定标签后的所有标签
分组(并集)选择	(),(),(){...}	获取所有的指定样式

小括号内可以是标签、类、id等等。

2.2、实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="author" content=""/>
    <title></title>
    <style type="text/css">
        div>ul{
            list-style: none;
        }
        div #one .a{
            color: red;
        }
        div #two .b{
            color: blue;
        }
        .a,.b{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div>
        <ul id="one">
            <li class="a">1111</li>
            <li class="a">2222</li>
            <li class="a">3333</li>
            <li class="a">4444</li>
        </ul>
        <ul id="two">
            <li class="b">1212</li>
            <li class="b">1313</li>
            <li class="b">1414</li>
        </ul>
    </div>
</body>
</html>

三、属性选择器

3.1、介绍

属性选择器有以下5种：

格式	说明
()[属性]{...}	获取有指定属性的标签
()[属性="属性值"]{...}	获取指定属性有确切属性值的标签
()[属性=^"属性值"]{...}	获取指定属性以指定的属性值开头的标签
()[属性=$"属性值"]{...}	获取指定属性以指定的属性值结尾的标签
()[属性=*"属性值"]{...}	获取指定属性的属性值包含指定的属性值的标签
() +(){...}	获取指定标签下的指定标签

小括号内可以是标签、类、id等等，第一种前可省略，省略时默认所有标签。

3.2、实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="author" content=""/>
    <title></title>
    <style type="text/css">
        [id]{
            list-style: none;
        }
        li[class*="b"]{
            font-size: 20px;
        }
        li[class="abc"]{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <ul id="one">
            <li class="abc">1111</li>
            <li class="abc">2222</li>
            <li class="abc">3333</li>
            <li class="abc">4444</li>
        </ul>
        <ul id="two">
            <li class="b">1212</li>
            <li class="b">1313</li>
            <li class="b">1414</li>
        </ul>
    </div>
</body>
</html>

四、伪类选择器

4.1、介绍

获取同一个标签在不同时候的状态。(例：a标签)

格式	说明
()::link{...}	点击前
()::visited{...}	点击后
()::hover{...}	光标在标签上时
()::active{...}	点击时

小括号内可以是标签、类、id等等。

ps：这四种标签最好按照顺序来编写，否则样式应用会出错。

4.2、实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="author" content=""/>
    <title></title>
    <style type="text/css">
        #one{
            font-size: 60px;
        }
        #one>a:link{
            color: aqua;
        }
        #one>a:visited{
            color: red;
        }
        #one>a:hover{
            color: blue;
        }
        #one>a:active{
            color: pink;
        }
    </style>
</head>
<body>
    <p id="one">
        百度：<a href="https://www.baidu.com">baidu.com</a>
    </p>
</body>
</html>

五、伪元素选择器

5.1、介绍

伪元素标签有以下两种：

格式	说明
()::after{...}	指定标签后
()::before{...}	指定标签前

小括号内可以是标签、类、id等等。

ps：在此选择器必须添加content属性。

5.2、实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="author" content=""/>
    <title></title>
    <style type="text/css">
        a::before{
            content: "百度：";
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p id="one">
        <a href="https://www.baidu.com">baidu.com</a>
    </p>
</body>
</html>