CSS常见选择器

  1. 元素选择器(element selector):通过元素的标签名选择元素,例如 p 选择所有 <p> 元素。

  2. 类选择器(class selector):通过元素的 class 属性值选择元素,例如 .red 选择所有具有 red 类的元素。

  3. ID选择器(id selector):通过元素的 id 属性值选择元素,例如 #header 选择具有 header id 的元素。

  4. 属性选择器(attribute selector):通过元素的属性值选择元素,例如 [type="text"] 选择所有 type 属性值为 text 的元素。

  5. 后代选择器(descendant selector):通过元素之间的嵌套关系选择元素,例如 div p 选择所有 <p> 元素,而这些元素是 <div> 元素的后代。

  6. 直接子元素选择器(child selector):通过元素之间的直接父子关系选择元素,例如 ul > li 选择所有 <li> 元素,而这些元素是 <ul> 元素的直接子元素。

  7. 兄弟选择器(sibling selector):通过元素之间的兄弟关系选择元素,例如 p + span 选择紧接在 <p> 元素后面的 <span> 元素。

  8. 伪类选择器(pseudo-class selector):通过元素的特殊状态选择元素,例如 :hover 选择鼠标悬停在元素上的状态。

以上是一些常见的 CSS 选择器,可以根据具体需要选择合适的选择器来选取元素进行样式的设置。

相关推荐
weixin_471383039 小时前
set和map结构,减少O(n)复杂度
前端·javascript
hunteritself9 小时前
GPT Image2 + Seedance 2.0:3 小时从剧本到 AI 互动影游,深度实测复盘
前端·数据库·人工智能·深度学习·transformer
独秀不如众秀9 小时前
前端页面引擎协议:由浅入深——从 30 行到 vform3 的演化之路
前端
学网安的肆伍9 小时前
【044-WEB攻防篇】PHP应用&SQL盲注&布尔回显&延时判断&报错处理&增删改查方式
前端·sql·php
八号当铺9 小时前
从 Prompt 到 AI 工程化:理解 Rules、Skills 与 Agent
前端·ai编程·cursor
didadida2629 小时前
子路径部署 Vue/React 应用偶发白屏
前端·后端
invicinble9 小时前
前端框架使用vue-cli (第五层:构建打包层--总体层介绍)
前端·vue.js·前端框架
前端那点事9 小时前
Vuex刷新数据丢失?4种持久化方案全覆盖,从零到项目落地(实战完整版)
前端·vue.js
Cerrda9 小时前
性能提升 satisfying!一个 Vue3 指令干掉页面上 200 个无用 Tooltip 实例
前端·设计
漫游的渔夫9 小时前
前端开发者做 AI Agent:别只渲染答案,用 7 个状态接住确认、错误和 trace
前端·人工智能·typescript