Ⅱ、普通兄弟选择器
兄弟选择符，位置无须紧邻，只须同层级，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 权值比无权值优先。
看到这里了点个赞吧！！！！
