Ⅱ、普通兄弟选择器

兄弟选择符，位置无须紧邻，只须同层级，A~B 选择A元素之后所有同层级B元素

语法：选择器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 ~ span {
            color: red;
        }
    </style>
</head>
<body>
    <span>span11</span>
    <p>pppp</p>
    <span>span22</span>
    <p>pppp</p>
    <span>span33</span>
</body>
</html>

4、css其他选择器

1）、根据属性名称选择元素

根据元素的属性名称及属性值来选择元素

语法： [attribute]{样式声明} （将具有"attribute"属性的元素作为选择器的选的对象）

<!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>
        [class]{
            font-size: 20px;
        }
        /* 属性名称也可以和标签结合起来用 */
        span[class]{
            font-size: 10px;
            color: red;
        }
    </style>
</head>
<body>
    <p>根据属性名称选择元素11</p>
    <p>根据属性名称选择元素22</p>
    <p class="class">根据属性名称选择元素33</p>
    <span class="class">根据属性名称选择元素44</span>
</body>
</html>

2）根据属性值来选择元素

Ⅰ、简单匹配元素

语法：[attribute=value] (表示匹配某个属性为value的元素)

如：[class=one]{font-size:15px}

Ⅱ、通过通配符匹配

我们先来看看个个通配符的含义（我只列出来部分常用的通配符）

5、css伪类

伪类是添加到选择器的关键字，用于指定所选元素的特殊状态。伪类主要分成为两种：状态伪类和结构性伪类

想看更加详细的伪类请点击这里

1）状态伪类

Ⅰ、锚伪类

锚伪类是与超级链接有关的伪类。

link：为被访问过的状态

hover：鼠标悬停状态

active：活动状态

visited：已被访问过的状态，与link互斥

需要注意的是：hover必须置于link和visited之后才有效，active必须置于hover之后才有效

<!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: red;
        }
        a:hover{
            color: black;
        }
        a:active{
            color: aqua;
        }
    </style>
</head>
<body>
    <a href="###">空链接</a>
</body>
</html>

未被访问：

鼠标悬停：

活动状态：

Ⅱ、focus伪类

focus 伪类应用于拥有键盘输入焦点的元素,比较常见的是表单中的一些控件,例如<input type = "text"/>这样的文本输入控件,用户向这个控件中输入数据之前，要使该控件获得焦点,可以通过伪类对获得焦点这一状态下的元素设置样式。

2）结构性伪类

元素名	描述
:first-child	匹配父元素的第一个子元素
: last-child	匹配父元素的最后一个子元素
: only-child	匹配父元素有且只有一个子元素

: only-of-type	匹配父元素有且只有一个指定类型的元素
: nth-child (n)	匹配父元素的第n个子元素
: nth-last-child (n)	匹配父元素的倒数第n个子元素

:nth-of-type (n	匹配父元素定义类型的第n个子元素>
: nth-last-of-type(n)	匹配父元素定义类型的倒数第n个子元素
: first-of-type	匹配一个上级元素的第一个同类子元素

: last-of-type

匹配一个上级元素的最后一个同类子元素

使用号结构性伪类可以减少class和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>
        ul li:nth-child(2n){
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
        <li>4444</li>
        <li>5555</li>
        <li>6666</li>
    </ul>
</body>
</html>

6、css伪元素

伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。

想看更加详细的伪元素请点击这里

常见伪元素选择器有：

：first-letter （选择元素文本的第一个字或者字符）

：first-line （选择元素文本的第一行）

：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>
        ul li:nth-child(2n){
            color: red;
        }
/*在第一个li的第一个字符添加新的样式*/
        li:first-child:first-letter{
           font-size: 25px;
           color: green;
        }
    </style>
</head>
<body>
    <ul>
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
        <li>4444</li>
        <li>5555</li>
        <li>6666</li>
    </ul>
</body>
</html>

7、css两大特性

1）继承性

文档的上下文关系，在HTML结构中大多使通过嵌套来表现的，继承性就是基于这种嵌套关系的子元素对于父元素样式的继承。继承性的特点主要包括两方面：

1、子元素继承父元素部分的css样式风格

2、子元素可以产生新的css样式，不会影响父元素

但是并不是所以的css属性都会被继承，父元素的以下属性不会被子元素所继承

·边框属性

·外边距属性、内边距属性

·背景属性

·定位属性、布局属性

·元素的宽、高属性

2）层叠性

样式表层叠——简单的说，就是 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>Document</title>
    <style>
        p{
            color: red;
        }
/*p样式重叠就会使用下面这样式*/
        p{
            color: black;
        }
    </style>
</head>
<body>
    <p>1111</p>
    <p>2222</p>
    <p>3333</p>
</body>
</html>

8、选择器的优先级

继承样式	通配符选择器	标签选择器	类选择器	ID选择器	内联样式	！important
无	0	1	10	100	1000	10000+

说明：

继承的样式没有权值
通配符、子选择器、相邻选择器等。如* > +，权值为0000。
类型选择器、伪元素选择器，如div p，权值为0001。
类，伪类、属性选择器，如.class，权值为0010。
ID选择器，如：#class，权值为0100。
内联样式，如: style="..."，权值为1000。
!important 的作用是提升优先级，换句话说。加了这句的样式的优先级是最高的（比内联样式的优先级还高)。

比较规则：

一、 1,0,0,0 > 0,99,99,99。也就是说从左往右逐个等级比较，前一等级相等才往后比。

二、无论是行间、内部和外部样式，都是按照这个规则来进行比较。而不是直观的行间>内部>外部样式；ID>class>元素。之所以有这样的错觉，是因为确实行间为第一等的权重，所以它的权重是最高的。而内部样式可能一般写在了外部样式引用了之后，所以覆盖掉了之前的。

三、在权重相同的情况下，后面的样式会覆盖掉前面的样式

四、通配符、子选择器、相邻选择器等的。虽然权值为0000，但是也比继承的样式优先，0 权值比无权值优先。

看到这里了点个赞吧！！！！

CSS 选择器（超级详细，欢迎补充）2