（二）CSS3新增
1.属性选择器
| 书写 | 含义 |
|---|---|
input[value]{...} | 选具有 XX 属性的 E 元素 |
input[type=text]{...} | 选具有 XX 属性且值=XX 的 E 元素 |
div[class^=icon]{...} | 选具有 XX 属性且值以 XX 开头的 E 元素 |
div[class$=data]{...} | 选具有 XX 属性且值以 XX 结尾的 E 元素 |
div[class\*=icon]{...} | 选具有 XX 属性且值含有 XX 的 E 元素 |
<style>
/* 必须是input 但是同时具有 value这个属性 选择这个元素 [] */
/* input[value] {
color:pink;
} */
/* 只选择 type =text 文本框的input 选取出来 */
input[type=text] {
color: pink;
}
/* 选择首先是div 然后 具有class属性 并且属性值 必须是 icon开头的这些元素 */
div[class^=icon] {
color: red;
}
section[class$=data] {
color: blue;
}
div.icon1 {
color: skyblue;
}
/* 类选择器和属性选择器 伪类选择器 权重都是 10 */
</style>
</head>
<body>
<!-- 1. 利用属性选择器就可以不用借助于类或者id选择器 -->
<!-- <input type="text" value="请输入用户名">
<input type="text"> -->
<!-- 2. 属性选择器还可以选择属性=值的某些元素 重点务必掌握的 -->
<input type="text" name="" id="">
<input type="password" name="" id="">
<!-- 3. 属性选择器可以选择属性值开头的某些元素 -->
<div class="icon1">小图标1</div>
<div class="icon2">小图标2</div>
<div class="icon3">小图标3</div>
<div class="icon4">小图标4</div>
<div>我是打酱油的</div>
<!-- 4. 属性选择器可以选择属性值结尾的某些元素 -->
<section class="icon1-data">我是安其拉</section>
<section class="icon2-data">我是哥斯拉</section>
<section class="icon3-ico">哪我是谁</section>
</body>
2.结构伪类选择器
| 选择器 | 含义 |
|---|---|
| ul li:first-child/first-of-type{...} | 选父元素里第一个子元素 |
| last-child/last-of-type{...} | 选父元素里最后一个子元素 |
| nth-child(n){...} | 把所有排序号再选第几个（n=2,3,...第 n 个） |
| nth-of-type(n){...} | 只选指定的盒子排号（n=2,3,...第 n 个） |
| nth-child(even/odd/n/2n/2n+1/5n/n+5/-n+5){...} | 偶数/奇数/全部/偶数/奇数/5 的倍数/第 5 个开始到最后/前 5 个 |
<style>
/* nth-child 会把所有的盒子都排列序号 */
/* 执行的时候首先看 :nth-child(1) 之后回去看 前面 div */
section div:nth-child(1) {
background-color: red;
}
/* nth-of-type 会把指定元素的盒子排列序号 */
/* 执行的时候首先看 div指定的元素 之后回去看 :nth-of-type(1) 第几个孩子 */
section div:nth-of-type(1) {
background-color: blue;
}
</style>
<section>
<p>光头强</p>
<div>熊大</div>
<div>熊二</div>
</section>
3.伪元素选择器（权重为 1）
帮助我们利用CSS创建新标签元素，而不需要HTML标签。
| 样式 | 含义 |
|---|---|
div::before{...（必有 content 属性）} | 行内元素，在父元素内部内容的前面插入内容 |
div::after{...（必有 content 属性）} | 行内元素，在父元素内部内容的后面插入内容 |
备注：行内元素可以转化为行内块，才能改变大小。
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
/* div::before 权重是2 */
div::before {
/* 这个content是必须要写的 */
/* display: inline-block; */
content: '我';
/* width: 30px;
height: 40px;
background-color: purple; */
}
div::after {
content: '小猪佩奇';
}
</style>
</head>
<body>
<div>
是
</div>
</body>
4.盒子模型box-sizing
box-sizing:border-box（盒子大小就为 width）（无须减边框）
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
5.过渡 transition
transition：过渡属性（all 所有） 时间（s） 运动曲线（默认 ease） 何时开始（s）；
