选择器

最新推荐文章于 2023-03-08 19:54:24 发布

原创最新推荐文章于 2023-03-08 19:54:24 发布 · 185 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#常见选择器

入门专栏收录该内容

5 篇文章

订阅专栏

本文深入讲解CSS中的基本选择器、层次选择器、过滤选择器及表单选择器，包括后代、子元素、兄弟元素的选择，以及如何通过属性、可见性等条件进一步过滤选择元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.基本选择器
最基本最常用的选择器（省略）
2.层次选择器 v查找子元素, 后代元素, 兄弟元素的选择器
ancestor descendant :在给定的祖先元素下的后代元素中匹配元素
parent > child :在给定的父元素下的子元素中匹配元素
prev + next 匹配所有紧接在prev元素后的next元素

选中class为box的下一个li
    // $('.box+li').css('background', 'red')

prev~siblings 匹配 prev 元素之后的所有 siblings 元素
3.过滤选择器
在原有选择器匹配的元素中进一步进行过滤的选择器
* 基本
* 内容
* 可见性
* 属性

//1. 选择第一个div
    //$('div:first').css('background', 'red')
//2. 选择最后一个class为box的元素
    //$('.box:last').css('background', 'red')
//3. 选择所有class属性不为box的div
    //$('div:not(.box)').css('background', 'red')
//4. 选择第二个和第三个li元素
    //$('li:gt(0):lt(2)').css('background', 'red') //索引起始位置发生变化，重新开始计算
    //$('li:lt(3):gt(0)').css('background', 'red') //正确索引位置
//5. 选择内容为BBBBB的li
    //$('li:contains(BBBBB)').css('background', 'red')
//6. 选择隐藏的li
    //$('li:hidden ').show()
//7. 选择有title属性的li元素
    //$('li[title]').css('background', 'red')
//8. 选择所有属性title为hello的li元素
    //$('li[title=hello]').css('background', 'red')

4.表单选择器