CSS常见选择器

CSS常见选择器

在Web开发中,层叠样式表(CSS)是用于描述HTML或XML(包括SVG和XHTML等其他XML语言)文档的样式的语言。CSS描述了文档的表现形式,包括布局、颜色和字体等。在CSS中,选择器是一种模式,用于选择需要添加样式的元素。以下是一些常见的CSS选择器。

1. 元素选择器

元素选择器是最基本的选择器,它匹配HTML元素的类型名称。例如,p选择器将匹配所有的<p>元素。

css 复制代码
p {
    color: red;
}

2. 类选择器

类选择器匹配HTML元素的类属性。类选择器以.开始。例如,.myClass选择器将匹配所有类名为myClass的元素。

css 复制代码
.myClass {
    color: blue;
}

3. ID选择器

ID选择器匹配HTML元素的ID属性。ID选择器以#开始。例如,#myID选择器将匹配所有ID为myID的元素。

css 复制代码
#myID {
    color: green;
}

4. 属性选择器

属性选择器匹配具有特定属性的HTML元素。例如,[target]选择器将匹配所有具有target属性的元素。

css 复制代码
[target] {
    color: yellow;
}

5. 伪类选择器

伪类选择器允许你样式化链接的状态,例如未访问的链接、已访问的链接、鼠标悬停在链接上时等。例如,:hover选择器将匹配鼠标悬停在其上的元素。

css 复制代码
a:hover {
    color: purple;
}

6. 组合选择器

组合选择器允许你同时选择多个元素。你可以使用,来分隔每个选择器。例如,p, li选择器将匹配所有的<p><li>元素。

css 复制代码
p, li {
    color: orange;
}

7. 后代选择器

选择作为另一个元素后代的元素。

css 复制代码
div p {
    text-align: center;
}

8. 子元素选择器

选择作为另一个元素直接子元素的元素。

css 复制代码
ul > li {
    list-style-type: circle;
}

9. 相邻兄弟选择器

选择紧接在另一个元素后的兄弟元素。

css 复制代码
h2 + p {
    margin-top: 10px;
}

10. 通用选择器

*将匹配所有元素。

css 复制代码
* {
    box-sizing: border-box;
}
相关推荐
WebDesign_Mu2 小时前
为了庆祝2025英雄联盟全球总决赛开启,我用HTML+CSS+JS制作了LOL官方网站
javascript·css·html
Bellafu6668 小时前
selenium的css定位方式有哪些
css·selenium·tensorflow
我有一棵树9 小时前
前端开发中 SCSS 变量与 CSS 变量的区别与实践选择,—— 两种变量别混为一谈
前端·css·scss
im_AMBER10 小时前
CSS 01【基础语法学习】
前端·css·笔记·学习
DokiDoki之父10 小时前
前端速通—CSS篇
前端·css
尘世中一位迷途小书童10 小时前
🎨 SCSS 高级用法完全指南:从入门到精通
前端·css·开源
Giant10011 小时前
小白也能懂的响应式布局:从 0 到 1 学会适配所有设备
css
银安12 小时前
CSS排版布局篇(8):Grid 二维布局
前端·css
华仔啊13 小时前
Vue3 登录页还能这么丝滑?这个 hover 效果太惊艳了
前端·css·vue.js
牧杉-惊蛰1 天前
disable-devtool 网络安全 禁止打开控制台
前端·css·vue.js