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

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

    博客分类：
  • CSS
XHTMLCSSHTML 
阅读更多 
<!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
分享到：
| eclipse
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    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...

    Jquery选择器大全

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

    python爬虫之css选择器

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

    JSoup CSS选择器用法大全

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

    第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 ...

Magicbox
Global site tag (gtag.js) - Google Analytics