目录
css选择器的类型
css优先级
css的单位
css选择器的类型：
1. 通用选择器 *
表示为*，用于清除浏览器默认样式，统一基础排版
举例如下：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
2.元素选择器
使用HTML元素标签名作为选择器，比如h1, div等
3. 类选择器
给HTML添加一个class="myStyle", 此时的myStyle就是可以作为类选择器
'.myStyle'
<div class="myStyle"></div>
.myStyle {
background-color: gray;
}
4. ID选择器
'#menu'
<div id="menu"></div>
#menu {
font-size: 10px;
}
5.属性选择器
input[type="text"] {
border: 1px solid gray;
}
6.关系选择器
后代选择器
选择所有在 <div> 元素内的 <p> 元素，无论是否是直接子元素。以下例子中p1,p2都将被选择
<div>
<div>
<p>p1</p>
</div>
<p>p2</p>
<div>
div p {
font-weight: bold;
}
注意区别以下运算符
div+p：紧跟着<div>之后的第一个元素，例子中只有p1会被选中
div~p: <div>之后的每一个元素p
div>p: 直选中<div>的直接子元素p
7. 伪类/伪元素选择器
CSS3 标准：从 CSS2.1 开始，伪元素（如 ::first-line、::before）统一使用双冒号语法，以区分伪类（如 :hover、:first-child）
伪类
| 选择器 | 示例 | 说明 |
|---|---|---|
| :link | a:link | 未访问过的链接 |
| :hover | a:hover | 鼠标悬浮时 |
| :visited | a:visited | 已经访问过的链接 |
| :disabled | input:disabled | 选择每一个禁用的输入元素 |
| :checked | input:checked | 选择每个选中的输入元素 |
伪元素
| 选择器 | 示例 | 说明 |
|---|---|---|
| ::first-line | p::first-line | 段落的第一行文字 |
| ::first-letter | p::first-letter | 段落的第一个字母 |
| ::before | div::before | 通过content插入内容到div之前 |
| ::after | div::after | 通过content插入内容到div之前 |
8.群组选择器
多个选择器应用同样的样式规则，可以用逗号隔开
h1 {
color: red;
}
.special {
color: red;
}
可以简化为
h1,
.special {
color: red;
}
选择所有class="hometown"的p元素
p.hometown {
color: red;
}
CSS优先级
- 优先级等级
从高到低，依次为
- 内联样式 style
- ID选择器
- 类选择器、属性选择器、和伪类选择器
- 伪元素选择器和关系选择器
- 优先级计算
- 内联样式加1000分
- id样式加100分
- 类选择器、属性选择器、和伪类选择器加10分
- 伪元素选择器和元素选择器加10分
注：!important 可以声明样式的优先级最高
CSS的继承
CSS中的属性可分为可集成和不可继承两类。科技城属性会从父元素传递给子元素，而不可继承属性则只用于定义它们的元素。可继承属性主要设计文本和字体相关的属性，以及一些布局相关的属性。
- 可继承属性
- color
- font-family, font-size, font-style, font-weight
- letter-height
- text-align
- visibility
- white-space
- word-spacing
- 不可继承属性
- background
- border
- display
- height
- margin, padding
CSS单位
px/rem/em/vw/wh 的区别
1.相对性差距
- px: 绝对单位，直接对应屏幕像素
- em: 相对于父元素的font-size,若父元素未设置，则继承浏览器默认值(通常为16px).会有累加计算的问题
- rem: 相对于跟元素<html>的font-size, 全局统一控制
- vw/vh: 相对视口尺寸，与父元素无关，适合响应式布局
- 应用场景
- px: 固定尺寸(如边框、图标)，需要精确控制点的元素
- rem： 全局布局(如容器宽度、间距),响应式设计
- vw/vh: 全屏元素(背景图、横幅)，视口适配(移动端优先)
