前端开发: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; }
相关推荐
用户63310776123662 分钟前
Who is a Promise?
前端
比老马还六37 分钟前
Blockly元组积木开发
前端
笨笨狗吞噬者41 分钟前
【uniapp】小程序体积优化,JSON文件压缩
前端·微信小程序·uni-app
西洼工作室1 小时前
浏览器事件循环与内存管理可视化
前端·javascript·css·css3
xier1234561 小时前
高性能和高灵活度的react表格组件
前端
你打不到我呢1 小时前
nestjs入门:上手数据库与prisma
前端
多啦C梦a1 小时前
React 实战:从 setInterval 到 useInterval,一次搞懂定时器 Hook(还能暂停!)
前端·javascript·react.js
闲不住的李先森1 小时前
乐观更新
前端·react.js·设计模式
笔尖的记忆1 小时前
【前端架构和框架】react组件化&数据流
前端·面试
zhangzelin8882 小时前
TypeScript入门指南:JavaScript的类型化超集
前端·javascript·其他·typescript