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;
}
<div class="font12">属性选择器</div>
<div class="font12">属性选择器</div>
<div class="font24">属性选择器</div>
<div class="font24">属性选择器</div>
<div class="font24">属性选择器</div>
<div class="24font">属性选择器123</div>
<div class="sub-footer">属性选择器footer</div>
<div class="jd-footer">属性选择器footer</div>
<div class="news-tao-nav">属性选择器</div>
<div class="news-tao-header">属性选择器</div>
<div class="tao-header">属性选择器</div>
伪元素选择器（CSS3）
- E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
- E::first-line 文本第一行；
- E::selection 可改变选中文本的样式；
p::first-letter {
font-size: 20px;
color: hotpink;
}
/* 首行特殊样式 */
p::first-line {
color: skyblue;
}
p::selection {
/* font-size: 50px; */
color: orange;
}
- 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.test{
border: 1px solid blue;
width: 500px;
height: 600px;
background-image: url(../img/ax.jpg);
background-size: cover;
}
</style>
</head>
<body>
<div class="test">
</div>
</body>
</html>
多背景（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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.test{
border: 1px solid blue;
width: 500px;
height: 600px;
background: url(../img/ax.jpg) no-repeat scroll 10px 20px/50px 60px,
url(../img/ax.jpg) no-repeat scroll 60px 80px/70px 90px,
url(../img/ax.jpg) no-repeat scroll 130px 170px/110px 130px;
}
</style>
</head>
<body>
<div class="test">
</div>
</body>
</html>
凹凸文字
Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body {
background-color: #ccc;
}
div {
color: #ccc;
font: 700 80px "微软雅黑";
}
div:first-child {
/* text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色; */
text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
}
div:last-child {
/* text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色; */
text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
}
</style>
</head>
<body>
<div>我是凸起的文字</div>
<div>我是凹下的文字</div>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
