前端之HTML5，CSS3（二）
CSS3新增选择器和样式
CSS3新增选择器
结构伪类选择器
:first-child：选取父元素中的第一个子元素的指定选择器
:last-child：选取父元素中的最后一个子元素的指定选择器
:nth-child(n)：选取父元素中的第n个子元素的指定选择器，n取小于等于子元素个数的正整数。当n取n值表示选取父元素中所有子元素；n取2n表示选取父元素中所有偶数的子元素，等同于:nth-child(odd)；n取2n+1表示选取父元素中所有奇数的子元素，等同于:nth-child(odd)。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器-测试</title>
<style type="text/css">
li {
list-style: none;
}
li:first-child {
color: red;
}
li:last-child {
color: blue;
}
li:nth-child(4) {
color: orange;
font-size: 16px;
}
/*li:nth-child(n) { 选取父元素中的所有元素
background-color: pink;
}
li:nth-child(2n) { 选取父元素中的偶数元素
background-color: white;
}
li:nth-child(2n+1) { 选取父元素中的奇数元素
background-color: yellow;
}*/
</style>
</head>
<body>
<ul>
<li>C</li>
<li>java</li>
<li>python</li>
<li>C++</li>
<li>javascript</li>
<li>php</li>
<li>ruby</li>
</ul>
</body>
</html>
效果
属性选择器
基本语法：标签[attribute] {css}，表示选取某一标签中带有某种属性的所有元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器-测试</title>
<style type="text/css">
li {
list-style: none;
}
li[class] { /*选取li标签中带有class属性的所有元素*/
color: red;
}
</style>
</head>
<body>
<ul>
<li class="c">C</li>
<li>java</li>
<li>python</li>
<li>C++</li>
<li class="js">javascript</li>
<li>php</li>
<li>ruby</li>
</ul>
</body>
</html>
效果
属性选择器中属性可以赋值，如div[class=demo]等同于类选择器.demo，使用div[class^=start]表示class属性值以start开头的元素，div[class$=end]表示class属性值以end结尾的元素，结合正则表达式更容易理解。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器-测试</title>
<style type="text/css">
li {
list-style: none;
}
li[class^=j] { /*选取li标签中带有class属性的所有元素*/
color: red;
}
li[class$=p] {
color: blue;
}
</style>
</head>
<body>
<ul>
<li class="c">C</li>
<li class="java">java</li>
<li class="p">python</li>
<li>C++</li>
<li class="js">javascript</li>
<li class="php">php</li>
<li>ruby</li>
</ul>
</body>
</html>
效果
伪元素选择器
基本语法：标签::伪元素 {css}，表示按照伪元素的规则选取标签内的内容元素。如p::first-letter表示选取p标签内内容的第一个单词，P::first-line表示选取p标签内内容的第一行，p::selection表示改变选取p标签内容的样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器-测试</title>
<style type="text/css">
p::first-letter {
font-size: 16px;
}
p::first-line {
color: red;
}
p::selection {
font-size: 20px;
color: blue;
}
</style>
</head>
<body>
<p>有时我会想，也许最好的生活方式便是将每一天当做自己的末日。用这样的态度去生活，生命的价值方可以得以彰显。我们本应纯良知恩、满怀激情地过好每一天，然而一日循着一日，一月接着一月，一年更似一年，这些品质往往被时间冲淡。我常想，假如上帝给我三天光明，我最想看什么呢？或者我将怎样享受这份幸福呢？当我这样想的时候，也请你顺便怎样想象一下吧，请想想这个问题，假定你也只有三天光明，那么你会怎样使用你的眼睛呢？你最想让你的目光停留在什么地方？
</p>
</body>
</html>
效果
::before和::after：表示选取标签内的内容之前和之后的位置。before和after伪元素必须在样式中添加content属性，表示在选取标签内的内容之前或者之后添加content属性的属性值。需要注意before和after添加的content属性值是包含在标签内的，而且是以行内元素的形式存在的。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器-测试</title>
<style type="text/css">
div::before {
content: "歌曲：";
}
div::after {
content: "-于果";
}
</style>
</head>
<body>
<div>
侧脸
</div>
</body>
</html>
效果
利用伪元素::after和::before添加图标字体的方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素添加图标字体-测试</title>
<style>
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?hrstq9');
src: url('fonts/icomoon.eot?hrstq9#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?hrstq9') format('truetype'),
url('fonts/icomoon.woff?hrstq9') format('woff'),
url('fonts/icomoon.svg?hrstq9#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
div::after {
content: "\e947";
}
div {
font-family: 'icomoon';
}
</style>
</head>
<body>
<div></div>
</body>
</html>
其中content属性值为：
CSS3盒子模型
css2中盒子模型，添加padding或者border会改变盒子自身的大小，css3中添加box-sizing:border-box，盒子大小不会发生改变，盒子的内容大小会适当缩减。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3盒子模型-测试</title>
<style>
/*css2盒子模型*/
div {
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid skyblue;
background-color: lightgreen;
/*box-sizing: border-box;*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3盒子模型-测试</title>
<style>
/*css3盒子模型*/
div {
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid skyblue;
background-color: lightgreen;
box-sizing: border-box;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果
注意：当指定box-sizing:content-box，即为css2盒子模型。
有意思的小实例
实例一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*图片鼠标经过外加边框，不改变盒子大小*/
div {
width: 632px;
height: 340px;
position: relative;
border-radius: 10px;
overflow: hidden;
}
div:hover::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
border: 20px solid rgba(255, 255, 255, 0.5);
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
<img src="mi.jpg" alt="">
</div>
</body>
</html>