Css新增选择器
之前写Css ， 用的最多的选择器就是id选择器和类选择器了 ， 虽然基本上能满足写页面的各种需求 ， 但有些Css写法还是有些冗杂 。今天通过对Css新增选择器的学习 ， 能让之后的代码更加优化 。
结构（位置）伪类选择器（CSS3）
li:first-child { /*选择第一个孩子 */color: pink; }li:last-child {/* 最后一个孩子 */color: purple;}li:nth-child(4) {/* 选择第4个孩子n代表 第几个的意思 */ color: skyblue;}
目标伪类选择器（CSS3）
:目标伪类选择器：选择器可用于选取当前活动的目标元素
:target{color:red;font-size：30px;}
属性选择器
选取标签带有某些属性的选择器 我们称为属性选择器
/*获取到拥有该属性的元素*/div[class^=font]{ /* class=^font表示font开始位置就行了*/color:pink;}div[class$=footer]{ /*class$=footer 表示footer结束位置就行了 */color:skyblue;}div[class*=tao]{ /*class*=tao*=表示tao在任意位置都可以*/color;green;}
属性选择器属性选择器属性选择器属性选择器属性选择器属性选择器123属性选择器footer属性选择器footer属性选择器属性选择器属性选择器
伪元素选择器（CSS3） E::first-文本的第一个单词或字（如中文、日文、韩文等）E::first-line 文本第一行；E:: 可改变选中文本的样式；
p::first-letter {font-size: 20px;color: hotpink;}/* 首行特殊样式 */p::first-line {color: skyblue;}p::selection {/* font-size: 50px; */color: orange;}
文章插图
E::和E::after
在E元素内部的开始位置和结束位创建一个元素 ， 该元素为行内元素 ， 且必须要结合属性使用 。
div::befor {content:"开始";}div::after {content:"结束";}E:after、E: 在旧版本里是伪元素 ， CSS3的规范里“:”用来表示伪类 ， “::”用来表示伪元素 ， 但是在高版本浏览器下E:after、E:会被自动识别为E::after、E:: ， 这样做的目的是用来做兼容处理 。
“:” 与 “::” 区别在于区分伪类和伪元素
之所以被称为伪元素 ， 是因为他们不是真正的页面元素 ， html没有对应的元素 ， 但是其所有用法和表现行为与真正的页面元素一样 ， 可以对其使用诸如页面元素一样的css样式 ， 表面上看上去貌似是页面的某些元素来展现 ， 实际上是css样式展现的行为 ， 因此被称为伪元素 。是伪元素在html代码机构中的展现 ， 可以看出无法伪元素的结构无法审查
注意
伪元素:和:after添加的内容默认是元素**；这个两个伪元素的属性 ， 表示伪元素的内容,设置:和:after时必须设置其属性 ， 否则伪元素就不起作用 。
背景缩放（CSS3）
通过-size设置背景图片的尺寸 ， 就像我们设置img的尺寸一样 ， 在移动web开发中做屏幕适应非常广泛 。
其参数设置如下：
a)可以设置长度单位（px）或百分比（设置百分比时 ， 参照盒子的宽高）
b）设置为cover时 ， 会自动调整缩放比例 ， 保证图片始终填充满背景区域 ， 如有溢出部分则会被隐藏 。我们平时用的cover最多
c）设置为会自动调整缩放比例 ， 保证图片始终完整显示在背景区域
background-image: url('images/gyt.jpg');background-size: 300px 100px;/* background-size: contain; *//* background-size: cover; */