优先级： id 选择器 > 类选择器 > 标签选择器
css">.myClass {
color : blue;
}
id 选择器（全局唯一）：css">#myId {
color : green;
}
css">p {
color : red;
}
css">
.nav a {
color : blue;
}
.card > h2 {
color : red;
}
h1 + p {
font-size : 20px;
}
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">
a[target="_blank"] {
color : red;
}
css">
a[href^="https"] {
color : green;
}
< pstyle = " css language-css ">color : red; font-size : 16px; " > </ p> <! DOCTYPE html > < html> < head> < style> css">
p {
color : blue;
font-size : 18px;
}
</ style> </ head> < body> < p> </ p> </ body> </ html> <! DOCTYPE html > < html> < head> < linkhref = " styles.css " rel = " stylesheet" > </ head> < body> < p> </ 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;
块级元素 可嵌套文本、块级元素、行内元素，但 p 标签中不能嵌套 div、p、h 等块级元素。a 标签a 标签。
