前端开发: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; }
相关推荐
袁煦丞24 分钟前
DS file文件管家远程自由:cpolar内网穿透实验室第492个成功挑战
前端·程序员·远程工作
用户0137412843725 分钟前
九个鲜为人知却极具威力的 CSS 功能:提升前端开发体验的隐藏技巧
前端
永远不打烊29 分钟前
Window环境 WebRTC demo 运行
前端
风舞30 分钟前
一文搞定JS所有类型判断最佳实践
前端·javascript
coding随想30 分钟前
哈希值变化的魔法:深入解析HTML5 hashchange事件的奥秘与实战
前端
一树山茶38 分钟前
uniapp在微信小程序中实现 SSE进行通信
前端·javascript
coding随想38 分钟前
小程序中的pageshow与pagehide事件,HTML5中也有?揭秘浏览器往返缓存(BFCache)
前端
萌萌哒草头将军43 分钟前
Rspack 1.5 版本更新速览!🚀🚀🚀
前端·javascript·vue.js
阿卡不卡1 小时前
基于多场景的通用单位转换功能实现
前端·javascript
♡喜欢做梦1 小时前
jQuery 从入门到实践:基础语法、事件与元素操作全解析
前端·javascript·jquery