选择器及伪类选择器、伪元素

基本选择器

1. id 名
2. class 类
3. *通配符
4. 标签选择器

复合选择器

交集选择器

1.div.box{
    /*标签div的类名为box的*/
    }
2. .box.box1{
    /*有box类名且还有.box1类名的*/
    }

并集选择器

.box,box1{
    /*标签为boxt和box1的标签*/
    }

关系选择器

1. >    子代选择器 儿子为子代
2. 空格 后代选择器 元素下面的所有元素都为后代
3. ~    兄弟选择器 有相同父亲的元素即兄弟
    选中下一个兄弟
4. +    相邻兄弟选择器
    选择下边所有兄弟（除开自己）

样式优先级

金子塔顶端的权重最高，会覆盖向下的元素属性
权重是256进制

伪类选择器

状态类：

1. :link        /*未访问链接*/
2. :visited     /*已访问链接*/
3. :hover       /*用户鼠标悬停*/
    该伪类表示鼠标箭头放在被选中的元素上的状态，可以用于任意元素上
4. :active      /*激活链接*/
    该伪类表示表单元素、链接等元素被激活的状态，此处被激活的概念比较特殊（对于输入框而言，是鼠标左键按下且未抬起的时候；对于a元素，也是鼠标左键按下且未抬起的时候）
5. :checked     
    该伪类表示表单元素被选中的状态，可以用于单选按钮，复选框等元素上
6. :focus    
    该伪类表示当用户点击,触摸,通过键盘的 “tab” 键选择表单元素、链接等元素时会被触发
7. :focus-within 
    一个元素获得焦点，该元素后代都获得焦点
    CSS唯一一个子元素状态聚焦，父元素监控
8. :not()选择器

结构类：

1. :nth-child()
    这个 CSS 伪类首先找到伪类前选择器选中的元素的所有兄弟元素，然后按照位置先后顺序从1开始排序，选择第（n）个元素。
2. :nth-last-child()
    它基本上和 :nth-child 一样，只是它从结尾处反序计数，而不是从开头处
3. :nth-of-type()
    这个选择器匹配那些在伪类前所选中的元素的相同兄弟节点中的位置与 :nth-of-type()括号中 匹配的元素
4. :nth-last-of-type ()
    它基本上和 :nth-of-type 一样，只是它从结尾处反序计数，而不是从开头处
5. :first-child
    选择在父元素中第一个（且必须是第一个)出现的<ul>
6. :first-of-type
    选择在父元素中第一个出现的<ul>，而不管其在兄弟内的位置如何
    

代码：

.box li:nth-child(2) img{
            left: 220px;
        } 
.box li:nth-of-type(1) img{
            left: 220px;
        } 

属性类

1. attr
    该选择器选择伪类前选择器所选中的元素中间包含 attr 属性的元素（attr是属性名称）
2. attr=val
    该选择器仅选择 attr 属性被赋值为 val 的所有元素。（attr是属性名称，val是属性值）
3. attr~=val
   该选择器选择 attr 属性中包含值为 val 的所有元素。（attr是属性名称，val是属性值，~是包含的意思）
4. attr^=val
    选择attr属性的值以 val 开头（包括 val）的元素（^是以xx为开头的意思）
5. attr$=val
    选择attr属性的值以 val 结尾（包括 val）的元素（$是以xx为结尾的意思）
6. attr*=val
    选择attr属性的值中包含字符 val 的元素（一个子字符串就是一个字符串的一部分而已，例如，”cat“ 是 字符串 ”caterpillar“ 的子字符串）
    

伪元素

1. ::before
    创建一个伪元素，其将成为匹配选中的元素的第一个子元素
2. ::after
   创建一个伪元素，其将成为匹配选中的元素的最后一个子元素
   
伪元素的content 样式用于在元素的 ::before 和 ::after 伪元素中插入内容,这个虚拟元素默认是行内元素

伪元素的目的即为现有选中的元素内部增加第一子元素和最后一个子元素，目的是为了能够增加显示的内容，所以伪元素一定要有content样式来激活伪元素，哪怕content样式的内容是空着的“”，也得加上去，一旦没有写content样式，伪元素即失效

content样式值种类

none不会产生伪类元素
normal :效果同上
文本内容：展示字符内容
url()：URI值会指定一个外部资源（比如图片）。如果该资源或图片不能显示，它就会被忽略或显示一些占位符（比如无图片标志）。

伪元素的优点：

伪元素不会影响结构选择器（伪元素无法通过其他选择器选中！！！）
伪元素不会被搜索引擎收录，不会影响网页的SEO