CSS选择器 – 源码巴士

css(前端三要素之一)
    1.介绍
        作用：修饰页面
        CSS：叠层样式表
            叠层：多个样式用于同一个元素
            样式： color   font-size
            表： css代码，css文件
            选择器   样式   布局

工作原理：加载html,然后加载css，将html和css结合，创建DOM树，浏览器显示DOM
DOM ：文档对象模型，树形结构，元素，属性，文本称之为节点

    2.语法
        声明
            属性名：属性值
            CSS中区分大小写，对大小写比较敏感
        声明块
            将多个声明放在一个“{}”里面，每个声明之间使用“；”分隔

  {
        color : red;
        font-size : 12px;
  }

        规则
            选择器{
                color:red;
            }

        注释：/*注释内容*/
            作用：记录你的编程思路
                      便于后期代码的维护

空白：可以在CSS代码中添加一些空白（空格，回车），提高代码的可读性

color:red;
font-size:12px;

速写形式（简便）
内边距：

padding : 1px 2px 3px 4px;

等价于：padding-top: 10px;

padding-right: 15px;

padding-bottom: 15px;

padding-left: 5px;

                                padding-top        上边距
                                padding-bottom        下边距
                                padding-left        左边距
                                padding-right        右边距

如何在html中使用CSS

                浏览器将CSS规则应用到文档上，使CSS影响文档的显示。CSS规则由选择器和一系列的属性对组成。一系列的CSS规则就可以形成一个层叠样式表。
        （1）.行内样式
            将CSS规则写到元素的style属性中，只能作用于一个元素，一般不推荐使用。

<!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>
</head>
<body>
    <div style="color: navy;">行内样式</div>
</body>
</html>

            缺点：结构和样式没有分离
                       代码的复用率低
            优点；优先极高

（2）.内联样式

将CSS规则写到<style>标签内，在不能直接更改CSS文件情况下，这种方式有效，但是一般不推荐使用，修改起来不方便。

<!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{
            background-color: orchid;
        }
        p{
            color: palegreen;
        }
    </style>

</head>
<body>
    <div>内联1</div>
    <p>内联2</p>
</body>
</html>

缺点：代码的复用率不高
优点：结构和样式可以分离

（3）.外部样式

将CSS规则写到一个以“.css”为后缀的文件中，然后使用HTML中的<link>标签将CSS文件应用到HTML文档中，或者在style标签的第一行使用@import 'style.css';导入

<!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>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div>外部样式</div>
</body>
</html>

优点：结构和样式可以分离
复用率提高

           选择器 + 规则（样式） + 布局 + 动画

    3.css选择器
        作用：选择元素
        核心选择器
            （1）.标签选择器

标签选择器又叫元素选择器，换句话说，文档的元素就是最基本的选择器，使用元素名称直接选中元素即可。

                div{
                    规则；
                    规则；
                    ......
                }
                选中标签为div的所有元素

（2）.id选择器

ID选择器以"#"开头，后面紧跟一个ID名，在一个文档中，ID值不能重复，因此在选择文档中唯一元素的时候该选择器比较有用。

                #id{
                    规则；
                    规则；
                    ...
                }

（3）.类选择器

                 类选择器以点"."开头，后面紧跟一个类名。类名不允许有空格，与元素中class属性的值保持一致。一个元素可以有多个class的值，每个值通过空格分割开。类名相同的元素属于一类元素。
                .class{
                    规则；
                    规则；
                    ...
                }

（4）.普通选择器
使用"*”来表示普遍选择器，表示选择所有元素，通常用在组合选择器中。

             层次选择器
                        ul li{
                            规则；
                            规则；
                            ...
                        }

选中ul下面所有的li

                    子代选择器
                        .bottom > p {
                            规则；
                            规则；
                            ...
                        }

选中class为bottom的直接子元素p

                    相邻同胞选择器
                        .jiangsu + li {
                            规则；
                            规则；
                            ...
                        }

选中class为江苏这个元素的下一个兄弟元素

                    一般同胞选择器
                        .jiangsu ~li {
                            规则；
                            规则；
                            ...
                        }

选中class为江苏的所有兄弟元素

                 多选择器
                    逗号选择器
                        h1,h2,h3,.test{
                            规则；
                            规则；
                            ...
                        }

选中 h1,h2,h3，class为test的元素

                    组合选择器
                        a.baidu{
                            规则；
                            规则；
                            ...
                        }

选中class为baidu的a标签

<!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 {
            background-color: aquamarine;
        }

        #top{
            color: cornflowerblue;
        }

        .content{
            background-color: darkseagreen;
            color: deeppink;
        }

        *{
            font-size: 20px;
        }

        ul li{
            color: lawngreen;
        }

        .bottom{
            color:lightseagreen ;
        }

        .jiangsu~li{
            color: lightslategrey;
        }

        h1,
        h2,
        h3,
        .test{
            color: mediumblue;
        }

        a.baidu{
            color:brown;
        }

    </style>
