选择器的详解-CSDN博客

本文链接：https://blog.csdn.net/weixin_69821704/article/details/128691982

一、选择器的分类

1.全局选择器

<style>
        *{
            margin: 0;
            padding: 0;
        }
</style>

2.元素选择器

HTML文档中的元素，p、b、div、a、img、body等。

标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”

<style>
      h1{
          color: blue;
          font-size: 10px;
        }
</style>

温馨提示

所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input、div等
无论这个标签藏的多深，一定能够被选择上
选择的所有，而不是一个

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>Document</title>
    <style>
        .text{
            color: red;
            font-size: 30px;
        }

        .bage{
            border: 1px solid palevioletred;
        }
    </style>
</head>
<body>
    <!-- 同一个标签可以使用多个类选择器，中间用空格隔开 -->
    <p class="text bage">2023,新年快乐</p>
    <p>大展宏“兔”</p>
</body>
</html>

class属性的特点

类选择器可以被多种标签使用
类名不能以数字开头
同一个标签可以使用多个类选择器。中间用空格隔开

4.ID选择器

针对某一个特定的标签来使用，只能使用一次。css中的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>Document</title>
    <style>
        #root{
            width: 300px;
            height: 300px;
            background-color: aquamarine;
        }

        #types{
            width: 300px;
            height: 300px;
            background-color:tomato;
        }
    </style>
</head>
<body>
    <div id="root"></div>
    <div id="types"></div>
</body>
</html>

特别强调

ID是唯一的
ID不能以数字开头

5.合并选择器

语法：选择器1,选择器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>Document</title>
    <style>
        p,h1{
            color: red;
            font-size: 30px;
        }

        .text,.title{
            color: red;
            border: 1px solid pink;
        }
    </style>
</head>
<body>
    <p>2023,兔年快乐</p>
    <h1>新年快乐，平安喜乐，万事顺遂</h1>


    <p class="text">2023,兔年快乐</p>
    <h1 class="title">新年快乐，平安喜乐，万事顺遂</h1>
</body>
</html>

选择器的优先级

CSS中,权重用数字衡量

元素选择器的权重为: 1

class选择器的权重为: 10

id选择器的权重为: 100

内联样式的权重为: 1000

优先级从高到低: 行内样式 > ID选择器 > 类选择器 > 元素选择器

6.关系选择器

后代选择器
子代选择器
相邻兄弟选择器
通用兄弟选择器

1.后代选择器

选择所有被E元素包含的F元素，中间用空格隔开

E F{ }

中间空格隔开

