前端开发:CSS(2)—— 选择器

前面我们初步学习了CSS,对其有了基本的认识。下面我们来具体学习CSS中的选择器。

目录

选择器的种类

1.基础选择器

(1)标签选择器

(2)类选择器

(3)id选择器

(4)通配符选择器

2.复合选择器

3.伪类选择器


选择器的种类

以下内容为CSS2标准中支持的选择器。

1.基础选择器

基础选择器都是由单个选择器构成的。包括:标签选择器、类选择器、id选择器和通配符选择器。

(1)标签选择器

上一节文章我们修改了段落标签p的样式。而我们在CSS文件中书写的选择器就为标签选择器。它只会修改对应标签的样式,而不会修改其他标签的样式。

html 复制代码
p {
    color:red;
    font-size:40px;
}

(2)类选择器

类似于标签选择器,我们在标签中添加一个class类属性,类选择器中修改的样式会作用在带指定类的标签上。

类选择器要在前面加一个 .

例如,我们用三个段落标签,并给不同的类:

html 复制代码
<body>
    <p class="cat">猫</p>
    <p class="dog">狗</p>
    <p class="rabbit">兔</p>
    <p class="bird">鸟</p>
</body>

在给出不同的类选择器:

html 复制代码
.cat {
    color:black;
    font-size:20px;
}

.dog {
    color:darkgrey;
    font-size:30px;
}

.rabbit {
    color: white;
    font-size:10px; 
}

.bird {
    color:green;
    font-size: 5px;
}

最后运行可以看到四个段落文字有不同的效果。

(3)id选择器

同上,在标签中添加id属性,并类似地在CSS中使用id选择器。id选择器需要再前面加一个#;这里就省略了。

(4)通配符选择器

选取*的定义,选择所有的标签。通配符选择器在实际开发中用来针对页面中所有的元素默认样式进行消除,主要用来消除边距。例如:

html 复制代码
* {
    background-color: bisque;
}

这时我们运行会发现整个网站的背景都变为了我们修改的颜色。并且优先级更高。如果我们单独修改某一段的标签样式,则无法修改成功。

2.复合选择器

复合选择器其实就是多个基础选择器相互结合。具体实现我们就不再探讨。

3.伪类选择器

最后我们来学习一下伪类选择器。它一般用来定义元素状态,可以用于选择处于特定**状态**或满足特定**条件**的元素,这些状态无法通过常规选择器直接定位。它们以冒号 `:` 开头,附加在基础选择器之后。

下面列举几种常见用法:

1.:hover 鼠标悬停时

html 复制代码
a:hover { color: red; } /* 鼠标悬停时链接变红 */

2.:active 元素被激活(如单击时)

html 复制代码
button:active { background: blue; } /* 按钮按下时背景变蓝 */

3.:focus 元素获得焦点(如输入框被选中)

html 复制代码
input:focus { border-color: green; } /* 输入框聚焦时边框变绿 */

4.:link 未访问的链接

html 复制代码
a:link { color: purple; }

5.:visited 已访问的链接

html 复制代码
a:visited { color: gray; }
相关推荐
zuo-yiran4 分钟前
vue div标签可输入状态下实现数据双向绑定
前端·javascript·vue.js
qq_316837755 分钟前
使用leader-line-vue 时垂直元素间距过小连线打转的解决
前端·javascript·vue.js
天天向上10246 分钟前
vue3使用ONLYOFFICE 实现在线Word,Excel等文档
前端·javascript·html
KoProject9 分钟前
发布30款App之后,我总结了这套GLM-4.6全自动化开发流
前端·后端·github
社恐的下水道蟑螂15 分钟前
前端小彩蛋:纯 CSS 实现情侣小球互动,甜到齁的代码我扒下来了
css
前端踩bug工程师16 分钟前
flutter项目
前端
云枫晖16 分钟前
Webpack系列-SourceMap
前端·webpack
qq_4203620324 分钟前
PDF导出服务
前端·pdf·状态模式·node·puppeteer
该用户已不存在27 分钟前
构建现代应用的9个Python GUI库
前端·后端·python
abiao198127 分钟前
VUE的“单向数据绑定” 和 “双向数据绑定”
前端·javascript·vue.js