CSS选择器

CSS 选择器是 CSS 规则的第一部分。它是元素和其他部分组合起来告诉浏览器哪个 HTML 元素应当是被选为应用规则中的 CSS 属性值的方式。选择器所选择的元素，叫做“选择器的对象”。

选择器分类

标签选择器也叫元素选择器，根据标签名选中指定的元素。

       p {
            color: red;
       }

类选择器 根据元素class属性值选择指定的元素，语法是.classValue。

       .blue {
            color: blue;
       }

ID选择器 （在CSS中不常用）根据元素id属性值选择指定的元素，语法是#idValue。

       #first {
            color: red;
       }

通配符选择器 选中页面中所有元素，语法是*。

       * {
            color: pink;
       }

交集选择器 选择满足多个条件的元素，比如以下代码就是选出类名为red的div元素。如果有元素选择器，则必须用元素选择器开头。语法是连着写。

        div.red {
            font-size: 30px;
        }

并集选择器 同时选择多个选择器对应的元素，语法是用,隔开。

        h1, span {
            color: green;
        }

父子选择器 选中指定父元素的指定一级子元素，语法是用>隔开。

        div > p {
            width: 200px;
            height: 200px;
            background-color: bisque;
        }

派生选择器 选中指定父元素内的所有级别的指定子元素，语法是用空格隔开。

        div  span {
            width: 100px;
            height: 100px;
            background-color: bisque;
        }

兄弟选择器 选中指定元素后面的指定元素，语法有两种。

+选择后面一个指定元素

        p + span {
            color: red;
        }

~选择后面所有的指定元素。

        p ~ span {
            color: red;
        }

属性选择器 根据元素的属性选择元素，语法是有五种

[attr] 选择含有指定属性的元素

        p[title] {
            color: red;
        }

[attr=value] 指定属性值的元素

        p[title=abc] {
            color: red;
        }

[attr^=value] 选择属性值以指定值开头的元素
[attr$=value] 选择属性值以指定值结尾的元素
[attr*=value] 选择属性值中含有指定值的元素

伪类选择器，伪类是一种不存在的特殊的类，用于指定所选元素的特殊状态（比如第一个子元素、被点击的元素，鼠标悬停的元素等），语法是:。

first-child last-child nth-child(n), n表示第n个子元素，也可以取一些特殊值，比如even偶数位的元素、odd奇数位的元素。这三种伪类是根据所有子元素进行排序的。

        ul > li:nth-child(6) {
            color: red;
        }

first-of-type last-of-type nth-of-type 这三种伪类和以上三种类似，区别在于它们是根据同类型元素进行排序的。
not() 否定伪类，将符合条件的元素从选择器中去除。

        ul > li:not(:nth-child(3)){
            color: red;
        }

伪元素选择器，伪元素是一种特殊的行内元素，伪元素位于目标元素内部，允许你对目标元素的特定部分修改样式。比如可用于在元素开始位置添加小图标，添加后台内容等，语法是::。

::first-letter 表示指定元素的第一个字母

        p::first-letter {
            font-size: 50px;
        }

::first-line 表示指定元素的第一行
::selection 表示指定元素被选中的部分
::before 表示元素的开始位置，::after 表示元素的末尾位置，需要配合content属性使用。

        /* 在p元素的开始位置添加abc文字 */
        p::before {
            content: 'abc';
            color: red;
        }
        
        /* 在p元素的末尾位置添加def文字 */
        p::after {
            content: 'def';
            color: blue;
        }

选择器权重

当我们通过不同的选择器选中相同的元素，并且为同一样式设置不同值时，就会发生样式的冲突，最终样式应用是由选择器的权重（优先级）决定的。

选择器的权重值如下

* 0, 0, 0, 0
标签 | 伪元素 0, 0, 0, 1
class | 属性 | 伪类 0, 0, 1, 0
id 0, 1, 0, 0
内联样式 1, 0, 0, 0
important 正无穷

比较优先级时，需要将所有选择器的权重进行累加然后比较大小（分组选择器是单独计算的），累加不会超过其最大数量级，比如类选择器权重的累加不会超过id选择器的权重。

在计算机中正无穷 < 正无穷 + 1
权重是按256进制计算的

如果优先级相同，则按照CSS书写顺序决定样式应用。