css3新增选择器

css3新增选择器

CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。CSS3选择器与 jQuery 中所提供的绝大部分选择器兼容。

属性选择器

选取标签带有某些特殊属性的选择器 我们成为属性选择器

1. 属性选择器的标志性符号是 []。

2. 匹配含义：
   ^：开头 $：结尾 *：包含

   
   属性选择器.png

/* 获取到 拥有 该属性的元素 */
div[class^=font] { /*  class^=font 表示 font 开始位置就行了 */
            color: pink;
        }
div[class$=footer] { /*  class$=footer 表示 footer 结束位置就行了 */
            color: skyblue;
        }
div[class*=tao] { /* class*=tao  *=  表示tao 在任意位置都可以 */
            color: green;
        }

结构(位置)伪类选择器

结构伪类选择器
伪类选择器的标志性符号是 :。
CSS中有一些伪类选择器，比如:link、:active、:visited、:hover，这些是动态伪类选择器。
CSS3又新增了其它的伪类选择器。这一小段，我们来学习CSS3中的结构伪类选择器：即通过结构来进行筛选。
常用的结构伪类选择器如下，‘’- :first-child :选取属于其父元素的首个子元素的指定选择器

1. :last-child :选取属于其父元素的最后一个子元素的指定选择器
2. :nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型
3. :nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。

n 可以是数字、关键词或公式
以上选择器中所选到的元素的类型，必须是指定的类型E，如果选不中，则无效。这个要好好理解，具体可以看CSS参考手册中的E:nth-child(n)的示例。我们可以理解成：先根据选择器找到选中的全部位置，如果发现某个位置不是类型E，则该位置失效。

li:first-child { /*  选择第一个孩子 */
                color: pink; 
            }
li:last-child {   /* 最后一个孩子 */
                color: purple;
            }
li:nth-child(4) {   /* 选择第4个孩子  n  代表 第几个的意思 */ 
                color: skyblue;
            }

总结表格如下：

结构伪类选择器.png

目标伪类选择器

:target目标伪类选择器 :选择器可用于选取当前活动的目标元素

:target {
        color: red;
        font-size: 30px;
}

伪元素选择器

伪元素选择器的标志性符号是 ::

1. E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
2. E::first-line 文本第一行；
3. E::selection 可改变选中文本的样式；

p::first-letter {
  font-size: 20px;
  color: hotpink;
}

/* 首行特殊样式 */
p::first-line {
  color: skyblue;
}

p::selection {
  /* font-size: 50px; */
  color: orange;
}

举例.png

4. E::before和E::after(重点)
   在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。

div::befor {
  content:"开始";
}
div::after {
  content:"结束";
}

E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。
":" 与 "::" 区别在于区分伪类和伪元素
之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查.

伪元素:before和:after添加的内容默认是inline元素；如果要设置宽高，需要先换成块儿元素或者行内块儿元素；这个两个伪元素的content属性，表示伪元素的内容,设置:before和:after时必须设置其content属性，否则伪元素就不起作用。**

伪元素选择器.png