Css基础学习
1. 选择器
1.1 简单选择器
- ID选择器
- 元素选择器
- 类选择器
- 通配符选择器 (*,选中所有元素)
- 属性选择器
根据属性名和属性值选中元素
/* 选中所有具有href属性的元素 */
[href]{
color:red;
}
[href="https://www.sina.com"]{
color:red;
}
- 伪类选择器
选中 某些元素的 某种状态
① a标签的
1)link: 超链接未访问时的状态
2)visited: 超链接访问过后的状态
3)hover: 鼠标悬停状态
4)active:激活状态,鼠标按下状态
爱恨法则:love hate
/* 选中鼠标悬停时的a元素 */
a:hover{
color:red;
}
“结构伪类选择器”
②、 first-child(在一组兄弟元素中的第一个元素)
③、 first-of-type(在一组兄弟元素中 其类型的第一个元素)
④、 nth-child(选中指定的第几个元素)
⑤、 last-child
⑥、 nth-child( )
(n,2n,5n,n+5=从第5个开始(包含第5个)到最后,-n+5=前5个(包含第5个),)
⑦、 focus(元素聚焦时的样式)
⑧、 checked(单选或多选框被选中的样式)
⑨、disabled(按钮禁用
<!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>
.item{
height: 40px;
margin: 30px 0;
width: 200px;
}
.boy{
border-bottom: 1px solid #ccc;
}
.checked{
width: 14px;
height: 14px;
border-radius: 2px;
border: 1px solid #ccc;
display: inline-block;
}
.item input:checked+.checked::after{
content: " ";
display: block;
width: 10px;
height: 10px;
border-radius: 2px;
background: #008c8c;
margin: 2px;
}
.item input:checked+.checked{
border: 1px solid #008c8c;
}
</style>
</head>
<body>
<div class="item boy">
<label >
<input type="radio">
<span class="checked"></span>
<span> 男</span>
</label>
</div>
<div class="item girl">
<label >
<input type="radio">
<span class="checked"></span>
<span>女</span>
</label>
</div>
</body>
</html>
- 伪元素选择器
① ::before (创建一个伪元素,其将成为匹配选中的元素的第一个子元素 / 在元素内部的前面插入内容)
② ::after(创建一个伪元素,其将成为匹配选中的元素的最后一个子元素 / 在元素内部的后面插入内容)
<style>
span::before {
content: "《";
color: red;
}
span::after {
content: "》";
color: red;
}
</style>
<p>
<span>HTML和CSS</span>课程真的是不错呀!
</p>
注意:
- before 和 after 必须有 content 属性 (没内容的时候你就写空内容就好。content:“ ”)
- before 和 after 创建一个元素,但属于行内元素 (所以我们写代码的时候 一般都会写上 display:block)
③ first-letter(选中元素的第一个字母)
④ first-line (选中元素中第一行的文字)
⑤ selection (选中被用户框选的文字,你可以更改样式)
⑥ ::placeholder(文本框的提示文字样式设置)
1.2 选择器的组合
- 并且
中间不要加空格的
p.red {
color: red;
}
- 后代元素 —— 空格 (最常使用的那个)
- 子元素 —— >
孙子就不包括了,但是你可以div>ul>li
- 相邻兄弟元素 —— +
- 后面出现的所有兄弟元素 —— ~
1.3 选择器的并列
多个选择器, 用逗号分隔
语法糖
2. 层叠
声明冲突:同一个样式,多次应用到同一个元素
层叠:解决声明冲突的过程,浏览器自动处理(权重计算)
2.1 比较重要性
重要性从高到底:
作者样式表:开发者书写的样式
1) 作者样式表中的!important样式
2) 作者样式表中的普通样式
3) 浏览器默认样式表中的样式
2.2 比较特殊性
看选择器
总体规则:选择器选中的范围越窄,越特殊
具体规则:通过选择器,计算出一个4位数(x x x x)
- 千位:如果是内联样式,记1,否则记0
- 百位:等于选择器中所有id选择器的数量
- 十位:等于选择器中所有类选择器、属性选择器、伪类选择器的数量
- 个位:等于选择器中所有元素选择器、伪元素选择器的数量
2.3 比较源次序
代码书写靠后的胜出
应用
- 重置样式表
书写一些作者样式,覆盖浏览器的默认样式
重置样式表 -> 浏览器的默认样式
常见的重置样式表:normalize.css、reset.css、meyer.css
()
2. 爱恨法则
link > visited > hover > active
3. 继承
子元素会继承父元素的某些CSS属性
通常,跟文字内容相关的属性都能被继承
可以去查看元素是否有继承性 不用记。 元素+MDN 进行搜索
4. 属性值的计算过程
属性值的计算过程: 一个元素,从所有属性都没有值,到所有的属性都有值
一个元素一个元素依次渲染,顺序按照页面文档的树形目录结构进行
渲染每个元素的前提条件:该元素的所有CSS属性必须有值
步骤:
1. 确定声明值
参考样式表中 没有冲突的声明,作为CSS属性值
2. 层叠冲突
对样式表有冲突的声明 使用层叠规则,确定CSS属性值
3. 使用继承
对仍然没有值的属性,若可以继承,则继承父元素的值
4. 使用默认值
对仍然没有值得属性,使用默认值
特殊的两个CSS取值:
- inherit:手动(强制)继承,将父元素的值取出应用到该元素
- initial:初始值,将该属性设置为默认值