css中选择器的基本介绍以及使用方法

最新推荐文章于 2024-04-19 05:44:53 发布

小胖纸...

最新推荐文章于 2024-04-19 05:44:53 发布

阅读量587

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/2201_75406597/article/details/130710073

版权

1、选择器的基本介绍

1.1 要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器，每一条css样式定义由两部分组成， “选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。

1.2 选择器包括四种基本选择器，包含选择器、属性选择器、伪类选择器、伪元素选择器等。

2、四种基本选择器

2.1标签选择器（根据标签的名称设置对应的样式）

代码演示如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器</title>
        <style>
            div{
                color: crimson;
                width: 200px;
                height: 200px;
                border: 1px solid black;
            }
</style>
</head>
<body>
    <div>这是第一个div</div>
</body>
</html>

2.2 ID选择器（通过获取标签里面的ID属性去设置对应的样式，语法结构为#+id的属性值）

代码演示如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本选择器</title>
        <style>
            #two{
                color: aqua;
            }
        </style>
</head>
<body>
    <p id="two">这是一个段落标签</p>
</body>
</html>

2.3 类选择器（通过获取标签里面的class属性去设置对应的样式，语法结构为.+class的属性值）

代码演示如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本选择器</title>
        <style>
            .box{
                color: chocolate;
               }
        </style>
</head>
<body>
    <div class="box">这是第二个div</div>
</body>
</html>

2.4 通配符选择器（通过*设置对应的样式），若没有其他选择器优先级的限制，通配符选择器可以设置所有的属性。

代码演示如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本选择器</title>
        <style>
            *{
                color: darkorchid;
            }
        </style>
</head>
<body>
    <div>这是第一个div</div>
    <p>这是一个段落标签</p>
    <div>这是第二个div</div>
    <hr>
    <ul>
        <li>这是表格</li>
        <li>这是表格</li>
        <li>这是表格</li>
        <li>这是表格</li>
        <li>这是表格</li>
    </ul>
</body>
</html>

效果图:

2.5 这四种基本选择器的优先级如下：

ID选择器>类选择器>标签选择器>通配符选择器

3、包含选择器

3.1 子代选择器（获取某个标签的第一级子标签），这里类选择器可以和子代选择器连用。语法如下:.+类名>一级子标签。

代码演示如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>包含选择器</title>
    <style>
        .list > ul{
           border: 1px solid red;
           color: chartreuse;
        }
    </style>
</head>
<body>
    <div class="list">
        <ul>
            <li>这是列表</li>
            <li>这是列表</li>
            <li>这是列表</li>
            <li>这是列表</li>
            <li>这是列表</li>
            <li>这是列表</li>
        </ul>
    </div>
</body>
</html>

3.2 后代选择器（获取的某个标签的所有子标签），顾名思义就是可以设置某个标签下的所有子标签。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>包含选择器</title>
    <style>
       
        .list li{
            border: 1px solid black;
            color: darkgoldenrod;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>这是列表</li>
            <li>这是列表</li>
            <li>这是列表</li>
            <li>这是列表</li>
            <li>这是列表</li>
            <li>这是列表</li>
        </ul>
        <li>这是列表</li>
        <li>这是列表</li>
        <li>这是列表</li>
        <li>这是列表</li>
        <li>这是列表</li>
    </div>
</body>
</html>

3.3 分组选择器（也叫做逗号选择器，可以设定多个标签，使用逗号进行分割）

代码演示如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>包含选择器</title>
    <style>
        h1,div,#one{
            border: 1px solid blue; 
            color: darkolivegreen;
        }
    </style>
</head>
<body>
    <h1>我是大帅哥</h1>
    <p id="one">这是一个段落标签</p>
    <div>这是第一个div</div>
    <div>
        <ul>
            <li>这是列表</li>
            <li>这是列表</li>
            <li>这是列表</li>
            <li>这是列表</li>
            <li>这是列表</li>
            <li>这是列表</li>
        </ul>
    </div>
</body>
</html>

效果图：

4、属性选择器

4.1 属性选择器可以单独使用也可以和其它的选择器混合使用。

4.2 属性选择器用法一：选中某个标签中存在的某个值[某个属性值]

代码如下:

[class]{
color: red;
}

4.3 属性选择器的用法二：属性确切的等于某个值[属性名=“属性值”]

代码如下：

[type="text"]{
background: red;
}

4.4 属性选择器的用法三：属性里面包含某个值[属性名*=“属性值”]

代码如下：

[type *= "e"]{
background: blue;
}

4.5 属性选择器的用法四：属性中的值以XXX开始[属性名^=“属性值”]

代码如下：

[type ^= "e"]{
background-color: blueviolet;
}

4.6 属性选择器的用法五：属性中的值以XXX结尾[属性名$=“属性值”]

代码如下：

[type $= "rl"]{
background-color: rgb(14, 139, 18);
}

4.7 属性选择器的用法六：表示设置下一个标签

代码如下：

.msg + p{
color: darkgoldenrod;
}

4.8 属性选择器的用法七：属性等于某个值

代码如下：

[title="标题1"]{
color: chartreuse;
}

5、伪类选择器

伪类：同一个标签，在不同的状态下，有不同的样式。伪类通过冒号表示，最早的时候主要是用来渲染a标签不同的状态下的不同的样式：超链接点击之前:link，超链接被访问之后 :visited、鼠标放在超链接上的时候（悬停）:hover 、超链接激活的时候（鼠标点击标签但是不松手的时候） : active。

注意:对于a标签的四种状态的顺序是一定的：a:link a:visited a:hover a:active

代码演示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
    <style>
        a:link{
            color: red;
        }
        a:visited{
            color: rgba(0, 255, 157, 0.618);
        }
        a:hover{
            color: rgb(106, 0, 255);
        }
        a:active{
            color: rgb(13, 0, 255);
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com">点我</a>
</body>
</html>

6、伪元素选择器

伪元素选择器在css2中的语法结构为(:)而在css3中语法结构变为(::)，常见的伪元素选择器有before和after等等。

注意：使用before和after的时候一定给要写上content属性。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>伪元素选择器</title>
<style>
p{
color: red;
font-size: 20px;
}
p::before{
content: "他们说";
color: blueviolet;
}
p::after{
content: "是不是？";
color: rgb(10, 1, 17);
}
</style>
</head>
<body>
<p>这是段落</p>
</body>
</html>

7、总结

关于css中的各种选择器，首先要清楚各个选择器的语法结构，混合使用各种选择器，然后要根据实际情况择优选择更加方便的选择器，从而提高效率和美观程度。

小胖纸...

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
css中选择器的基本介绍以及使用方法

1.1要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器，每一条css样式定义由两部分组成， “选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。1.2选择器包括四种基本选择器，包含选择器、属性选择器、伪类选择器、伪元素选择器等。关于css中的各种选择器，首先要清楚各个选择器的语法结构，混合使用各种选择器，然后要根据实际情况择优选择更加方便的选择器，从而提高效率和美观程度。
复制链接

扫一扫