选择器进阶+背景相关属性+元素显示模式+三大特性
选择器进阶
复合选择器：后代选择器 子代选择器
后代选择器：空格
结构：选择器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;
background-image: url(./images/1.jpg);
}
</style>
背景平铺
这里1.jpg的高宽都是200px。
<style>
div {
width: 400px;
height: 400px;
background-color: pink;
background-image: url(./images/1.jpg);
/* background-repeat: repeat; */
/* 不平铺: 图片只显示一个 */
/* background-repeat: no-repeat; */
/* background-repeat: repeat-x; */
/* background-repeat: repeat-y; */
}
</style>
背景位置
<style>
div {
width: 400px;
height: 400px;
background-color: pink;
background-image: url(./images/1.jpg);
background-repeat: no-repeat;
/* background-position: right 0; */
/* background-position: right bottom; */
/* background-position: center center; */
/* background-position: center; */
/* background-position: 50px 0; */
/* background-position: 50px 100px; */
background-position: -50px -100px;
/* 正数: 向右向下移动; 负数:向左向上移动 */
/* 注意: 背景色和背景图只显示在盒子里面 */
}
</style>
背景相关属性连写
<style>
div {
width: 400px;
height: 400px;
/* 不分先后顺序 背景色 背景图 背景图平铺 背景图位置 */
/* background: pink url(./images/1.jpg) no-repeat center bottom; */
/* 背景图位置如果是英文单词可以颠倒顺序 */
background: pink url(./images/1.jpg) no-repeat bottom center ;
/* 测试背景图位置如果是数值 不要颠倒顺序 */
/* 水平50px, 垂直100px */
/* background: pink url(./images/1.jpg) no-repeat 50px 100px; */
background: pink url(./images/1.jpg) no-repeat 100px 50px;
}
</style>
元素显示模式
也叫标签显示方式
元素就是标签，也叫标记
块级元素
div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer等
➢ 显示特点：
- 独占一行（一行只能显示一个）
- 宽度默认是父元素的宽度，高度默认由内容撑开
- 可以设置宽高
<style>
/* 块: 独占一行; 宽度默认是父级100%; 添加宽度都生效 */
div {
width: 300px;
height: 300px;
background-color: pink;
/* 行内块 */
/* display: inline-block; */
/* 行内 */
display: inline;
}
</style>
行内元素
a、span 、b、u、i、s、strong、ins、em、del等
➢ 显示特点：
- 一行可以显示多个
- 宽度和高度默认由内容撑开
- 不可以设置宽高
<style>
/* 行内: 不换行; 设置宽高不生效; 尺寸和内容的大小相同 */
span {
width: 300px;
height: 300px;
background-color: pink;
/* 行内块 */
/* display: inline-block; */
/* 块 */
display: block;
}
</style>
行内块元素
input、textarea、button、select等
特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline（后面会学）
<head>
<style>
/* 行内块: 一行显示多个; 加宽高生效 */
img {
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<img src="./images/1.jpg" alt="">
<img src="./images/1.jpg" alt="">
</body>
元素显示模式转换
目的：改变元素默认的显示特点，让元素符合布局要求
| 属性 | 效果 | 使用频率 |
|---|---|---|
display:block | 转换成块级元素 | 较多 |
display:inline-block | 转换成行内块元素 | 较多 |
display:inline | 转换成行内元素 | 极少 |
拓展1：HTML嵌套规范注意点
- 块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等……
➢ 但是：p标签中不要嵌套div、p、h等块级元素 - a标签内部可以嵌套任意元素
➢ 但是：a标签不能嵌套a标签
拓展2：居中方法总结
CSS三大特性：继承性、层叠性、优先级
继承性
➢ 特性：子元素有默认继承父元素样式的特点（子承父业）
➢ 可以继承的常见属性(文字控制属性都可以继承)
- color
- font-style、font-weight、font-size、font-family
- text-indent、text-align
- line-height
- ……
➢ 注意点：
• 可以通过 调试工具 判断样式是否可以继承
➢ 继承的好处：可以在一定程度上减少代码
➢ 常见应用场景： - 可以直接给ul设置 list-style:none 属性，从而去除列表默认的小圆点样式
- 直接给body标签设置统一的font-size，从而统一不同浏览器默认文字大小
（拓展）继承失效的特殊情况
➢ 如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式
- a标签的color会继承失效
• 其实color属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了 - h系列标签的font-size会继承失效
• 其实font-size属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了
层叠性
➢ 特性：
- 给同一个标签设置不同的样式 → 此时样式会层叠叠加 → 会共同作用在标签上
- 给同一个标签设置相同的样式 → 此时样式会层叠覆盖 → 最终写在最后的样式会生效
➢ 注意点：当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果
优先级
➢ 特性：优先级高的选择器样式会覆盖优先级低选择器样式
➢ 优先级公式：（原则：更精准的更优先）
继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important
<head>
<style>
#box {
color: orange;
}
.box {
color: blue;
}
div {
color: green !important;
}
body {
color: red;
}
/* !important不要给继承的添加, 自己有样式无法继承父级样式 */
</style>
</head>
<body>
<!-- 意义: 当一个标签使用了多个选择器, 样式冲突的时候, 到底谁生效 -->
<div class="box" id="box" style="color: pink;">测试优先级</div>
</body>
➢ 注意点：
- !important写在属性值的后面，分号的前面！
- !important不能提升继承的优先级，继承的优先级永远最低！
- 实际开发中不建议使用 !important 。
权重叠加计算
➢ 场景：如果是复合选择器，此时需要通过权重叠加计算方法，判断最终哪个选择器优先级最高会生效
➢ 权重叠加计算公式：（每一级之间不存在进位）
➢ 比较规则：
- 先比较第一级数字，如果比较出来了，之后的统统不用看
- 如果第一级数字相同，此时再去比较第二级数字…以此类推
- 如果最终所有数字都相同，表示优先级相同，则比较层叠性（谁写在下面，谁说了算!）
➢ 注意点：只要不是继承，!important权重最高，天下第一！
（拓展）权重叠加计算案例
pxcook的基本使用
盒子模型
“盒子”，就是标签，通过盒子的视角更方便的进行布局。浏览器在渲染网页时，会将网页中的元素看做是一个个的矩形区域，我们也形象的称之为 盒子。
类比现实中的盒子：
每个盒子分别由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）构成
内容的宽度和高度
利用width和height属性设置盒子 内容区域 的大小
<head>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div>文字</div>
</body>
border
<head>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
/* border: 粗细 线条样式 颜色 -- 不分先后顺序 */
/* solid : 实线 */
/* border: 1px solid #000; */
/* dashed: 虚线 */
/* border: 5px dashed #000; */
/* dotted : 点线 */
/* border: 5px dotted #000; */
border-left: 5px dotted #000;
border-right: 5px dotted #000;
border-top: 1px solid red;
border-bottom: 1px solid red;
}
</style>
</head>
<body>
<div>内容</div>
</body>
| 属性名 | 作用 | 属性值 |
|---|---|---|
| border-width | 边框粗细 | 数字+px |
| border-style | 边框样式 | 实线solid、虚线dashed、点线dotted |
| border-color | 边框颜色 | 颜色取值 |
| border | 复合设置 | 1px solid green |
边框（border）- 单方向设置：border - 方位名词
border-collapse（通常在表格中使用）
用来设置表格的边框是否被合并为一个单一的边框
| 值 | 描述 |
|---|---|
| separate | 默认值 |
| collapse | 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。 |
| inherit | 规定应该从父元素继承 border-collapse 属性的值。 |
padding设置
| 属性 | 含义 | 说明 |
|---|---|---|
| padding-left | ||
| padding-right | ||
| padding-top | ||
| padding-bottom | ||
| padding | 复合设置 | 上右下左 10px 20px 30px 40px |
margin设置
| 属性 | 含义 | 说明 |
|---|---|---|
| margin-left | ||
| margin-right | ||
| margin-top | ||
| margin-bottom | ||
| margin | 复合设置 | 上右下左 10px 20px 30px 40px |
注意：
1. border边框设置会影响盒子实际大小
2. padding内边距设置会影响盒子实际大小
3. padding内边距设置 不会影响盒子实际大小的情况？？？ 元素本身没设置width属性
4. margin两个相邻块级元素垂直外边距自动合并
5. 块级元素居中显示 margin:0 auto
6. 行内元素和行内块元素水平居中，给父亲元素设置text-align:center
块级元素嵌套元素塌陷问题
父元素内有子元素
如果给子元素 设置margin-top样式，父元素跟着下来，造成外边距塌陷
如何解决？？
1 父元素设置border
2 父元素设置padding
3 overflow:hidden
关于盒子的尺寸
盒子尺寸 = width * height + padding + border
内边距和边框都会撑大盒子的尺寸。
<head>
<style>
div {
/* border 撑大盒子尺寸 */
/* 盒子尺寸 = width * height + 边框线 */
/* 盒子实际尺寸为400 * 400 */
width: 300px;
height: 300px;
background-color: green;
padding: 40px;
border: 10px solid #000;
}
</style>
</head>
<body>
<div>div</div>
</body>
版权声明：本文为qq_45025670原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。