<!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>Document</title>
    <style>
        ul li{
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>我是儿子标签1</li>
        <li>
            <ul>
                <li>我是孙子标签1</li>
                <li>我是孙子标签2</li>
            </ul>
        </li>
        <li>我是儿子标签3</li>
    </ul>
</body>
</html>

2.子代选择器

E>F{ }

选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用>表示

<!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>Document</title>
    <style>
        div>a{
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <a href="#">子元素</a>
        <p><a href="#">孙元素</a></p>
        <a href="#">子元素</a>
    </div>
</body>
</html>

3.相邻兄弟选择器

E+F{ }

E后面的第一个F生效

选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素

<!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>Document</title>
    <style>
        /* 相邻兄弟选择器：h1后面的第一个p标签生效 */
        h1+p{
            color: red;
        }
    </style>
</head>
<body>
    <h1>我是标题</h1>
    <p>第一个元素</p>
    <p>第二个元素</p>
</body>
</html>

4.通用兄弟选择器

E~F{ }

E后面的所有F生效

选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开

<!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>Document</title>
    <style>
        /* 通用兄弟选择器：h1后面的所有的p标签生效 */
        h1~p{
            color: red;
        }
    </style>
</head>
<body>
    <h1>我是标题</h1>
    <p>第一个元素</p>
    <p>第二个元素</p>
</body>
</html>

7.伪类选择器

同一个标签，根据其不同的状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示

超链接相关

:link “链接”：超链接点击之前（只适用于a）
:visited “访问过的”：链接被访问过之后（只适用于a）
:hover “悬停”：鼠标放到标签上的时候（适用于所有标签）
:active “激活”：鼠标点击标签，但是不松手时。（适用于所有标签）
:first-child ：匹配父类元素中第一个元素
:last-child ：匹配父类元素中最后一个元素
:nth-child() ：括号里面可以是数字，也可以是关键字，比如奇数(odd)，偶数(even)
:only-child 选择器匹配属于父元素中唯一子元素的元素，（了解）
:empty选择器选择每个没有任何子级的元素（包括文本节点），（了解）
:not(selector) 选择器匹配每个元素是不是指定的元素/选择器，（了解）
:focus选择器用于选择具有焦点的元素
:checked 选择器匹配每个选中的输入元素（仅适用于单选按钮或复选框）

温馨提示

记住，在css中，这四种状态必须按照固定的顺序写

如果不按照顺序，那么将失效。"爱恨准则"love hate。必须先爱，后恨。

1-----7

<!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>Document</title>
    <style>
        a:link{
            color: aquamarine;
        }

        a:visited{
            color: brown;
        }

        a:hover{
            color: pink;
        }
        
        a:active{
            color: greenyellow;
        }

        ul li:first-child{
            color: pink;
        }

        ul li:last-child{
            color: greenyellow;
        }

        ul li:nth-child(3){
            color: orange;
        }

        /* 奇数 */
        ol li:nth-child(odd){
            color: greenyellow;
        }

        /* 偶数 */
        ol li:nth-child(even){
            color: orange;
        }
    </style>
</head>
<body>
    <a href="https:jd.com">京东购物</a>

    <ul>
        <li>标签1</li>
        <li>标签2</li>
        <li>标签3</li>
        <li>标签4</li>
        <li>标签5</li>
    </ul>

    <ol>
        <li>标签</li>
        <li>标签</li>
        <li>标签</li>
        <li>标签</li>
        <li>标签</li>
        <li>标签</li>
        <li>标签</li>
        <li>标签</li>
        <li>标签</li>
        <li>标签</li>
    </ol>
</body>
</html>

8------12

<!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>Document</title>
    <style>
        div p:only-child{
            color: orange;
        }

        input:focus{
            border: 1px solid blue;
        }

        form input:checked{
            width: 30px;
            height: 30px;
        }
        
    </style>
</head>
<body>
    <div>
        <p>我是唯一p标签</p>
    </div>

    <div>
        <p>我是第一个p</p>
        <p>我是第二个p</p>
    </div>

    <input type="text">

    <form action="">
        <input type="checkbox" name="group" value="book">看书
        <input type="checkbox" name="group" value="game">游戏
        <input type="checkbox" name="group" value="movie">电影
    </form>
</body>
</html>

8.伪对象选择器

伪对象也叫伪元素，在过去，伪元素被书写成前面只加一个冒号，实际上应该是E::before/after

before，after选择器在被选元素的“内容”前面或后面插入内容，用来和content属性一起使用。虽然E:before/after可转化为E::before/after，但是你写伪元素是要规范，用两个冒号

<!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>Document</title>
    <style>
        h3::before{
            content: "";
            padding-left: 5px;
            background: greenyellow;
        }

        h2::after{
            content: "";
            padding-right: 5px;
            background: orange;
        }
    </style>
</head>
<body>
    <h3>资讯新闻</h3>

    <h2>时事热点</h2>
</body>
</html>

9.属性选择器

可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class和 id属性

值	描述
[attribute]	用于选取带有指定属性的元素
[attribute=value]	用于选取带有指定属性和值的元素
[attribute~=value]	用于选取属性值中包含指定词汇的元素
[attribute\|=value]	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词
[attribute^=value]	匹配属性值以指定值开头的每个元素
[attribute$=value]	匹配属性值以指定值结尾的每个元素
[attribute*=value]	匹配属性值中包含指定值的每个元素

<!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>Document</title>
    <style>
        p[class]{
            color: yellow;
        }
    </style>
</head>
<body>
    <p class="ignor">我是一个标签</p>
</body>
</html>

<!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>Document</title>
    <style>
        p[class=ignor]{
            color: greenyellow;
        }
    </style>
</head>
<body>
    <p class="ignor">我是一个标签</p>
</body>
</html>

<!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>Document</title>
    <style>
        p[class~=title]{
            color: red;
        }

        p[class|=zh]{
            color: blue;
        }
        p[class^=en]{
            color: orange;
        }
        p[class$=style]{
            color: pink;
        }
        p[class*=sh]{
            color: greenyellow;
        }
    </style>
</head>
<body>
    <p class="title _clear">2023年，新年快乐</p>
    <p class="title _target">2023年，新年快乐</p>

    <p class="zh-name">这是第一个段落</p>
    <p class="en-name">这是第二个段落</p>
    <p class="en-namestyle">这是第三个段落</p>
    
    <p class="sh-iphone">手机</p>
    <p class="sh-computer">电脑</p>
    <p class="sh-smallcomputer">平板</p>
</body>
</html>