CSS选择器
举例用的基础HTML代码：
<body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item center">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div></div></body>
简单选择器
| 选择器 | 说明 | 代码演示 |
|---|---|---|
| 元素选择器 | 直接引用标签名 | p{background-color: red;} |
| 类选择器 | 对应html中标签的class属性 | .item{background-color: red;} |
| 多个类复合选择 | 对应class属性值为多个名称 | .item.center{background-color: red;} |
| id选择器 | 对应html中标签的id属性 | #firstr{background-color: red;} |
同条件下的元素，在层叠样式后，只有最后一个选择器生效
基本选择器
| 选择器 | 说明 | 连接符 | 代码演示 |
|---|---|---|---|
| 后代选择器 | 当前元素的后代元素，只支持一级 | 空格 | .container div{background-color: red;} |
| 父子选择器 | 当前元素下的子级元素，选择所有子、孙元素 | > | body > div{background-color: red;} |
| 同级相邻选择器 | 当前元素的同级元素，只支持一级 | + | .item.center + .item {background-color: red;} |
| 同级所有选择器 | 当前元素的同级元素下所有元素 | ~ | .item.center ~ .item{background-color: red;} |
结构伪类选择器
举例用的基础HTML代码：
<body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div><div class="item">9</div></div></body>
不分组
无组名，用
:打头，后面跟关键字，可加参数。
| 功能 | 关键字 | 代码演示 |
|---|---|---|
| 匹配第一个子元素 | :first-child |
.container > :first-child {background-color: lightgreen; } |
| 最后一个子元素 | :last-child |
.container > :last-child {background-color: lightgreen; } |
| 选第3个 | :nth-child(3) |
.container > :nth-child(3) {background-color: lightgreen; } |
| 只选择偶数单元格 | :nth-child(2n) 或 :nth-child(even) |
.container > :nth-child(even) {background-color: lightgreen; } |
| 只选择奇数单元格 | :nth-child(2n-1) 或 :nth-child(odd) |
.container > :nth-child(odd) {background-color: lightgreen; } |
| 从指定位置开始后面剩下的所有元素 | :nth-child(n + 4) 从第4个开始后面所有的 |
.container > :nth-child(n + 4) {background-color: lightgreen; } |
| 只取前几个 | :nth-child(-n + 3) 前3个 |
.container > :nth-child(-n + 3) {background-color: lightgreen; } |
| 只取最后几个 | :nth-last-child(-n + 3) 最后3个 |
.container > :nth-last-child(-n + 3) {background-color: lightgreen; } |
| 倒数的方式取数 | :nth-last-child(2) 倒数第2个 |
.container > :nth-last-child(2) {background-color: lightgreen; } |
分组
和不分组的区别：在
：前面加上组名，并且第一步先分组，第二步根据组中的索引进行选择。
关键字用of-type结尾。
基础HTML代码：
<body><div class="container"><div class="item">1</div><div class="item">2</div><div class="item">3</div><span class="item">4</span><span class="item">5</span><span class="item">6</span><span class="item">7</span><span class="item">8</span><span class="item">9</span></div></body>
关键字举例说明：
| 关键字 | 说明 |
|---|---|
.container div:last-of-type |
取container下的所有div元素 |
.container span:nth-of-type(3) |
取container下的所有span元素中的第3个元素 |
.container span:nth-of-type(-n + 3) |
取container下的所有span元素中的前3个元素 |
.container span:nth-last-of-type(-n + 2) |取container下的所有span元素中的最后第2个元素|
伪类
CSS 伪类用于向某些选择器添加特殊的效果
伪类用:标识
| 关键字 | 说明 | 代码 |
|---|---|---|
:targer |
与id配合使用，实现锚点操作 | #login-form:target { display: block; } #login-form为锚点，即id值 |
:focus |
与表单中的输入对象配合使用，得到焦点后改变样式 | input:focus {background-color: yellow;} input为表单内输入框 |
::selection |
当选中文本时作用，仅能改变文本的前景色与背景色 | input::selection { color: white; background-color: red; } |
:not（） |
反向选择。“（）”内填写排除条件 | .list > :not(:nth-of-type(3)) { color: red; } :nth-of-type(3)指当前元素组下的第3个元素 |
伪元素
CSS 伪元素为虚拟元素，不体现在文档源码中
伪元素用::标识
| 关键字 | 说明 | 代码 |
|---|---|---|
::before |
在当前元素的前面虚拟一个元素 | .list::before {content: "购物车";color: blue;} .list为一个列表类 |
::after |
在当前元素的后面虚拟一个元素 | .list::after {content: "结算中...";color: red;font-size: 1.1rem;} |
伪元素效果如下：
