选择器进阶+背景相关属性+元素显示模式+三大特性
选择器进阶
复合选择器：后代选择器 子代选择器
后代选择器：空格
结构：选择器1 选择器2{css}
在选择器1所找到标签的后代（儿子、孙子、重孙子…）中，找到满足选择器2的标签，设置样式
注意点：
- 后代包括：儿子、孙子、重孙子……
- 后代选择器中，选择器与选择器之前通过 空格 隔开
子代选择器：>
结构：选择器1 > 选择器2 { css }
在选择器1所找到标签的子代（儿子）中，找到满足选择器2的标签，设置样式
➢ 注意点： - 子代只包括：儿子
- 子代选择器中，选择器与选择器之前通过 > 隔开
并集选择器：逗号（,）
作用：同时选择多组标签，设置相同的样式
➢ 结构：选择器1,选择器2 { css }
➢ 注意点：
- 并集选择器中的每组选择器之间通过 , 分隔
- 并集选择器中的每组选择器可以是基础选择器或者复合选择器
- 并集选择器中的每组选择器通常一行写一个，提高代码的可读性
交集选择器：紧挨着
作用：选中页面中 同时满足 多个选择器的标签
➢ 结构：选择器1选择器2 { css }
➢ 结果：
• （既又原则）找到页面中 既 能被选择器1选中，又 能被选择器2选中的标签，设置样式
➢ 注意点：
- 交集选择器中的选择器之间是紧挨着的，没有东西分隔
- 交集选择器中如果有标签选择器，标签选择器必须写在最前面
除此之外还有：
| 选择器 | 名称 | 选中对象 |
|---|---|---|
选择器1+选择器2{} |
兄弟选择器 | 同级下 选择器1 正下方紧挨着的 选择器2 |
选择器1~选择器2{} |
兄弟选择器 | 同级下 选择器1 下方 所有的选择器2 而都会被选中 |
伪类选择器：
a:link {}对未点击过的链接设置a:visited对点击过的链接设置a:active对活动的链接设置（鼠标点下且没有抬起时）选择器1:hover {}当鼠标悬停在 选择器1 的内容上时执行，有很多用法
作用：选中鼠标悬停在元素上的状态，设置样式
➢ 结构：选择器:hover { css }
➢ 注意点：伪类选择器选中的元素的某种状态
<head>
<style>
/* 悬停的时候文字颜色是红色 */
a:hover {
color: red;
background-color: green;
}
/* 用户鼠标悬停到div的时候, 文字是绿色 */
div:hover {
color: green;
}
</style>
</head>
<body>
<a href="#">这是超链接</a>
<!-- 任何标签都可以添加伪类, 任何一个标签都可以鼠标悬停 -->
<div>div</div>
</body>
input:focus
:focus 伪类适用于当一个元素进入即将进行交互的状态。例如，点击输入框获得了焦点、点击按钮等。
值得注意的是，当我们使用鼠标或键盘等设备时，:focus 伪类将在用户开始激活元素后被触发，元素将保持获得焦点状态，直到用户点击其他的元素。
button:focus {
background-color: yellow;
}
当用户点击按钮之后，按钮会保持为黄色，除非用户再次点击页面上其他元素，按钮会返回默认状态。
对于键盘设备用户来说，当使用 Tab键 切换时，可以使元素进入 :focus 状态。通常可以将 :focus 作为键盘设备用户的 “悬停” 状态。
以上是比较常见的选择器，更多选择器请以后再自己慢慢发现： 更多选择器
emmet语法
作用：通过简写语法，快速生成代码
背景相关属性（颜色、图片、平铺、位置，连写）
背景颜色
<style>
div {
width: 400px;
height: 400px;
/* background-color: pink; */
/* background-color: #ccc; */
/* 红绿蓝三原色, a是透明度0-1 */
/* background-color: rgba(0, 0, 0, 0.5); */
background-color: rgba(0, 0, 0, .5);
}
</style>
背景图片
<style>
div {
width: 400px;
height: 400px;
background-color: pink;
最低0.47元/天 解锁文章
6300
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
