54 lines
1.4 KiB
Markdown
54 lines
1.4 KiB
Markdown
---
|
||
title: CSS常用选择器二
|
||
date: 2022-01-08 15:25:42
|
||
tags:
|
||
- CSS
|
||
categories: CSS
|
||
author: Anges黎梦
|
||
---
|
||
|
||
### 1、id选择器
|
||
|
||
通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名 一般给程序使用，所以不推荐使用id作为选择器。
|
||
|
||
举例：
|
||
|
||
```html
|
||
#box{color:red}
|
||
......
|
||
<p id="box">这是一个段落标签</p> <!-- 对应以上一条样式，其它元素不允许应用此样式 -->
|
||
<p>这是第二个段落标签</p> <!-- 无法应用以上样式，每个标签只能有唯一的id名 -->
|
||
<p>这是第三个段落标签</p> <!-- 无法应用以上样式，每个标签只能有唯一的id名 -->
|
||
```
|
||
|
||
### 2、组选择器
|
||
|
||
多个选择器，如果有同样的样式设置，可以使用组选择器。
|
||
|
||
举例：
|
||
|
||
```html
|
||
.box1,.box2,.box3{width:100px;height:100px}
|
||
.box1{background:red}
|
||
.box2{background:pink}
|
||
.box2{background:gold}
|
||
|
||
<div class="box1">....</div>
|
||
<div class="box2">....</div>
|
||
<div class="box3">....</div>
|
||
```
|
||
|
||
### 3、伪类及伪元素选择器
|
||
|
||
常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after,它们可以通过样式在 元素中插入内容。
|
||
|
||
```html
|
||
.box1:hover{color:red}
|
||
.box2:before{content:'行首文字';}
|
||
.box3:after{content:'行尾文字';}
|
||
|
||
<div class="box1">....</div>
|
||
<div class="box2">....</div>
|
||
<div class="box3">....</div>
|
||
```
|