【前端基础篇】CSS基础速通万字介绍（上篇）1：https://developer.aliyun.com/article/1617317
复合选择器
后代选择器
又叫包含选择器. 选择某个父元素中的某个子元素.
元素1 元素2 {样式声明}
- 元素 1 和 元素 2 要使用空格分割
- 元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素1
代码示例: 把 ol 中的 li 修改颜色, 不影响ol
<ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> </ul> <ol> <li>ddd</li> <li>eee</li> <li>fff</li> </ol> ol li { color: red; }
代码示例: 元素 2 不一定非是 儿子, 也可以是孙子.
<ul> <li>aaa</li> <li>bbb</li> <li><a href="#">ccc</a></li> </ul> ul li a { color: yellow; } 或者 ul a { color: yellow; }
代码示例:可以是任意基础选择器的组合. (包括类选择器, id 选择器)
<ol class="one"> <li>ddd</li> <li>eee</li> <li><a href="#">fff</a></li> <li><a href="#">fff</a></li> <li><a href="#">fff</a></li> </ol> .one li a { color: green; }
子代选择器
和后代选择器类似, 但是只能选择子标签.
元素1>元素2 { 样式声明 }
- 使用大于号分割
- 只选亲儿子, 不选孙子元素
<div class="two"> <a href="#">链接1</a> <p><a href="#">链接2</a></p> </div
后代选择器的写法, 会把链接1 和 2 都选中.
.two a { color: red; }
子选择器的写法, 只选链接 1
.two>a { color: red; }
并集选择器
用于选择多组标签. (集体声明)
元素1, 元素2 { 样式声明 }
- 通过 逗号 分割等多个元素.
- 表示同时选中元素 1 和 元素 2
- 任何基础选择器都可以使用并集选择器.
- 并集选择器建议竖着写. 每个选择器占一行. (最后一个选择器不能加逗号)
代码示例：
<div>苹果</div> <h3>香蕉</h3> <ul> <li>鸭梨</li> <li>橙子</li> </ul> 1. 把苹果和香蕉颜色改成红色 div, h3 { color: red; } 2. 把鸭梨和橙子也都一起改成红色 div, h3, ul>li { color: red; }
伪类选择器
链接伪类选择器
a:link 选择未被访问过的链接 a:visited 选择已经被访问过的链接 a:hover 选择鼠标指针悬停上的链接 a:active 选择活动链接(鼠标按下了但是未弹起)
示例：
.html <a href="#">小猫</a> .css a:link { color: black; /* 去掉 a 标签的下划线 */ text-decoration: none; } a:visited { color: green; } a:hover { color: red; } a:active { color: blue; }
如何让一个已经被访问过的链接恢复成未访问的状态?
清空浏览器历史记录即可. ctrl + shift + delete
注意事项：
- 按照
LVHA的顺序书写, 例如把active拿到前面去, 就会导致active失效. 记忆规则 “绿化” - 浏览器的
a标签都有默认样式, 一般实际开发都需要单独制定样式.
- 实际开发主要给链接做一个样式, 然后给
hover做一个样式即可.link,visited,active用的不多.
a { color: black; } a:hover { color: red; }
force伪类选择器
选取获取焦点的 input 表单元素.
.html: <div class="three"> <input type="text"> <input type="text"> <input type="text"> <input type="text"> </div> .css: .three>input:focus { color: red; }
此时被选中的表单的字体就会变成红色.
| 选择器 | 作用 | 注意事项 |
| 后代选择器 | 选择后代元素 | 可以是孙子元素 |
| 子选择器 | 选择子元素 | 只能选亲儿子, 不能选孙子 |
| 并集选择器 | 选择相同样式的元素 | 更好的做到代码重用 |
| 链接伪类选择器 | 选择不同状态的链接 | 重点掌握 a:hover 的写法. |
| :focus伪类选择器 | 选择被选中的元素 | 重点掌握 input:focus |
常用元素属性
CSS 属性有很多, 可以参考文档
字体属性
字体
body { font-family: '微软雅黑'; font-family: 'Microsoft YaHei'; }
- 字体名称可以使用中文，但是不建议
- 多个字体之间使用逗号分隔. (从左到右查找字体, 如果都找不到, 会使用默认字体. )
- 如果字体名有空格, 使用引号包裹.
- 建议使用常见字体, 否则兼容性不好.
<style> .font-family .one { font-family: 'Microsoft YaHei'; } .font-family .two { font-family: '宋体'; } </style> <div class="font-family"> <div class="one"> 这是微软雅黑 </div> <div class="two"> 这是宋体 </div> </div>
大小
p { font-size: 20px; }
- 不同的浏览器默认字号不一样, 最好给一个明确值. (chrome 默认是 16px)
- 可以给
body标签使用 font-size - 要注意单位
px不要忘记.
- 标题标签需要单独指定大小
注意: 实际上它设置的是字体中字符框的高度；实际的字符字形可能比这些框高或矮
<style> .font-size .one { font-size: 40px; } .font-size .two { font-size: 20px; } </style> <div class="font-size"> <div class="one"> 大大大 </div> <div class="two"> 小小小 </div> </div>
粗细
p { font-weight: bold; font-weight: 700; }
- 可以使用数字表示粗细.
- 700 == bold, 400 是不变粗, == normal
- 取值范围是 100 -> 900
<style> .font-weight .one { font-weight: 900; } .font-weight .two { font-weight: 100; } </style> <div class="font-weight"> <div class="one"> 粗粗粗 </div> <div class="two"> 细细细 </div> </div>
【前端基础篇】CSS基础速通万字介绍（上篇）3：https://developer.aliyun.com/article/1617334
