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转换使用达到更好的效果。