CSS苦逼学习日记（12）
1.属性选择器：
属性选择器是选择一个标签内部所设置的某一个属性，这个属性可以是 class（类），可以使type（类型）等属性。
属性选择器的权重是 10 和类选择器的权重一致
有三种方式：
| 符号 | 解释 |
|---|---|
| = | 选择某属性的值全称为xxx的标签 |
| ^= | 选择某属性的值开头为xxx的标签，若开头xxx为 icon，则 icon1，icon2等值都会被选择到 |
| $= | 选择某属性的值结尾为xxx的标签，若以data结尾，则 a-data,b-data等值都会被选择到 |
| *= | 此选择属性是选择值中存在某xxx就可以被选择到 |
使用方法：
标签 [ 属性= " 值xxx"]
案例代码及解释：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
以下这种方式是最重要的
input[type="text"] {
width: 100px;
height: 100px;
background-color: skyblue;
}
/* ^是属性选择器选择前面的 $是属性选择器选择后面的 *是选择中间的 */
div[class^='icon'] {
background-color: slategray;
}
section[class$=data] {
background-color: teal;
}
</style>
</head>
<body>
<div class="icon1">小图标1</div>
<div class="icon2">小图标2</div>
<div class="icon3">小图标3</div>
<div class="icon4">小图标4</div>
<div>我是打酱油的</div>
<section class="ic1-data">我是安琪拉</section>
<section class="ic2-data">我是哥斯拉</section>
<section class="ic3-ico">那我是谁</section>
</body>
</html>
代码的最后执行情况：
因为 class^= “icon” ,选择的是 类属性的值前面带有 icon的 ，所以，我是打酱油的 标签 和 后面的 标签不会被选中，
同理 $=是选择 "后缀为xxx"的，而本例选择的是后缀为 data 的，所以最后一个标签没有被选中。
2.结构伪类选择器：
当有多个标签但并未给别名或类名时，它就来了。
结构伪类选择器的权重也是 10
1. -child 的类型
使用场景：
<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都没有加类属性或者id属性的时候，结构伪类选择器就派上了用场。
根据以上有以下几种解决方案：
1.当想只给第一个 li 添加样式的时候 我们可以使用这样的代码：
ul li:first-child {
xxx:xxx;
}
ul li:last-child {
xxx:xxx;
}
ul li:nth-child(3) {
xxx:xxx;
}
first-child 指向的是 ul中的第一个孩子 （注意事项：不论第一个是li或者是div，只要是ul当中的第一个标签就行了）.
last-child指向的是ul中的最后一个孩子，注意事项：不论第一个是li或者是div，只要是ul当中的第一个标签就行了）
nth-child() 的括号中可以跟数字，也可以跟数学表达式例如：2n（偶数），2n-1（奇数）等
2.-of-type 的类型
使用场景：
<ul>
<div>你是对的</div>
<li>我是li的第一个孩子</li>
<li>我是li的第二个孩子</li>
</ul>
当ul中有 div 和li等不同的标签之时，我们又不想计算某标签在ul中是第几个位置，而直接数出在想用的标签中它是排在第几个就行了
ul li:first-of-type {
xxx:xxx;
}
ul li:last-of-type {
xxx:xxx;
}
ul li:nth-of-type(1) {
xxx:xxx;
}
first-of-type 指的是 ul 的 li 中 的第一个孩子 ，与child相比，它特指是li中的第一个孩子
last-of-type 指的是 ul 的 li 中 的最后个孩子 ，与child相比，它特指是li中的第一个孩子
nth-of-type() 括号中的参数也可以是数字，公式等表达式;
3.伪元素选择器：
伪元素是一个元素，它不属于html的结构之一，利用它可以简洁html的结构。
伪元素选择器的权重是1
使用方法：
标签属性::before（在标签的开始地方添加伪元素）
标签属性::after（在标签的结束地方添加伪元素）
作用：
1.清除浮动：
单伪元素清除浮动：
.clearfix::after {
content="";
display:block;
clear:both;
visibility:hidden;
height:0;
}
双伪元素清除浮动:
.clearfix::after,
.clearfix::before {
content="";
display:table;
}
.clearfix::after {
clear:both;
}
.clearfix {
*zoom :1; //兼容问题
}
2.可以拿来放图片:
例如：
小米的官网返回首页的 logo 就是用 before和after伪元素选择器来加载的。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #cccccc;
}
a {
position: relative;
display: block;
margin: 100px auto;
width: 55px;
height: 55px;
transition: all 0.2s;
background-color: rgb(255,103,0);
overflow: hidden;
}
a::before{
content: "";
width: 55px;
height: 55px;
position: absolute;
left: 0;
top: 0;
background: rgb(255,103,0) url(mi-logo.png) no-repeat 50% 50%;
transition: all 0.2s;
}
a::after {
position: absolute;
left: 0;
top: 0;
margin-left: -55px;
content: "";
width: 55px;
height: 55px;
background: rgb(255,103,0) url(mi-home.png) no-repeat 50% 50%;
transition: all 0.2s;
}
a:hover::after {
text-decoration: none;
margin-left: 0;
}
a:hover::before {
text-decoration: none;
margin-left: 55px;
}
</style>
</head>
<body>
<a href="#"></a>
</body>
</html>
上述代码就是如小米官网的logo的设置，这两张图片可以去官网扒下来
4.盒子模型：
我们正常的盒子模型是：
| 属性 | 值 | 解释 |
|---|---|---|
| box-sizing | content-box | 此值为css的默认属性，设置了宽高的padding和border会影响到整个盒子的大小 |
| box-sizing | border-box | CSS3的盒子模型：盒子最终的大小就是width所设置的大小，padding和border不会撑大盒子 |
好处：设置了此值之后就不用再去担心盒子的高宽问题了，但是也要注意兼容性的问题
5.图片模糊处理
可以给图片使用如下：
/* blur 模糊处理 数值越大越模糊 */
img {
filter: blur(5px);
}
img:hover {
filter: blur(0);
}
blur 就是将图片虚化的意思，blur()括号中的像素值越大，则图片越模糊。
6.计算盒子宽度升级：
.father {
width: 300px;
height: 300px;
background-color: pink;
}
.son {
width: calc(100% - 30px);
height: 30px;
background-color: skyblue;
}
我们可以使用 calc()来计算和给定盒子高度或者宽度，这样省了一部分的计算量。
括号内 可以跟 百分比% 也可以跟像素 ，值得注意的是：
注意：百分比%是父容器宽度或者高度的百分之多少。
6.CSS的过渡：
使用代码：
transition: 变化的属性 花费的时间 运动曲线 何时开始;
变化的属性 : transition-property
花费的时间 : transition-duration
运动曲线 : transition-timing-function
何时开始 : transition-delay
| 属性 | 解释 | 值 |
|---|---|---|
| transition-property | 变化的属性 | 正常情况下写 all |
| transition-duration | 由起点到终点花费的时间 | 数字加单位（数字和单位必写） |
| transition-timing-function | 运动曲线 | 默认是ease（规定慢速开始，然后变快，然后慢速结束的过渡效果） ease-in（规定以慢速开始的过渡效果）ease-out （规定以慢速结束的过渡效果） ease-in-out （规定以慢速开始和结束的过渡效果） linear（规定以相同速度开始至结束的过渡效果） cubic-bezier(n,n,n,n) （在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。） |
| transition-delay | 何时开始 | （可不加）多少秒后进行过度，默认是0s（写了数值之后必须加单位） |
过渡可以配合动画或 2D转换 ，3D转换使用达到更好的效果。
274
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
