属性选择器结构伪类选择器伪元素选择器

# css选择器的补充 ## 属性选择器 1. 选择特定属性的标签

input[value] {}

如上选择了有value的input

选择特定属性的特定值的标签
```
intput[type=text] {}
```
选择出来的type的值是text的input

选择特定属性的值有规律的:开头的一样的某些元素

div[class^=icon] {
}

    <div class="icon1">小图标1</div>
    <div class="icon2">小图标2</div>
    <div class="icon3">小图标3</div>
    <div class="icon4">小图标4</div>

如上就选出来了 icon1到icon4 标签

选择特定属性的值有规律的:结尾一样的某些元素

section[class$=data] {}
    <section class="icon1-data"></section>
    <section class="icon2-data"></section>
    <section class="icon3-ico"></section>

如上选择出来的icon1-data和 icon2-data标签

选择特定属性的值有规律的:含有的一样的元素
```
div[class*=data]{}
    <section class="icon-data1"></section>
    <section class="icon-data2"></section>
```
这样就选出来，icon-data1，icon-data1标签。

补充

属性选择器的权重和类选择器的权重一致！。

结构伪类选择器

?-child

first-child

        ul :first-child {
            color: aqua;
        }
    <ul>
        <li>越行勤</li>
        <li>越行勤</li>
        <li>越行勤</li>
        <li>越行勤</li>
        <li>越行勤</li>
        <li>越行勤</li>
        <li>越行勤</li>
        <li>越行勤</li>
        <li>越行勤</li>
        <li>越行勤</li>
    </ul>

这样就选择出来的第一个<li>

我们在使用中经常会这样写ul li:first-child

这样的目的是选择器会检查我们选择出来的元素第一个是不是<li>

如果不是则不会选择任何标签，如下代码：
        ul li:first-child {
            color: aqua;
        }
    <ul>
        <p>越行勤</p>
        <li>越行勤</li>
        <li>越行勤</li>
        <li>越行勤</li>
        <li>越行勤</li>
        <li>越行勤</li>
        <li>越行勤</li>
        <li>越行勤</li>
        <li>越行勤</li>
        <li>越行勤</li>
        <li>越行勤</li>
    </ul>

如果要选最后一个那么就为 last-child

如果想选任意次序的子元素就为用nth-child(x)来选择第x个元素。

nth-child(x)的妙用

x可以是数字，关键字还可以是公式。

数字那么就选择第x行元素
关键字：even选择偶数， odd选择奇数
公式 n 的含义就是选择出来 1,2,3,4,5...n，如果是 2n 呢？那么选择出 2 ,4,6,8

2n-1那么就是奇数的元素；5n就选择出第5,10,15个元素;5-n就是选择出来的前五个元素

emmm以此类推吧。

注意这里只能用n 字母

实现这个效果就十分简单了，

    <style>
        li {
            list-style: none;
        }

        ul li:nth-child(even) {
            background-color: #959995;
        }
    </style>
<body>
    <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>
        <li>我是第9个子元素</li>
    </ul>
</body>

?-of-type

ta和child并没有啥大的区别，主要体现在这个方面

ul li:nth-of-type(3){}

这个选择器是先找出ul里的所有li ，然后在在里面找第3个

     `ul li:nth-of-type(3) {
         color: aqua;
     }
 <ul>
     <p>越行勤</p>
     <li>越行勤</li>
     <li>越行勤</li>
     <li>越行勤</li>
     <li>越行勤</li>
     <li>越行勤</li>
     <li>越行勤</li>
     <li>越行勤</li>
     <li>越行勤</li>
     <li>越行勤</li>
     <li>越行勤</li>
 </ul>

总结一下：

child是先找第几个标签，后看是否标签匹配

type是先找匹配的标签,后看选择出标签

child可能会选择不出来标签。

css伪元素选择器

这里简单介绍一下::before和 ::after

伪类选择器	实例	含义
::before	p::before	在每个元素之前插入内容（在p的内部）
::after	p::after	在每个元素之后插入内容（在p的内部）

我们伪类选择器可以帮我不用改变html文档来创建新元素。

创建的元素是行内元素
创建的元素html里找不到，成为伪元素
必须要有content属性（加入内容）
权重和标签选择器一样
before和after是在父盒子里面的

例如：

    <style>
        div {
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }

        div::before {
            content: "越";
        }
    </style>
<body>
    <div>行勤</div>
</body>

清除浮动的妙用

        .clearfix:before,
        .clearfix:after {
            content: "";
            display: table;
        }
 
        .clearfix:after {
            clear: both;
        }
 
        .clearfix {
            *zoom: 1;
        }