css3选择器

css3属性选择器

1 <img src="./images/cat.jpg" alt="" title="mao-cat mao maomi">
2 <img src="./images/cat.jpg" alt="" >
3 <img src="./images/cat.jpg" alt="" title="mao3 kiki"> -->

给上面的img增加宽高
1: 选择符[属性名] 只要带有当前属性名就会被选中。
img[title] { 宽高属性} 有title属性的img就会被选中 1和3 被选中宽高变化

     1 <img src="./images/cat.jpg" alt="" title="mao-cat mao maomi">
     2 <img src="./images/cat.jpg" alt=""  title=“mao”>
     3 <img src="./images/cat.jpg" alt="" title="mao3 kiki"> 

给上面的 img 增加宽高
2: 选择符[属性名=“属性值”] 不仅制定属性名，有指定属性值
img[title=”mao”]{宽高属性} 只有 2 被选中 属性只有一个值时候用

3: 选择符[属性名~=“属性值”] 属性值为一个词列表，只要包含当前词就会被选中
img[title~=”ma”]{宽高属性} 1和 2 都被选中 只有mao三个字母的才行 mao3不会被选中

4: 选择符[属性名^=“属性值”] 属性值必须是当前指定的属性值开头的
img[title^=”m”] 1 2 3都被选中 有m开头的就会被选中

5：选择符[属性名$=“属性值”] 属性值必须是当前指定的属性值结尾的
img[title^=”i”] 1和3都被选中 有i结尾的就会被选中

6: 选择符[属性名=“属性值”] 属性值中只要包含了指定的字符就会被选中*
img[title*=”ma”]{宽高属性} 123都被选中 只要含有ma就行

 1 <img src="./images/cat.jpg" alt="" title="mao-cat mao maomi">
 2 <img src="./images/cat.jpg" alt=""  title=“mao”>
 3 <img src="./images/cat.jpg" alt=""  title=“maoal”>
 4 <img src="./images/cat.jpg" alt="" title="mao3 kiki"> 

给上面的img增加宽高
7: 选择符[属性名|=“属性值”] 属性值仅是当前指定的属性值，或者是以属性值- 开头 （ left-con ）
img[title|=”mao”]{宽高属性} 23被选中 只有mao这一个属性值 或者只有一个以mao开头的属性值

注：空格也是一个字符 mao和mao 不一样，最后一个属性值后面空格再接”空格也是字符
title可以是其他属性

结构性伪类选择器：

**( 选择谁如li 选择符li就行写谁 ) 权重为10
如果子集标签类型一致（类名一致）的情况下：采用的是 child

<ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>5</li>
       <li>6</li>
       <li>7</li>
       <li>8</li>
 </ul> 

1 : 选择符:first-child{ } 选择 选择符所在子集的第一个元素
li:first-child{设置背景颜色} 选择第一个li

2 : 选择符:last-child{ } 选择 选择符所在子集的最后一个元素
li:last-child{设置背景颜色} 选择最后一个li

3 : 选择符:nth-child(val){}
val :
可以是某个数值 表示第几个
2n 或者 even 偶数 选择所有奇数序号的元素 135等
2n + 1 或者 odd 奇数 246等

4 : 选择符:nth-last-child(){} 倒数第几个

5 : 选择符:only-child{} 当前子集只有一个元素的时候才会被选择

例： <ul>
       <li>1</li>
       <li>2</li>
   </ul>
   <ul>
       <li>3</li>
   </ul> 

li:only-child{} 选中的是 3

如果子集合标签类型不一致（类名不一致）的情况下：采用的是  of-type 
of-type   先确定类型，把不同类型的先剔除。剩下同类的进行第几个选择。

 <!-- <nav>
       <li>l1</li>
       <h2>h1</h2>
       <li>l2</li>
       <li>l3</li>
       <h2>h2</h2>
       <h2>h3</h2>
       <li>l4</li>
       <h2>h4</h2>
       <li>l5</li>
   </nav> -->

直接用 h2:first-child{} 选择所在子集中第一个h2 但是浏览器找的是该子集第一个元素
第一个为li 浏览器会混淆
of-type 会先确定当前类型，把其他类型排除，在进行排序选择
1 : 选择符:first-of-type{ }选择 选择符所在子集第一个该类型选择符
h2:first-of-type{} 选择h2所在子集中第一个h2
2 : 选择符:last-of-type{ }
3 : 选择符:nth-of-type(val){}
val :
可以是某个数值 表示第几个
2n 或者 even 偶数
2n + 1 或者 odd 奇数
4 : 选择符:nth-last-of-type(){} 倒数第几个
5 : 选择符:only-of-type{} 当前子集只有一个元素的时候才会被选择
当ul 有两组时
例：

<!- <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>5</li>
   </ul>
<ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>5</li>
   </ul> -->

li:first-child{} 选择的是两个ul中的第一个ul
ul:nth-child(2) li:first:child{} 选中的是第二个ul中的第一个li 相当于ul也是在一个子集中，由ul构成的子集

拓展：
：root 选择的是根元素 html
：root{background：pink；} html背景为粉色
选择符:empty 当当前元素 没有任何 内容 或者 没有任何子元素的时候会被选中

 <!-- <ul>
       <li>1</li>
       <li></li>
       <li>2</li>
       <li>3</li>
   </ul> -->

li：empty{} 选中的是第二个li ，没有内容或者子元素