0
0

CSS的选择器

CSS选择器用于“查找”（或选取）要设置的HTML。

可以将CSS选择器分为五类：

1.基本选择器

基本选择器又包含以下四种选择：

1.1标签选择器

根据标签的名称设置对应的样式

代码：

<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>Document</title>
    <style>
        p{color: coral;}
    </style>
</head>
<body>
    <p>每个段落都会受影响</p>
    <P>这个段落会</P>
    <p>这个段落也会</p>
</body>
</html>

运行效果：

1.2ID选择器

通过获取标签里面的ID属性去设置对应的样式，设置的时候#+id的属性值。

代码：

<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>Document</title>
    <style>
        #one{color: coral;}
    </style>
</head>
<body>
    <p id="one">段落都会受影响</p>
    <P>这个段落不会</P>
</body>
</html>

运行效果：注意：id名称不能以数字开头。

1.3类选择器

通过获取标签里的class属性去设置对应的样式，设置的时候“.”+class的属性值。

代码：

<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>Document</title>
    <style>
        .red{color: red;}
    </style>
</head>
<body>
    <h2 class="red">标题会变成红色</h2>
    <P class="red">段落也会变成红色</P>
</body>
</html>

运行效果：注意：类名不能以数字开头。

还可以指定只有特定的HTML元素会受类的影响。

代码：

<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>Document</title>
    <style>
        h2.red{color: red;}
    </style>
</head>
<body>
    <h2 class="red">标题会变成红色</h2>
    <P class="red">段落不会变成红色</P>
</body>

运行效果：

HTML也可以引用多个类

代码：

<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>Document</title>
    <style>
        .red{color: red;}
        .big{font-size: 20px;}
    </style>
</head>
<body>
    <p class="big">段落字号会变大</p>
    <P class="red">段落会变成红色</P>
    <P class="red big">段落会变成红色，而且字号会变大</P>
</body>

运行效果：

1.4通配符选择器

通过*设置对应的样式

代码：

<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>Document</title>
    <style>
        *{color:blue;}
    </style>
</head>
<body>
    <p>每一个都会受影响，变成蓝色</h2>
    <div>div标签会变成蓝色</div>
    <ul>
        <li>列表1，变成蓝色</li>
        <li>列表2，变成蓝色</li>
        <li>列表3，变成蓝色</li>
    </ul>
</body>

运行结果：

1.5四种选择器的优先级：

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

2.包含选择器

包含选择器又包含以下三个选择器：

2.1子代选择器

子代选择器获取的某个标签的第一级子标签，使用>（子选择符）

代码：

    <style>
        /* 子代选择器 */
        .list > ul{
            border: 1px solid saddlebrown;/*给列表添加一个边框*/
        }
    </style>
</head>
<body>
    <h1>这是一个标题</h1>
    <p id="one">这是一个段落标签</p>
    <div class="box">这又是一个div</div>
    <div class="list">
        <ul>
            <li>这是列表1</li>
            <li>这是列表2</li>
            <li>这是列表3</li>
            <li>这是列表4</li>
            <li>这是列表5</li>
        </ul>
        <li>这是列表6</li>
        <li>这是列表7</li>
        <li>这是列表8</li>
        <li>这是列表9</li>
    </div>
</body>
</html>

运行结果：

2.2后代选择器

获取的某个标签的所有子标签

代码

<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 brown;
        }
    </style>
</head>
<body>
    <h1>这是一个标题</h1>
    <p id="one">这是一个段落标签</p>
    <div class="box">这又是一个div</div>
    <div class="list">
        <ul>
            <li>这是列表1</li>
            <li>这是列表2</li>
            <li>这是列表3</li>
            <li>这是列表4</li>
            <li>这是列表5</li>
        </ul>
        <li>这是列表6</li>
        <li>这是列表7</li>
        <li>这是列表8</li>
        <li>这是列表9</li>
    </div>
</body>

运行结果：

可以看到，列表1---5的父级标签与列表6---9的父级标签不同，但它们的都是biv标签的后代标签。

2.3分组选择器

也叫做后代选择器，可以设定多个标签，使用逗号进行分割。

代码：

<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,#one,.box{
            color: blue;
        }
    </style>
</head>
<body>
    <h1>这是一个标题</h1>
    <p id="one">这是一个段落标签</p>
    <div class="box">这又是一个div</div>
    <div class="list">
        <ul>
            <li>这是列表1</li>
            <li>这是列表2</li>
            <li>这是列表3</li>
            <li>这是列表4</li>
            <li>这是列表5</li>
        </ul>
        <li>这是列表6</li>
        <li>这是列表7</li>
        <li>这是列表8</li>
        <li>这是列表9</li>
    </div>
</body>

运行结果：

3.属性选择器

属性选择器可以根据元素的属性及属性值来选择元素。

3.1可以选中某个标签中存在的某个值

代码：

<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>
        /* 选中某个标签存在的属性 */
        .container[class]{
            color: aqua;
        }
        div[title]{
            text-align: center;
            color: brown;
        }
    </style>
</head>
<body>
    <div class="container">这是一个div</div>
    <div title="这是一个标题">这是第二个div</div>
    <input type="text" value="张三">
    <input type="email" value="李四">
    <input type="url" value="王五">
    <input type="password" value="nicai">
    <hr>
    <div class="msg">我喜欢吃零食</div>
    <p id="msg2">这是一个段落标签</p>
</body>

运行结果：

3.2可以选择确切的某个值

代码：

<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>
         /* 确切的等于某个值 */
        input[type="password"]{
            background-color: burlywood;
        }
    </style>
