`
darrenzhu
  • 浏览: 784237 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

页面元素选择器

阅读更多
var simple = '.foo'; // Only asking for the class name on the element
var simple = 'div.bar'; // Only asking for the tag/class name on the element
除了下面的Element/Attribute/Pseudo/CSS value选择器外,上面的基本选择器也值得注意,其中div.bar是由两个选择器合成,一是tag选择器div,另一个是class选择器".bar",只需注意".bar"是class选择器, bar不是一个选择器.


Element Selectors:
* any element
E an element with the tag E
E F All descendent elements of E that have the tag F
E > F or E/F all direct children elements of E that have the tag F
E + F all elements with the tag F that are immediately preceded by an element with the tag E
E ~ F all elements with the tag F that are preceded by a sibling element with the tag E

Attribute Selectors:
The use of @ and quotes are optional. For example, div[@foo='bar'] is also a valid attribute selector.

E[foo] has an attribute "foo"
E[foo=bar] has an attribute "foo" that equals "bar"
E[foo^=bar] has an attribute "foo" that starts with "bar"
E[foo$=bar] has an attribute "foo" that ends with "bar"
E[foo*=bar] has an attribute "foo" that contains the substring "bar"
E[foo%=2] has an attribute "foo" that is evenly divisible by 2
E[foo!=bar] attribute "foo" does not equal "bar"

Pseudo Classes:
E:first-child E is the first child of its parent
E:last-child E is the last child of its parent
E:nth-child(_n_) E is the _n_th child of its parent (1 based as per the spec)
E:nth-child(odd) E is an odd child of its parent
E:nth-child(even) E is an even child of its parent
E:only-child E is the only child of its parent
E:checked E is an element that is has a checked attribute that is true (e.g. a radio or checkbox)
E:first the first E in the resultset
E:last the last E in the resultset
E:nth(_n_) the _n_th E in the resultset (1 based)
E:odd shortcut for :nth-child(odd)
E:even shortcut for :nth-child(even)
E:contains(foo) E's innerHTML contains the substring "foo"
E:nodeValue(foo) E contains a textNode with a nodeValue that equals "foo"
E:not(S) an E element that does not match simple selector S
E:has(S) an E element that has a descendent that matches simple selector S
E:next(S) an E element whose next sibling matches simple selector S
E:prev(S) an E element whose previous sibling matches simple selector S
E:any(S1|S2|S2) an E element which matches any of the simple selectors S1, S2 or S3
E:visible(true) an E element which is deeply visible according to Ext.dom.Element.isVisible

CSS Value Selectors:
E{display=none} css value "display" that equals "none"
E{display^=none} css value "display" that starts with "none"
E{display$=none} css value "display" that ends with "none"
E{display*=none} css value "display" that contains the substring "none"
E{display%=2} css value "display" that is evenly divisible by 2
E{display!=none} css value "display" that does not equal "none"
分享到:
评论

相关推荐

    HTML5&CSS3网页制作:CSS基础选择器.pptx

    标签选择器,选择的是页面上所有这种类型的标签,所以经常描述“共性”,无法描述某一个元素的“个性”。 p{ font-size:14px; } <p>css CSS基础选择器编写 ID选择器:规定用#来定义(名字自定义) 针对某一个...

    Web前端与移动开发之复合选择器 css元素显示模式 背景属性.txt

    (2)子元素选择器(子选择器 重要) 语法 元素1>元素2{样式声明} 元素1和元素2用>隔开 元素1和元素2是父子关系 只选择父元素最近一级的子元素 即必须是亲儿子 选择器1 选择器2可以是任意基础选择器 (3)...

    Jquery表单-层级-内容-属性-子元素选择器知识点整理

    Jquery表单-层级-内容-属性-子元素选择器知识点整理,主要是关于Jquery选择器的知识点整理包括页面属性的选择如$(":empty")等,子元素的选择,层级选择$("parent > child")等

    CSS3样式表-选择器.pptx

    标签选择器,也称为元素选择器,可以为现有的HTML标签指定样式规则。 标签选择器 定义标签选择器的语法格式 使用标签选择器的语法格式 标签选择器名{属性:值;} <标签名>…标签名> 2 标签选择器 2 编写CSS使得表格...

    jQuery选择器上机练习题及答案.rar

    (16)选择dom sample页面中第3个tr元素 (17)选择其type属性值checkbox且索引为偶数的input元素 (18)选择非最后一行的tr元素 (19)选择所有的checkbox元素 (20)选择所有被选中的表单元素 (21)选择含有...

    jQuery层次选择器选择元素使用介绍

    层次选择器: 通过DOM元素间的层次关系获取元素,其主要的层次关系包括后代、父子、相邻、兄弟关系,通过其中基类关系可以方便快捷地定位元素 jQuery选择器详解 根据所获取页面中元素的不同,可以将jQuery选择器分为...

    原生js月份/年月选择器

    织织网应实际使用开发的一个js年月选择器,采用原生js开发,兼容IE、FF(Firefox)、谷歌(Chrome),其他杂牌浏览器都是基于这三种内核的,就不一一测试了。 插件非常的简单,完全开源,可以做二次开发。 因为很...

    第四课 jquery选择元素1

    第四课 jquery 选择元素学习目录元素选择器id 选择器class 选择器属性选择器其他选择器一.元素选择器根据页面中的元素标签名称来选择指定元素。属性选择

    css 元素选择器的简单实例

    本文章向码农介绍css 标签/元素选择器以及其实例,需要的码农可以参考一下。 【标签选择器】 一个完整的HTML页面是有很多不同的标签组成,而标签选择器,则是决定哪些标签采用相应的CSS样式,(在大环境中你可能出于...

    jQuery子选择器与可见性选择器实例分析

    子元素选择器与可见性选择器 子元素选择器是允许利用子元素的位置进行获取的选择器 子内容选择器3种用法 E:first-child 选择所有位于其父元素第一个位置的E元素 E:last-child 选择所有位于其父元素最后一个位置...

    jQuery基本选择器选择元素使用介绍

    基本选择器:是jQuery中使用最频繁的选择器,它由元素Id、Class、元素名、多个选择符组成,通过基本选择器可以实现大多数页面元素的查找 jQuery选择器详解 根据所获取页面中元素的不同,可以将jQuery选择器分为:...

    Web前端与移动开发之基础选择器.txt

    选择器的作用 选择标签 ①标签选择器 标签名 { 属性1: 值;... ④通配符选择器 选取页面中所有元素(标签) * { 属性: 属性值; } 通配符选择器不需要调用 自动给所有元素使用样式

    颜色选择器 - JQUERY插件

    一个简单的组件来选择色彩在你选择的颜色一样 特征 在页面元素平面模式 颜色选择功能强大的控件 容易定制通过改变一些图像的外观 可视选择器颜色变化

    CSS选择器的介绍和使用.pdf

    CSS选择器的介绍和使用,什么是CSS选择器?CSS选择器可以用于我们需要添加的样式的标签。想要在HTMLl页面中的元素实现一对一,一对多或者多对一的控制,就得要使用css选择器,css选择器进控制着HTML页面中的元素。

    使用jQuery内容过滤选择器选择元素实例讲解

    – 内容过滤选择器:根据元素中的文字内容或所包含的子元素特征获取元素,其文字内容可以模糊或绝对匹配进行元素定位 jQuery选择器详解 根据所获取页面中元素的不同,可以将jQuery选择器分为:基本选择器、层次选择...

    EasySelect:爬虫工具:一个Chrome插件,让你根据页面元素快速获取可读可维护的 CSS 选择器。 A chrome extension, let you get readable & maintainable css selector from elements

    EasySelect chrome / firefox扩展名,使您可以从元素中获得可读性和可维护性的CSS选择器。 为什么不使用“复制选择...2.元素选择面板 3.结论面板 发展 npm install npm run serve npm run build npm run analyze 赞助

    jquery 颜色选择器插件

    一款非常好看的颜色选择器,能很好的集成到页面中,包括一些input 等form元素

    Select:Select 会在您需要时立即抓取页面上父元素的所有元素,而不是将单独的 jQuery 选择器展开

    选择Select 是一个库,可以在您需要时立即获取页面上的所有元素,而不是分散单独的 jQuery 选择器。 我还计划添加管道,以便您可以将来自 JSON API 的数据流式传输到您的 DOM 选择中 var element = new Select("p", ...

    该不该使用ID选择器?浅谈对CSS的ID选择器的使用建议

    关于ID选择器和class选择器不同,这里使用#class的值不同标签可以发生重复。但是id不允许!!!id选择器不能结合使用id属性通常和js配合使用 CSS Code复制内容到剪贴板 #label { background-color: red; }  ...

Global site tag (gtag.js) - Google Analytics