CSS3属性选择器

<h1>CSS3中属性选着器增加了3个</h1>

[att*=val]属性选择器
如果元素用att表示的值包含用val指定的字符，那么该元素使用这个样式。
[att^=val]属性选择器
如果用att表示属性值的开头字符用val指定字符的话，那么该元素使用这个值。
[att$=val]属性选着器
如果元素用att表示的属性的属性值的结尾字符为用val指定的字符，那么该元素使用这个样式

[att*=val]属性选择器 [att^=val]属性选择器 [att$=val]属性选择器

<h1>结构性伪类选择器</h1>

1.伪类选择器
这个是CSS3一起的内容在此就不多讲了！
2.伪元素选择器
1. first-line 
选择器用于选取指定选择器的首行。
2.first-letter
用于选择指定的元素的首个字母
3.before
用于在元素之前插入元素
4.after
用于在元素之后插入元素

伪元素选择器

<h1>CSS3结构性伪类选择器</h1>

选择器root，not，empty和target
1.root
选择文档的根元素。
2. :not(*selector*)
:not(selector) 选择器匹配非指定元素/选择器的每个元素。排出它的效果
3.empty
内容为空白是时候使用的样式
4.target
URL 带有后面跟有锚名称 #，指向文档内某个具体的元素。这个被链接的元素就是目标元素(target element)。
:target 选择器可用于选取当前活动的目标元素。

root not empty 点到拉个那个变

<h1>CSS3选择器详解二</h1>

1.选择器的：first-child ,last-child,nth-child和nth-last-child
利用first-child ,last-child,nth-child和nth-last-child能够特别针对一个父元素中的第一个子元素，最后一个子元素，
指定序号的子元素，甚至第偶数个或第奇数个子元素进行样式的指定。

last-child与first-child nth-child与nth-last-child 奇数 偶数

2.选择器：nth-of-type 和nth-last-of-type 
CSS3在计算子元素是第奇数个子元素还是第偶数个子元素时，就只针对同类型子元素进行计算。
(奇偶只计算同类标签)

nth-of-type

<h3>第二部分小节</h3>、

image.png

<h4>only-child选择器</h4>

特点情况可以使用only-child选择器来代替nth-child和nth-last-child实现方法

image.png image.png

<h1>第三部分</h1>

UI元素状态伪类选择器
通用兄弟元素选择器

UI元素状态伪类选择器 One two

<h3>最后一个通用兄弟选择器</h3>

关于选择器，最后一个简绍的是通用兄弟元素选择器，他用来指定同一父元素之中的某个元素之后其他某个钟类的兄弟元素所使用的样式。

image.png