目录
CSS3新增选择器
- 属性选择器
- 结构伪类选择器 : 根据文档结构选择元素.
- 伪元素选择器
属性选择器
属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器
假如我有如下的标签:
html
<body>
<input type="text" name="" id="" value="123">
<input type="password" name="" id="">
</body>我想要选择 input标签, 然后必须具有value属性:
css
input[value] {
color: pink;
}我不仅要选择有什么属性, 我还要选择属性=对应值的属性:
css
input[value=123] { /*= 后面可以加引号也可以不加引号*/
color: pink;
}现在假设我要选择下面这四个标签, 我该如何做呢 ?
html
<div class="icon1">小图标1</div>
<div class="icon2">小图标2</div>
<div class="icon3">小图标3</div>
<div class="icon4">小图标4</div>第一想到的是可以使用并集选择器, 但是写起来很麻烦, 我们可以使用 h5新增特性:
css
div[class^=icon] {
color: red;
}^=表示匹配的必须是icon开头的值.
当然我也可以选择以$=E来选择以E结尾的元素, 或者是*=E, 表示值含有E的属性.
注意: 类选择器, 属性选择器, 伪类选择器 权重都是10.
结构选择器
下面是结构选择器的样式:
例如:
html
<body>
<ul>
<li>我是第1个孩子</li>
<li>我是第2个孩子</li>
<li>我是第3个孩子</li>
<li>我是第4个孩子</li>
<li>我是第5个孩子</li>
<li>我是第6个孩子</li>
</ul>
</body>我要选择ul中的第一个li:
css
ul li:first-child { /*表示我选择了里面所有li标签中, 第一个li*/
/* 结构伪类选择器 */
background-color: pink;
}最后一个li使用:
css
ul li:last-child { /*ul中最后一个li元素*/
background-color: pink;
}当然也可以选择某个父元素中一个或者多个特定的子元素: nth-child(n)
- n 可以是数组, 公式和关键字
- 如果n是数字, 就是选择第n个元素, 里面数字是从1开始
例如我想要选择上述案例中的第二个li :
css
ul li:nth-child(2) {
background-color: blue;
}如果nth-child中的参数写的是关键字, 例如even :
html
<ul>
<li>我是第1个孩子</li>
<li>我是第2个孩子</li>
<li>我是第3个孩子</li>
<li>我是第4个孩子</li>
<li>我是第5个孩子</li>
<li>我是第6个孩子</li>
<li>我是第7个孩子</li>
<li>我是第8个孩子</li>
</ul>我想要将这里面的第偶数个li改为灰色:
css
ul li:nth-child(even) {
background-color: #ccc;
}然后将奇数的孩子选择出来, 然后改为另外一种颜色:
css
/* 2.把所有的奇数 odd的孩子选出来 */
ul li:nth-child(odd) {
background-color: gray;
}效果如下:
nth-child使用 公式:
html
<ol>
<li>我是第1个孩子</li>
<li>我是第2个孩子</li>
<li>我是第3个孩子</li>
<li>我是第4个孩子</li>
<li>我是第5个孩子</li>
<li>我是第6个孩子</li>
<li>我是第7个孩子</li>
<li>我是第8个孩子</li>
</ol>
css
ol li:nth-child(n) {
background-color: pink;
}
表示n从0开始, 每次+1, 往后面计算, 这里必须是n, 不能是其他的字母, 如果写了n, 代表选择了所有的孩子:
css
ol li:nth-child(-n + 3) {
background-color: pink;
}效果如下:
注意 : 此处需要注意nth-of-type和nth-child() 有所不同, type会过滤前面的非指定的元素, 然后去看第几个孩子, 但是nth-child是不会过滤非指定元素, 会将所有的child进行匹配满足括号内的内容.
伪元素选择器
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构。
注意:
- before 和 after 创建一个元素，但是属于行内元素
- 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
- 语法： element::before {}
- before 和 after 必须有 content 属性
- before 在父元素内容的前面创建元素，after 在父元素内容的后面插入元素
- 伪元素选择器和标签选择器一样，权重为 1
例如下面有一个div,, 使用了伪元素, 其声明是before还是after的效果如下:
通过代码验证:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>伪元素选择器before和after</title>
<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>
</html>
无论是before还是after, 都是行内元素. 可以使用block来改变盒子模型.
伪元素快速清除浮动:
给父元素添加一个after伪元素, 
这个伪元素的content为空, 伪元素本来为行内元素, 现在需要将其设置为块级元素, 也就是block:
css
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
盒子模型
我们在设置了一个盒子的高度和宽度和边框之后, 如果还想添加内边距, 那么就会撑大盒子, 设置内边距之后, 如果我们想要保持原来盒子的大小, 就不得不去减去高度和宽度, 这样子就很麻烦, 于是css3新推出了一个特性, 可以使用box-sizing来指定盒子模型
box-sizing有两个值, 即content-box, 和border-box, 这样我们计算盒子大小的方式就发生了变化,
分为两种情况:
- 以前是border + width/height + padding, 也就是默认的box-sizing: context-box;
- 第二种是box-sizing : border-box 盒子大小为width
如下:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3盒子模型</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
width: 200px;
height: 200px;
background-color: pink;
border: 20px solid red;
padding: 15px;
box-sizing: content-box;
}
p {
width: 200px;
height: 200px;
background-color: pink;
border: 20px solid red;
padding: 15px;
/* css3 盒子模型 盒子最终的大小就是 width 200 的大小 */
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
小猪乔治
</div>
<p>
小猪佩奇
</p>
</body>
</html>盒子模型改为border-box之后, 盒子的大小就不会被padding撑大了
图片模糊
使用filter : blur(npx) 来设置img图片的模糊, n越大越模糊:
css
img {
filter: blur(2px);
}calc函数
我们有的时候需要使用百分号%来设置宽度或者定位, 但是这个还不够, 有时候还需要搭配margin来获取更精确位置, 但是这很不方便, 尤其是在盒子模型中.
比如我们使用绝对定位, 让一个 图片居中显示, 可能会用到:
css
img {
position: absolute;
top: 50%;
margin-top: -20px; /*自己高度的一般*/
}我们可不可以直接将两行计算在一行, 当然可以, 使用calc函数:
css
img {
position: absolute;
top: calc(50% - 20px);
}过渡
过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画： 是从一个状态 渐渐的过渡到另外一个状态
可以让我们页面更好看，更动感十足，虽然 低版本浏览器不支持（ie9以下版本） 但是不会影响页面布局。经常与hover搭配使用.
使用transition这个属性来实现.如法如下:
transition: 要过渡的属性 花费时间 运动曲线 何时开始;
- 属性 ： 想要变化的 css 属性， 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡， 写一个all 就可以。
- 花费时间： 单位是 秒（必须写单位） 比如 0.5s
- 运动曲线： 默认是 ease （可以省略）
- 何时开始 ：单位是 秒（必须写单位）可以设置延迟触发时间 默认是 0s （可以省略）
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3 过渡效果</title>
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
/* transition: 变化的属性 花费时间 运动曲线 何时开始; */
/* transition: width .5s ease 0s, height .5s ease 1s; */
/* 如果想要写多个属性，利用逗号进行分割 */
/* transition: width .5s, height .5s; */
/* 如果想要多个属性都变化，属性写all就可以了 */
/* transition: height .5s ease 1s; */
/* 谁做过渡，给谁加 */
transition: all 0.5s;
}
div:hover {
width: 400px;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>案例: 进度条
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.bar {
width: 150px;
height: 15px;
padding: 1px;
border: 1px solid red;
border-radius: 7px;
}
.bar_in {
width: 50%;
height: 100%;
background-color: red;
transition: all .6s;
}
.bar:hover .bar_in{
width: 100%;
}
</style>
</head>
<body>
<div class="bar">
<div class="bar_in">
</div>
</div>
</body>
</html>