css—其他选择器和伪类选择器

一.兄弟选择器

格式：
```
<ul>
    <li class="aaa">我是哥哥li</li>
    <li>我是弟弟1</li>
    <li>我是弟弟2</li>
</ul>
```
1.选择器1~选择器2{...}

(找所有的弟弟元素) （以下代码两个弟弟都可以出来）
```
.aaa~li{
 background-color: aqua;
}
```
2.选择器1+选择器2{...}

(找紧挨着的那一个弟弟元素) (以下代码出来的是我是弟弟1)
```
.aaa+li{
 background-color: aqua;
}
```
二.属性选择器
格式：
```
        <ul>
            <li class="aa2">第一个li</li>
            <li id="aa3">第二个</li>
            <li>第三个li</li>
            <li class="bb3">第四个li</li>
        </ul>
```
1. [属性名]{。。。。}
  
  被选择出来的元素只要具有这个属性即可
```
[class]{
     background-color: aqua;
}    
这样就可以选出第一个和第四个
```
2. [属性名="指定的属性值"]
  
  被选择出来的元素要具有这个属性且属性值以指定的值
```
[id="aa3"]{
     background-color: aqua;
}
这样可以选出第二个
```
3. [属性名^='指定的值']
  
  被选择出来的元素要具有这个属性且属性值以指定的值开头
```
[class^="aa"]{
     background-color: aqua;
}
这样就可以选出第一个和第二个
```
4. [属性名$='指定的值']
  
  被选择出来的元素要具有这个属性且属性值以指定的值结尾
```
[class^="3"]{
     background-color: aqua;
}
这样就可以选出第二个和第四个
```
5. [属性名*='指定的值']
  
  被选择出来的元素要具有这个属性且属性值中只要包含指定的值即可
  
  三.伪类选择器
  - 作用：给元素的某一种状态添加样式
    - ui伪类—静态伪类，只能在a标签上使用
      - :link 选中没有访问过的链接添加样式
      - :visited 选中访问过的链接添加样式
    - 动态伪类，所有标签都可以使用
      - :hover 鼠标悬停时的状态添加样式
      - :active 给激活时的状态添加样式（鼠标按下没有松开时的状态）
      - :focus 聚焦时的状态添加样式（通常在input表单使用）
  ——在a标签上可以使用的4个伪类又叫做超链接伪类，超链接伪类在设置的时候要注意书写顺序 l v h a （爱恨原则 love hate）不能写错顺序否则无效
  
  四.结构伪类选择器
```
<body>
    <ul>
        <li>开始啦</li>
        <li class="first">我是第1个li</li>
        <li>我是第2个li</li>
        <li>我是第3个li</li>
        <li>我是第4个li</li>
        <li>我是第5个li</li>
        <li>我是第6个li</li>
        <li>我是第7个li</li>
        <li>我是第8个li</li>
    </ul>
    <div>
        <h1>标题1</h1>
        <h1>标题2</h1>
        <h1>标题3</h1>
        <br>
        <br>
        <span>span1</span><span>span2</span><span>span3</span><span>span4</span><span>span5</span>
    </div>
</body>
```
  - :first-child
    
    选择出的标签是其父元素中的第一个元素
```
<head>
<style>
li:first-child {
    background-color: red;
}
<style>
<head>
 这样可以选出开始啦
```
  - :last-child
    
    选择出的标签是其父元素中的第最后一个元素
```
li:last-child {
            background-color: blue;
 }
这样可以选出我是第8个li
```
  - :nth-child(n)
    
    选择出的标签是其父元素中的第n个子元素
    
    n的取值 0 1 2 3 4 5 6 。。。
    
    2n 偶数项的子元素或 even
    
    0 2 4 6 8 10 12。。。。
    
    2n+1 奇数项的子元素或 odd
    
    1 3 5 7 9 11 13 。。。
    
    3n 3的倍数
    
    前3个 -n+3
    
    从第3个开始往后的 n+3 ！这里要注意n要写在前边，不能说n+3
    
    :first-child :last-child :nth-child(n)这三个都是不区分标签类型的
```
li:nth-child(2) {
            background-color: blue;
        }
这样可以选出我是第一个li
li:nth-child(even) {
            background-color: red;
        }
这样可以选出我是第1 3 5 7个li（偶数）
```
  - :first-of-type :last-of-type :nth-of-type(n)
    
    在父元素中的子元素按照类型分类，:first-of-type找同类型中的第一个
    
    在父元素中的子元素按照类型分类，:last-of-type找同类型中的最后一个
    
    在父元素中的子元素按照类型分类，:nth-of-type找同类型中的第n个
    
    用法和上面三个类似，但是区分标签类型
```
div :last-of-type {
            background-color: aqua;
        }
比如这个就选中span5 br的第二个和标题三
就是说，不同类型标签的最后一个
```
  - :not() 排除哪一个标签
    
    排除哪一个标签
```
ul li:not(.first){
            background-color: antiquewhite;first
        }
这样可以把ul里的所有li都选中 除了我是第1个
```

css—其他选择器和伪类选择器

css—其他选择器和伪类选择器

一.兄弟选择器

格式：

1.选择器1~选择器2{...}

2.选择器1+选择器2{...}

二.属性选择器

格式：

[属性名]{。。。。}

[属性名="指定的属性值"]

[属性名^='指定的值']

[属性名$='指定的值']

[属性名*='指定的值']

三.伪类选择器

作用：给元素的某一种状态添加样式

ui伪类—静态伪类，只能在a标签上使用

动态伪类，所有标签都可以使用

四.结构伪类选择器

:first-child

:last-child

:nth-child(n)

:first-child :last-child :nth-child(n)这三个都是不区分标签类型的

:first-of-type :last-of-type :nth-of-type(n)

:not() 排除哪一个标签