CSS新增选择器（一）

Css新增选择器

之前写Css，用的最多的选择器就是id选择器和类选择器了，虽然基本上能满足写页面的各种需求，但有些Css写法还是有些冗杂。今天通过对Css新增选择器的学习，能让之后的代码更加优化。

结构（位置）伪类选择器（CSS3）

• :first-child :选取属于其父元素的首个子元素的指定选择器
• :last-child :选取属于其父元素的最后一个子元素的指定选择器
• :nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型
• :nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。
  n 可以是数字、关键词或公式

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

目标伪类选择器（CSS3）

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

: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）

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;
	}

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属性，否则伪元素就不起作用。

背景缩放（CSS3）

通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动web开发中做屏幕适应非常广泛。
其参数设置如下：
a)可以设置长度单位（px）或百分比（设置百分比时，参照盒子的宽高）
b）设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。我们平时用的cover最多
c）设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域

background-image: url('images/gyt.jpg');
			background-size: 300px 100px;
			/* background-size: contain; */
			/* background-size: cover; */

Demo

多背景（CSS3）

以逗号分隔可以设置多背景，可用于自适应布局 做法就是用逗号隔开就好了。

• 一个元素可以设置多重背景图像
• 每组属性间使用逗号分隔
• 如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图片覆盖在后面的背景图片之上。为了避免背景将图像盖住，背景色通常都定义在最后一组上。

background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px  ,
	   url(test1.jpg) no-repeat scroll 10px 20px/70px 90px ,
	   url(test1.jpg) no-repeat scroll 10px 20px/110px 130px c #aaa;

Demo

凹凸文字

Demo

	
		
		
		
	
		
		
我是凸起的文字
    	
我是凹下的文字