`
conkeyn
  • 浏览: 1529294 次
  • 性别: Icon_minigender_1
  • 来自: 厦门
社区版块
存档分类
最新评论

第2章 选择器 =>选择子元素 P54

    博客分类:
  • CSS
阅读更多
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选择子元素</title>
<style type="text/css">
h1 > strong {
	color:red;
}
</style>
</head>

<body>
<p>在某些情况下,可能并不相选择一个任意的后代元素,而是希望缩小范围,只选择另一个元素的子元素。例如,可能想选择只作为一个h1元素的子元素(而不是后代元素)的strong元素。为此可以使用子结合符,即大于号(&gt;)</p>
<p>h1 &gt; strong {color:red;}</p>
<h1>This is <strong>very</strong> important.</h1>
<h1>This is <strong>very</strong> important</h1>
<h1>This is <em>really <strong>very</strong> important</em></h1>
<p>选择器h1 &gt; strong 可以解释为“选择作为h1元素的子元素的所有strong元素”。子结合符两边可以有空白符,这是可选的,因此h1 &gt; strong 、h1&gt; strong和h1&gt;strong都是一样的。</p>
</body>
</html>

 

显示效果:

 

详细说明:

例如,a元素是strong元素的父元素,但是它又是p元素的子元素。可以用p > a和a > strong选择器来匹配这个片段中的元素,但是p > strong不行,因为strong是p的后代而不是其子元素。


还可以在同一个选择器中结合使用后代选择器和子选择器。因此,table.summay td > p 会选择作为一个td元素子元素的所有p元素,这个td元素本身从table元素继承,该table元素有一个包含summary的class属性

  • 大小: 6 KB
  • 大小: 1 KB
分享到:
评论

相关推荐

    css的选择器

    - **直接子元素选择器**:使用`&gt;`来选择作为另一个元素直接子元素的元素。 - **例子**: - `div &gt; p`:选择直接位于`&lt;div&gt;`元素内的`&lt;p&gt;`元素。 - **相邻兄弟选择器**:使用`+`来选择紧跟在另一元素后的元素。 - ...

    JQ 子元素过滤选择器

    例如,`$("div.parent &gt; p:first")`会选取所有`&lt;div class="parent"&gt;`下的第一个`&lt;p&gt;`子元素。 通过熟练掌握这些JQ子元素过滤选择器,开发者可以编写出更加高效和可维护的代码。同时,配合jQuery提供的其他方法,如...

    CSS选择器.txt

    1. **子元素选择器**:`div &gt; p`。选择作为`&lt;div&gt;`的直接子元素的所有`&lt;p&gt;`元素。 2. **相邻兄弟选择器**:`li + li`。选择紧接在另一个`&lt;li&gt;`元素后的`&lt;li&gt;`元素。 3. **一般同胞选择器**:`div ~ p`。选择所有位于...

    css后代选择器和子选择器的区别介绍

    第二,从兼容性角度来看,子选择器在IE6浏览器中不被支持。这意味着在使用子选择器时,如果需要兼容IE6,可能需要考虑其他选择器的写法,或者使用其他CSS技术替代。而后代选择器是CSS2标准中的一部分,IE6以及之后的...

    CSS3选择器教辅.pdf

    - 这些选择器允许选择父元素的特定子元素或特定类型的子元素,如选择父元素的第一个、最后一个、第n个子元素或特定类型子元素。 9. 其他选择器: - :root、:empty、:target、:enabled、:disabled、:checked、:not...

    CSS子元素选择器使用介绍

    当子结合符被放置在两个CSS选择器之间时,它表示仅选择第一个选择器指定元素的直接子元素,而这些子元素必须匹配第二个选择器指定的元素。例如,如果我们有一个HTML结构如下: ```html &lt;div class="container"&gt; &lt;p...

    JSoup CSS选择器用法大全

    - `E &gt; F`: 选择器 `E` 直接包含选择器 `F` 的所有元素,即子元素。 - `E + F`: 选择器 `E` 后面紧跟一个选择器 `F` 的元素,即同级相邻元素。 - `E ~ F`: 选择器 `E` 后面跟着一个或多个选择器 `F` 的元素,但...

    Jquery选择器大全

    - **子元素选择器**:使用 `&gt;` 符号来选取指定父元素的直接子元素。 - 示例:`$("#main &gt; *")` 选取 id 为 "main" 的元素的所有直接子元素。 - **相邻兄弟选择器**:使用 `+` 符号来选取紧跟在另一个元素后的元素...

    python爬虫之css选择器

    描述:选择每个`&lt;p&gt;`元素为其父元素的第二个子元素、最后一个子元素、第n个子元素等。 ##### 7. 其他选择器 - **否定选择器**:`:not(selector)` 示例:`:not(p)` 描述:选择不是`&lt;p&gt;`元素的所有其他元素。 - ...

    第13章 CSS选择器[下]

    子元素选择器(&gt;`分隔)只选择元素的直接子元素。例如,`ul &gt; li`会选择`ul`下的所有直接`li`子元素,而不是所有后代`li`。 七、相邻兄弟选择器 相邻兄弟选择器(+)选择紧跟在另一个元素之后的同级元素。例如,`h2...

    详解如何使用CSS选择所有子元素

    示例2中,我们使用`.demo&gt;*`选择器,这个选择器会将类名为`demo`的`div`下的所有直接子元素的背景颜色都设置为绿色,不论这些子元素是`&lt;p&gt;`、`&lt;span&gt;`还是`&lt;div&gt;`。 这些选择器是CSS中非常基础且强大的工具,它们...

    第四章 CSS选择器.docx

    4. **子元素选择器**:使用`&gt;`连接两个选择器,选择第一个选择器的直接子元素。例如: ```css div &gt; p { color: blue; } ``` 这将使所有`&lt;div&gt;`直接包含的`&lt;p&gt;`标签文字颜色设为蓝色。 5. **相邻兄弟选择器**...

    jquery 元素选择器使用方法技巧

    - **子元素选择器**:`$('parent &gt; .child')` 选取 `parent` 下所有类名为 `.child` 的子元素。 - **相邻同胞选择器**:`$('.sibling + .next')` 选取紧接在 `.sibling` 元素之后的 `.next` 元素。 - **一般同胞...

    第03章 常规选择器(4)

    - **子选择器**(&gt;``符号):`ul &gt; li`会选择`ul`元素的直接子元素`li`。 - **相邻兄弟选择器**(`+`符号):`h1 + p`会选择紧跟在`h1`元素后面的`p`元素。 - **后续兄弟选择器**(`~`符号):`div ~ p`会选择所有在...

    jsoup 选择器(一)常规选择器

    子元素选择器 `parent &gt; child` 子元素选择器选取`parent`元素的直接子元素`child`。例如,选取所有`&lt;ul&gt;`下的直接`&lt;li&gt;`元素: ```java Elements directLi = doc.select("ul &gt; li"); ``` ### 6. 相邻兄弟选择器 `...

    第03章 常规选择器(3)

    子元素选择器(或大于号选择器)用 `&gt;` 符号表示,它只选择指定元素的直接子元素。比如,`ul &gt; li` 会选择所有直接在 `ul` 元素之下的 `li` 元素,但不会选取间接的后代 `li`。 六、相邻兄弟选择器 相邻兄弟选择器...

    jQuery基础选择器练习题

    2. **子元素选择器**: 使用`&gt;`符号,如`$("div &gt; p")`选取`&lt;div&gt;`的直接子元素`&lt;p&gt;`。 3. **相邻兄弟选择器**: 使用`+`符号,如`$("div + p")`选取紧跟在`&lt;div&gt;`后面的那个`&lt;p&gt;`元素。 4. **通用兄弟选择器**: 使用`...

    jQuery选择器大全(48个代码片段 21幅图演示)

    - `:has(selector)`:选择包含匹配指定选择器的子元素的元素。 7. **表单选择器** - `:input`:选择所有表单元素,如`$("input, textarea, select, button")`。 - `:checkbox`,`:radio`,`:file`,`:password`...

    第03章 常规选择器(1)

    子元素选择器使用`&gt;`符号,它只选取A元素的直接子元素B。与后代选择器不同,它不包括A的任何间接子元素。例如,`ul &gt; li`会选取所有直接在`ul`元素下的`li`元素,而不会选取`ul`的孙元素`li`。 六、相邻兄弟选择器 ...

    CSS3选择器

    * 子元素选择器(E &gt; F):匹配所有 E 元素的子元素 F * 毗邻元素选择器(E + F):匹配所有紧随 E 元素之后的同级元素 F 实例: div p { color:#f00; } /* 后代元素选择器 */ #nav li { display:inline; } /* ID ...

Global site tag (gtag.js) - Google Analytics