Heureka's blog

Appearance

04. CSS 基础与选择器 ​

CSS（Cascading Style Sheets）用于控制网页的样式和布局。掌握 CSS 选择器是前端开发的核心技能。

一、CSS 引入方式 ​

1. 内联样式 ​

html
<div style="color: red; font-size: 16px;">内联样式</div>

2. 内部样式表 ​

html
<head>
    <style>
        .box {
            color: blue;
            font-size: 18px;
        }
    </style>
</head>

3. 外部样式表 ​

html
<link rel="stylesheet" href="style.css">

4. 导入样式 ​

css
@import "reset.css";
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");

二、基础选择器 ​

1. 元素（标签）选择器 ​

css
p {
    color: black;
}

h1 {
    font-size: 32px;
}

2. 类选择器 ​

css
.primary {
    color: blue;
}

.card {
    border: 1px solid #ccc;
    padding: 10px;
}

/* 多类名 */
<div class="primary card">内容</div>

3. ID 选择器 ​

css
#header {
    background-color: #333;
}

/* 注意：ID 选择器应该唯一，一个页面只出现一次 */
<div id="header"></div>

4. 通用选择器 ​

css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 所有子元素 */
.parent * {
    color: red;
}

三、组合选择器 ​

1. 后代选择器（空格） ​

css
.container p {
    color: blue;
}

/* 选择所有后代，不限制层级 */

2. 子选择器（>） ​

css
.menu > li {
    float: left;
}

/* 只选择直接子元素 */

3. 相邻兄弟选择器（+） ​

css
h2 + p {
    margin-top: 0;
}

/* 选择紧接在 h2 后的 p 元素 */

4. 通用兄弟选择器（~） ​

css
h3 ~ p {
    color: gray;
}

/* 选择 h3 之后的所有 p 元素 */

四、属性选择器 ​

css
/* 存在属性 */
[target] {
    border: 1px solid red;
}

/* 属性值等于 */
[href="https://example.com"] {
    color: green;
}

/* 属性值包含（单词） */
[class~="active"] {
    background-color: yellow;
}

/* 属性值以...开头 */
[href^="https"] {
    color: blue;
}

/* 属性值以...结尾 */
[href$=".pdf"] {
    background-image: url(pdf-icon.png);
}

/* 属性值包含... */
[src*="avatar"] {
    border-radius: 50%;
}

/* 属性值以...开头（含连字符） */
[lang^="en"] {
    font-family: "Arial", sans-serif;
}

五、伪类选择器 ​

1. 状态伪类 ​

css
/* 链接状态 */
a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: orange; }

/* 表单状态 */
input:focus {
    border-color: blue;
    outline: none;
}

input:checked + label {
    color: green;
}

input:disabled {
    background-color: #f0f0f0;
}

input:enabled { }

2. 结构伪类 ​

css
/* 第一个子元素 */
li:first-child { }
/* 最后一个子元素 */
li:last-child { }
/* 唯一子元素 */
div:only-child { }

/* 第几个子元素（从1开始） */
li:nth-child(2) { }

/* 奇数/偶数 */
li:nth-child(odd) { }
li:nth-child(even) { }

/* 公式 nth-child(an+b) */
/* 3的倍数 */
li:nth-child(3n) { }
/* 从第5个开始，每2个 */
li:nth-child(2n+5) { }
/* 倒数第n个 */
li:nth-last-child(2) { }

/* 同类型元素 */
li:first-of-type { }
li:last-of-type { }
li:nth-of-type(2) { }
li:nth-last-of-type(3) { }

/* 空元素 */
div:empty {
    border: 1px solid red;
}

/* 根元素 */
:root {
    --primary-color: #3498db;
}

3. 表单伪类 ​

css
input:valid { border-color: green; }
input:invalid { border-color: red; }
input:required { border-left: 3px solid red; }
input:optional { }
input:out-of-range { }
input:in-range { }

4. 语言伪类 ​

css
:lang(zh-CN) {
    font-family: "Microsoft YaHei", sans-serif;
}

六、伪元素选择器 ​

css
/* ::before（必须设置 content 属性） */
.box::before {
    content: "前缀：";
    color: red;
}

/* ::after */
.box::after {
    content: " →";
    color: blue;
}

/* 首字母 */
p::first-letter {
    font-size: 24px;
    font-weight: bold;
}

/* 首行 */
p::first-line {
    color: red;
}

/* 选中文字 */
::selection {
    background-color: yellow;
    color: red;
}

七、优先级（特指度） ​

优先级规则 ​

内联样式         >  ID > 类/伪类/属性 > 元素/伪元素 > 通用

计算方式：
- 内联样式：1000
- ID：100
- 类/伪类/属性：10
- 元素/伪元素：1
- 通用：0

优先级相同时，后定义的生效

示例 ​

css
/* 优先级：1 */
p { color: red; }

/* 优先级：10 */
.active { color: blue; }

/* 优先级：11 */
p.active { color: green; }

/* 优先级：100 */
#text { color: purple; }

/* 优先级：101 */
#text.active { color: orange; }

/* 优先级：100（但 !important 最高） */
p { color: red !important; }

注意事项 ​

css
/* 优先级是累加的，不是进位 */
/* 11 个类选择器 < 1 个 ID 选择器 */

/* 相同优先级，后面覆盖前面 */
/* 不同选择器指向同一属性 */

/* !important 慎用 */
p {
    color: red !important;
}

八、继承 ​

css
/* 可继承属性：color, font, text-align, line-height 等 */
body {
    color: black;
    font-family: "Arial", sans-serif;
    /* 子元素会继承这些属性 */
}

/* 不可继承属性：border, padding, margin, width, height 等 */
div {
    width: 200px;
    /* 子元素不会继承 */
}

/* 强制继承 */
span {
    width: inherit;
}

/* 强制不继承 */
span {
    color: initial;
}

九、单位 ​

长度单位 ​

css
/* 绝对单位 */
px  /* 像素 */
pt  /* 点 */
in  /* 英寸 */
cm  /* 厘米 */

/* 相对单位 */
em   /* 相对于父元素字体大小 */
rem  /* 相对于根元素字体大小 */
vw   /* 视口宽度的 1% */
vh   /* 视口高度的 1% */
vmin /* vw/vh 中较小的值 */
vmax /* vw/vh 中较大的值 */
%    /* 相对于父元素 */

颜色单位 ​

css
/* 颜色名称 */
color: red;
color: blue;

/* 十六进制 */
color: #f00;
color: #ff0000;
color: #ff0000ff; /* 带透明度 */

/* RGB */
color: rgb(255, 0, 0);
color: rgba(255, 0, 0, 0.5);

/* HSL */
color: hsl(0, 100%, 50%);
color: hsla(0, 100%, 50%, 0.5);

/* 当前颜色 */
border-color: currentColor;

十、CSS 变量（自定义属性） ​

css
/* 定义变量 */
:root {
    --primary-color: #3498db;
    --secondary-color: #2ecc71;
    --font-size: 16px;
    --spacing: 10px;
}

/* 使用变量 */
.button {
    background-color: var(--primary-color);
    font-size: var(--font-size);
    padding: var(--spacing);
}

/* 变量默认值 */
.text {
    color: var(--custom-color, #333);
}

/* 局部变量 */
.card {
    --card-width: 300px;
    width: var(--card-width);
}

/* 动态修改变量（配合 JS） */
button {
    --button-theme: blue;
    background-color: var(--button-theme);
}

总结 ​

掌握 CSS 选择器和优先级是前端开发的基础。合理使用选择器可以编写出高效、可维护的样式代码。