</head>
<body>
    <div class="container">这是一个div</div>
    <div title="这是一个标题">这是第二个div</div>
    <input type="text" value="张三">
    <input type="email" value="李四">
    <input type="url" value="王五">
    <input type="password" value="nicai">
    <hr>
    <div class="msg">我喜欢吃零食</div>
    <p id="msg2">这是一个段落标签</p>
</body>

运行结果：

3.3可以选择属性里包含的某个值

代码： 

<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>
          /* 属性里面包含某个值 */
        input[type *="e"]{
            background-color: coral;
        }
    </style>
</head>
<body>
    <div class="container">这是一个div</div>
    <div title="这是一个标题">这是第二个div</div>
    <input type="text" value="张三">
    <input type="email" value="李四">
    <input type="url" value="王五">
    <input type="password" value="nicai">
    <hr>
    <div class="msg">我喜欢吃零食</div>
    <p id="msg2">这是一个段落标签</p>
</body>

运行结果： 3.4选择属性中以xx开始的值

代码：

<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>
        /* 属性中的值以xxx开始 */
        input[type ^="e"]{
            background-color: darkgray;
        }
    </style>
</head>
<body>
    <div class="container">这是一个div</div>
    <div title="这是一个标题">这是第二个div</div>
    <input type="text" value="张三">
    <input type="email" value="李四">
    <input type="url" value="王五">
    <input type="password" value="nicai">
    <hr>
    <div class="msg">我喜欢吃零食</div>
    <p id="msg2">这是一个段落标签</p>
</body>

运行结果：

3.5选择属性中以xxx结尾的值

代码：

<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>
        /* 属性中的值以xxxx结束 */
        input[type $="rl"]{
            background-color: darkolivegreen;
        }
    </style>
</head>
<body>
    <div class="container">这是一个div</div>
    <div title="这是一个标题">这是第二个div</div>
    <input type="text" value="张三">
    <input type="email" value="李四">
    <input type="url" value="王五">
    <input type="password" value="nicai">
    <hr>
    <div class="msg">我喜欢吃零食</div>
    <p id="msg2">这是一个段落标签</p>
</body>

运行结果：

3.6选择下一个标签

代码：

<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>
        /* 表示下一个标签 */
        .msg + p{
            color: cadetblue;
        }
    </style>
</head>
<body>
    <div class="container">这是一个div</div>
    <div title="这是一个标题">这是第二个div</div>
    <input type="text" value="张三">
    <input type="email" value="李四">
    <input type="url" value="王五">
    <input type="password" value="nicai">
    <hr>
    <div class="msg">我喜欢吃零食</div>
    <p id="msg2">这是一个段落标签</p>
</body>

运行结果：

3.7选择属性具体的等于某个值

代码：

<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>
         /* 属性等于某个值 */
        [class=msg]{
            color: salmon;
        }
    </style>
</head>
<body>
    <div class="container">这是一个div</div>
    <div title="这是一个标题">这是第二个div</div>
    <input type="text" value="张三">
    <input type="email" value="李四">
    <input type="url" value="王五">
    <input type="password" value="nicai">
    <hr>
    <div class="msg">我喜欢吃零食</div>
    <p id="msg2">这是一个段落标签</p>
</body>

运行结果：

4.伪类选择器

伪类用于定义元素的特殊状态。同一个标签，在不同的状态下有不同的样式。伪类是通过冒号来表示，最早的时候主要是用来渲染a标签不同的状态下的不同的样式。

比如，它可以用于：设置鼠标悬停在元素上的样式；为已访问和未访问链接设置不同的样式；设置元素获得焦点时的样式。

超链接点击之前-------:link

超链接被点击之后--------:visited

鼠标放在超链接上的时候（悬停）--------:hover

超链接激活的时候（鼠标点击但是不松手的时候）--------:active

代码：

 <style>
        /* 超链接点击之前是红色 */
        a:link{ color: brown; }
        /* 超链接点击之后是橙色 */
        a:visited{color: orange;}
        /* 鼠标悬停的时候的颜色是绿色 */
        a:hover{color: green;}
        /* 超链接被激活的时候是蓝色 */
        a:active{color: blue;}
        /* div:hover{color: blueviolet;} */
    </style>
</head>
<body>
    <a href="https://www.baidu.com/">点击我</a>
    <!-- <div>这是一个div</div> -->
</body>

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

5.伪元素选择器

伪元素用于设置元素指定部分的样式。

比如：它可以用于：设置元素的首字母，首行的样式；在元素的内容之前或之后插入内容。

:defore ------- css2 中 ::before ------- css3 中

:after -------- css2中 ::after -------- css3中

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

代码：

<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: brown;
            font-size: 30px;
        }
        p::before{content:"张三说" ;color: chocolate;}
        p::after{content: "对不对";color: crimson;}
    </style>
</head>
<body>
    <p>这是一个段落</p>
</body>

运行结果：

标签： css 前端 html
本文转载自: https://blog.csdn.net/2302_76643111/article/details/130673591
版权归原作者 guohilin 所有， 如有侵权，请联系我们删除。
登录后发布评论

“CSS的选择器”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

机器人技术在安全领域的重要作用

安全学习记录——网络篇（一）

图腾柱PFC：HP1010为您的电动两轮车之旅提供绿色，高效，安全的动力

单元测试数据库回滚问题

这才是单元测试，之前我们都错了

【C语言基础】：字符函数和字符串函数

ChatGPT-Next-Web SSRF漏洞+XSS漏洞复现(CVE-2023-49785)

文章导航