`
darrenzhu
  • 浏览: 802572 次
  • 性别: 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网页制作:伪元素选择器.pptx

    伪元素选择器不是实际的HTML元素,而是用于添加或修改页面内容的虚拟元素。它们允许我们向元素内容的前后插入额外的文本、图像或其他内容。CSS3 中的 `:before` 和 `:after` 伪元素选择器提供了这样的功能。 1. `:...

    css的选择器

    本文介绍了CSS中多种类型的选择器,包括类与ID选择器、元素选择器、属性选择器、伪类和伪元素等。通过这些选择器,我们可以精确控制页面的布局和样式,实现复杂的设计效果。掌握这些选择器是成为优秀前端开发人员的...

    CSS选择器.pdf

    接下来是关系选择符,包括后代选择器、直接子元素选择器、相邻选择器、兄弟选择器和并列选择器。后代选择器(EF)用于选中某个元素(E)内部的所有指定元素(F),不论层级深浅。直接子元素选择器(E>F)则只选中...

    前端必须掌握的css选择器方法

    通用元素选择器*是选择页面上的全部元素,上面的代码作用是把全部元素的 margin 和 padding 设为 0,最基本的清除默认 CSS 样式。*选择器也可以应用到子选择器中,例如下面的代码: #container * { border: 1px ...

    CSS基础2-选择器进阶+背景属性+元素显示模式+三大特性

    CSS基础-选择器进阶+背景属性+元素显示模式+三大特性 CSS基础选择器进阶: 在CSS中,选择器是用于选择HTML元素并应用样式的核心机制。选择器进阶是指在基础选择器的基础上,进一步学习和应用选择器的高级规则和...

    使用HTML开发商业网站-伪元素选择器课件.pptx

    伪元素选择器允许我们在不改变HTML源代码的情况下,向页面添加额外的视觉元素,比如在特定元素前后插入内容。 伪元素选择器主要有两种:`:before` 和 `:after`。这两个选择器都是用于创建元素的“虚拟”子元素,...

    第39章 UI元素状态伪类选择器

    在本章中,我们将深入探讨UI元素状态伪类选择器这一关键CSS概念,它是构建响应式和交互式用户界面的核心工具。伪类选择器允许我们根据元素的不同状态来应用特定的样式,使得网页的视觉反馈更加直观和动态。 首先,...

    CSS伪元素选择器案例.pdf

    在上述的“CSS伪元素选择器案例”中,主要介绍了两个关键的伪元素选择器:`::before` 和 `::after`。下面将详细解释这两个选择器的用途以及它们在实际应用中的工作原理。 1. `::before` 选择器: `::before` 选择器...

    jQuery选择器全解.

    选择器按功能分为基础选择器、层次选择器、属性选择器、表单选择器、可见性选择器、位置选择器、子元素选择器、内容选择器、属性选择器、表单对象属性选择器以及过滤选择器。每类选择器都有其独特的应用场景,熟悉并...

    JSoup CSS选择器用法大全

    CSS 选择器是用于选取 HTML 或 XML 文档中元素的语法,它们在网页爬虫、页面解析以及动态网页内容的提取中扮演着重要角色。下面将详细介绍 JSoup 支持的各种 CSS 选择器及其用法。 1. **基本选择器**: - `*`: ...

    JQuery选择器测试 离线版

    在jQuery中,选择器分为多种类型,包括基础选择器、类别选择器、ID选择器、属性选择器、后代选择器、子元素选择器、相邻兄弟选择器和通用选择器等。 1. **基础选择器**:主要包括`$()`,用于选取一个或多个DOM元素...

    简单的选择器Demo

    4. 直接子元素选择器:使用`>`连接,如`div > p`选择`div`的直接子元素`p`。 四、属性选择器 属性选择器根据元素的属性来选取元素。例如,`input[type="text"]`会选择所有type属性等于"text"的`input`元素。 五、...

    jQuery选择器速查表

    - **元素选择器**:通过元素的标签名来选取,直接写标签名。例如`$('p')`选取所有的`<p>`元素。 - **通配符选择器**:用`*`来选取所有元素。例如`$('*')`选取页面上的所有元素。 组合选择器可以同时选取多个元素,...

    jquery 选择器 大全

    - `element`:元素选择器,如`$("p")`选取所有段落。 - `.class`:类选择器,如`$(".myClass")`选取具有特定类名的元素。 - `*`:通配符选择器,选取所有元素。 - `selector1, selector2, selectorN`:组合选择...

    Jquery选择器大全

    - **元素选择器**:直接使用元素名来选取页面上所有的该元素。 - 示例:`$("div")` 选取页面上所有的 `<div>` 元素。 - **通配符选择器**:使用 `*` 来选取页面上的所有元素。 - 示例:`$("*")` 选取页面上的所有...

    第03课:CSS基本样式和元素选择器_javascript_Body_

    1. 元素选择器:这是最基础的选择器类型,直接使用元素名来选择页面上的所有该元素。例如,`p {color: red;}` 将使页面上所有的段落文字变为红色。 2. 类选择器:通过在HTML元素的class属性中定义类名,然后在CSS中...

    jQuery选择器全集详解

    层次选择器包括直系子元素选择器、下一个兄弟元素选择器和之后的所有兄弟元素选择器。直系子元素选择器`>`用于选取某个元素的直接子元素,如`$('div>span')`会选中所有`<div>`标签内的`<span>`子元素。下一个兄弟...

    JQ 层次选择器

    2. **子元素选择器(Child Selector)** - 使用`>`符号连接两个选择器,表示前一个选择器的直接子元素。例如,`ul > li`会选取所有`ul`元素下的直接`li`子元素,而非孙子或曾孙元素。 3. **相邻兄弟选择器...

    CSS3选择器教辅.pdf

    - 多元素选择器(element,element):可以同时选择多个指定类型的元素。例如,“div,p”将同时选择所有的和元素。 3. 后代选择器(elementelement): - 用于选择元素内部的元素。例如,“divp”会选择所有位于...

    css+jquery选择器大全

    1. 元素选择器(Type selector):直接通过元素名来选择,如`p`选择所有`<p>`元素。 2. 类选择器(Class selector):通过类名来选择,如`.intro`选择所有class属性为"intro"的元素。 3. ID选择器(ID selector):...

Global site tag (gtag.js) - Google Analytics