</head>
<body>
    <div>标签选择器</div>
    <div>test</div>
    <p id="top">id选择器</p>
    <span class="content">类选择器</span>
    <ul>
        <li>html</li>
        <li>css</li>
        <li>
            <span>前端</span>
        </li>
        <li>js</li>
    </ul>
    <ul>
        <li>苹果</li>
        <li>橘子</li>
        <li>西瓜</li>
    </ul>

    <div class="bottom">
        <p>第一个p标签</p>
        <p>第二个p标签</p>
        <div>
             <p>第三个p标签</p>
        </div>
    </div>

    <ul>
        <li class="jiangsu">江苏省</li>
        <li>山西省</li>
        <li>上海市</li>
    </ul>

    <h1>我是一个h1</h1>
    <h1>我是一个h2</h1>
    <h1>我是一个h3</h1>
    <span class="test">test</span>

    <a class="baidu" href="#"> 百度一下！</a>
    <a href="#">淘宝</a>

</body>
</html>

                属性选择器
                    [atrr] 选中具有属性atrr的元素，不管属性的值为多少
                    [atrr=val] 选中具有atrr属性，并且值为val
                    [atrr^=val]    选中具有atrr属性，并且值以val开头
                    [atrr$=val]    选中具有atrr属性，并且值以val结束
                    [atrr*=val]    选中具有atrr属性，并且值包含val
                    [atrr~=val]    选中具有atrr属性，并且其中一个值为val

<!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>
        
        [class^=t]{
            color:cornflowerblue;
        }
        [class~=hello]{
            color: orange;
        }
    </style>
</head>
<body>
    <div class="test test1 test3">属性选择器1</div>
    <div class="test2">属性选择器2</div>
    <div class="hello">属性选择器3</div>
</body>
</html>

                伪类选择器
                    （1）子代元素相关的伪类选择器
                        :only-child              选中独生子元素
                        :first-child            选中作为别人第一个孩子的元素
                        :last-child                选中作为别人最后一个孩子的元素
                        :nth-child(n)             选中作为别人第几个孩子元素的元素
                        :nth-last-child(n)         选中作为别人倒数第几个孩子的元素
                        :first-of-type             选中作为别人每种类型中的第一个孩子的元素
                        :last-of-type            选中作为别人每种类型中的最后一个孩子的元素
                        :nth-of-type(n)            选中作为别人每种类型中的第几个孩子的元素
                        :nth-last-of-type(n)    选中作为别人每种类型中的倒数第几个孩子的元素

                        ul:first-child{
                            规则；
                            规则；
                            ...
                        }

选中ul的第一个孩子

                        ul:last-child{
                            规则；
                            规则；
                            ...
                        }

选中ul中的最后一个孩子

                        ul:nth-child(参数){
                            规则；
                            规则；
                            ...
                        }

                        参数的取值：
                            数字
                            关键字（odd=>奇数，even=>偶数）

选中参数值的孩子

（2）元素转态相关的

                        :link          未被访问的状态，a标签
                        :visited     已访问过的状态，a标签
                        :hover     鼠标悬停的状态，a标签，其他标签也可用
                        :active     活动的状态， a标签，其他标签也可用
                        :focus     聚焦的状态
                        :checked   用户选中的单选按钮和复选按钮
                        :default   默认选中的单选按钮和复选按钮
                        :enabled、 :disabled    可用的表单控件、禁用的表单控件
                        :valid 、:invalid    通过验证的、不通过验证的
                        :required、:optional   必填的和选填的
                        :in-range 、:out-of-range   在范围内的、在范围外的

（3）伪元素选择器：伪元素以"::"开头，用在选择器后，用于选择指定的元素。

                        ::after         选中之后的不存在的节点，可配合content属性进行内容填充
                        ::before          选中之前的不存在的节点，可配合content属性进行内容填充
                        ::first-letter       选中第一个文本字符
                        ::first-line          选中第一行文本
                        ::selection        选中用户在选择的时候的文本

<!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>

        .bottom:only-child{
            background-color: crimson;
        }
        
        ul li:nth-child(2){
            background-color: paleturquoise;
        }

        .top:hover{
            background-color: palevioletred;
            color:powderblue;
            cursor: pointer;
        }

        .baidu:hover{
            background-color: rebeccapurple;
        }

        .input:focus{
            background-color: red;
        }

        .line::before{
            content: 'hello world';
            display: block;
        }

        .content::selection{
            color: rosybrown;
        }

    </style>
</head>
<body>
    
    <div class="bottom">
        <p>独生子</p>
    </div>

    <div class="top">
        <p>tom</p>
        <p>lily</p>
        <p>lily</p>
        <p>lily</p>
        <p>lily</p>
        <p>lily</p>
    </div>

    <ul>
        <li>html</li>
        <li>html</li>
        <li>html</li>
        <li>html</li>
        <li>html</li>
        <li>html</li>
    </ul>

    <a class="baidu" href="#">百度</a>
    <input type="text" class="input">
    <div class="line">------</div>
    <div class="content">yuantongxin</div>


</body>
</html>

原文链接：https://blog.csdn.net/qq_43641110/article/details/119423366