Css基础学习
1. 选择器
1.1 简单选择器
- ID选择器
- 元素选择器
- 类选择器
- 通配符选择器 （*，选中所有元素）
-
属性选择器
根据属性名和属性值选中元素
/* 选中所有具有href属性的元素 */
[href]{
color:red;
}
[href="https://www.sina.com" target="_blank" rel="external nofollow" ]{
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：初始值，将该属性设置为默认值