CSS选择器

简介: CSS选择器

1.基本选择器

$("#id") //ID选择器

$(“div”) //元素选择器

$(".classname") //类选择器

$(".classname,.classname1,#id1") //组合选择器

2.层次选择器

$("#id>.classname “) //子元素选择器

$(”#id .classname “) //后代元素选择器

$(”#id + .classname “) //紧邻下一个元素选择器

$(”#id ~ .classname ") //兄弟元素选择器

3.过滤选择器(重点)

$(“li:first”) //第一个li

$(“li:last”) //最后一个li

$(“li:even”) //挑选下标为偶数的li

$(“li:odd”) //挑选下标为奇数的li

$(“li:eq(4)”) //下标等于 4 的li(第五个 li 元素)

$(“li:gt(2)”) //下标大于 2 的li

$(“li:lt(2)”) //下标小于 2 的li

$(“li:not(#runoob)”) //挑选除 id=“runoob” 以外的所有li

3.2内容过滤选择器

$(“div:contains(‘Runob’)”) // 包含 Runob文本的元素

$(“td:empty”) //不包含子元素或者文本的空元素

$(“div:has(selector)”) //含有选择器所匹配的元素

$(“td:parent”) //含有子元素或者文本的元素

3.3可见性过滤选择器

$(“li:hidden”) //匹配所有不可见元素,或type为hidden的元素

$(“li:visible”) //匹配所有可见元素

3.4属性过滤选择器

$(“div[id]”) //所有含有 id 属性的 div 元素

$(“div[id=‘123’]”) // id属性值为123的div 元素

$(“div[id!=‘123’]”) // id属性值不等于123的div 元素

$(“div[id^=‘qq’]”) // id属性值以qq开头的div 元素

( " d i v [ i d ("div[id("div[id=‘zz’]") // id属性值以zz结尾的div 元素

$(“div[id*=‘bb’]”) // id属性值包含bb的div 元素

( " i n p u t [ i d ] [ n a m e ("input[id][name("input[id][name=‘man’]") //多属性选过滤,同时满足两个属性的条件的元素

3.5状态过滤选择器

$(“input:enabled”) // 匹配可用的 input

$(“input:disabled”) // 匹配不可用的 input

$(“input:checked”) // 匹配选中的 input

$(“option:selected”) // 匹配选中的 option

4.表单选择器

$(":input") //匹配所有 input, textarea, select 和 button 元素

( " : t e x t " ) / / 所 有 的 单 行 文 本 框 , (":text") //所有的单行文本框,(":text")//(":text") 等价于( " [ t y p e = t e x t ] " ) , 推 荐 使 用 ("[type=text]"),推荐使用("[type=text]")使(“input:text”)效率更高,下同

$(":password") //所有密码框

$(":radio") //所有单选按钮

$(":checkbox") //所有复选框

$(":submit") //所有提交按钮

$(":reset") //所有重置按钮

$(":button") //所有button按钮

$(":file") //所有文件域

相关文章
|
4月前
|
前端开发
CSS:高级选择器
CSS:高级选择器
62 1
|
4月前
|
前端开发 JavaScript
CSS:基础选择器
CSS:基础选择器
65 1
|
2月前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
66 5
|
2月前
|
前端开发 JavaScript UED
深入理解与应用 CSS 伪类选择器
【10月更文挑战第23天】通过以上对 CSS 伪类选择器的深入探讨,我们可以更好地理解和应用它们,为网页设计和开发带来更丰富、更灵活的样式效果。同时,要注意在实际应用中根据具体情况合理选择和使用伪类选择器,以达到最佳的设计效果和用户体验。
64 2
|
4月前
|
前端开发 JavaScript 容器
谁动了我的选择器?深入理解CSS选择器优先级
该文章详细解释了CSS选择器的工作原理,包括不同种类选择器的权重计算规则,并通过实例说明了如何解决样式冲突问题,确保所需的样式能够正确应用到目标元素上。
|
4月前
|
前端开发
前端基础(四)_CSS层叠样式表_什么是css_css样式的引入方式_样式表的优先级_样式选择器
本文详细介绍了CSS(层叠样式表)的基本概念、语法规则、引入方式、样式表的优先级和样式选择器。文章解释了CSS的作用,展示了如何在HTML中通过行内样式、内部样式和外部样式引入CSS,讨论了不同CSS选择器的优先级和如何确定最终的样式应用。此外,还强调了使用`!important`规则时的优先级高于行内样式。
156 1
|
3月前
|
前端开发
CSS常见的选择器
CSS常见的选择器
30 0
|
4月前
|
前端开发 JavaScript
【CSS】选择器
【CSS】选择器
|
5月前
|
前端开发
CSS3选择器
【8月更文挑战第23天】CSS3选择器。
42 1
|
5月前
|
前端开发
CSS中的层级选择器&伪类选择器和伪元素选择器
CSS中的层级选择器&伪类选择器和伪元素选择器

热门文章

最新文章