选择器
优先级： id 选择器 > 类选择器 > 标签选择器
类选择器：
css
复制代码
.myClass {
color: blue;
}
id 选择器（全局唯一）：
css
复制代码
#myId {
color: green;
}
标签选择器：
css
复制代码
p {
color: red;
}
层次选择器：
css
复制代码
/* 后代选择器 A B */
.nav a {
color: blue;
}
/* 子选择器 A > B */
.card > h2 {
color: red;
}
/* 相邻兄弟选择器 A + B（相邻向下） */
h1 + p {
font-size: 20px;
}
/* 通用兄弟选择器 A ~ B（向下所有兄弟元素） */
h1 ~ p {
color: gray;
}
伪类选择器：
| 伪类选择器 |
作用 |
:hover |
鼠标悬停时触发 |
:focus |
元素获得焦点时触发（如 input） |
:first-child |
选择父元素的第一个子元素 |
:last-child |
选择父元素的最后一个子元素 |
:nth-child(n) |
选择第 n 个子元素 |
:nth-of-type(n) |
选择第 n 个特定类型的子元素 |
:checked |
选择被选中的单选框/复选框 |
:disabled |
选择禁用的表单元素 |
属性选择器：
| 选择器 |
作用 |
示例 |
[attr] |
选择包含某个属性的元素 |
input[required] |
[attr=value] |
选择属性值等于某个值的元素 |
input[type="text"] |
[attr~=value] |
选择属性值中包含某个单词的元素 |
[class~="btn"] |
[attr^=value] |
选择属性值以某个字符串开头的元素 |
a[href^="https"] |
[attr$=value] |
选择属性值以某个字符串结尾的元素 |
a[href$=".pdf"] |
[attr*=value] |
选择属性值中包含某个字符串的元素 |
input[name*="user"] |
示例：
css
复制代码
/* 选中所有 target="_blank" 的链接 */
a[target="_blank"] {
color: red;
}
css
复制代码
/* 选中所有 href 以 https 开头的安全链接 */
a[href^="https"] {
color: green;
}
CSS 的引入方式（优先级：就近原则）
html
复制代码
<p style="color: red; font-size: 16px;">天津科技大学</p>
html
复制代码
<!DOCTYPE html>
<html>
<head>
<style>
p {
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p>天津科技大学</p>
</body>
</html>
html
复制代码
<!DOCTYPE html>
<html>
<head>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<p>what are you doing.</p>
</body>
</html>
styles.css 内容：
css
复制代码
p {
color: green;
font-size: 20px;
}
盒子模型
组成：
content（内容区域） - 盒子的实际内容，如文本、图片等。padding（内边距） - 内容与边框之间的间距，影响背景颜色的填充范围。border（边框） - 围绕内容和内边距的边界线，可设置颜色、样式和宽度。margin（外边距） - 盒子与相邻元素之间的间距，不影响背景颜色。
结构示意图：
+-------------------------------+
| margin | 外边距
| +-------------------------+ |
| | border | | 边框
| | +-------------------+ | |
| | | padding | | | 内边距
| | | +-----------+ | | |
| | | | content | | | | 内容
| | | +-----------+ | | |
| | +-------------------+ | |
| +-------------------------+ |
+-------------------------------+
相关属性：
| 属性 |
作用 |
示例 |
width |
盒子内容区域（content）的宽度 |
width: 200px; |
height |
盒子内容区域（content）的高度 |
height: 100px; |
padding |
内边距（content 到 border） |
padding: 10px; |
border |
边框（border） |
border: 2px solid black; |
margin |
外边距（margin） |
margin: 20px; |
HTML 嵌套规范注意点：
- 块级元素 可嵌套文本、块级元素、行内元素，但
p 标签中不能嵌套 div、p、h 等块级元素。
a 标签 内部可以嵌套任意元素，但不能嵌套 a 标签。