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

第2章 选择器 =>选择相邻兄弟元素P56

    博客分类：
  • 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">
ol + ul {
	font-size:24px;
}
li {
	font-family:Verdana, Geneva, sans-serif;
}
/* 设置兄弟元素的第二个元素起 */
li + li {
	font-weight:bold;
}
/* 设置兄弟元素的第三个元素起 */
li + li + li {
	color:#F00;
}
</style>
</head>

<body>
<div>
	<ol>	
    	<li>List item 1</li>
        <li>List item 1</li>
        <li>List item 1</li>
    </ol>
    <ul>	
    	<li>A list item</li>
        <li>Another list item</li>
        <li>Yet another list item</li>
    </ul>
</div>
</body>
</html>

 树结构如下图：

在这个片段中，div元素中包含两个列表，一个是有序列表，另一个是无序列表，每个列表都包含三个列表项。这两个列表是相邻兄弟，列表项本身也是相邻兄弟。不过第一个列表（ol）中的列表项不是第二个列表（ul）中列表项的兄弟，因为这两组列表项的父元素不同。


显示效果如下图：

 

 

 

 

  • 大小: 2.5 KB
  • 大小: 5.2 KB
分享到：
| DWR调用session
评论
发表评论

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

相关推荐

    css的选择器

    - **相邻兄弟选择器**：使用`+`来选择紧跟在另一元素后的元素。 - **例子**： - `div + p`：选择紧跟在`&lt;div&gt;`元素后面的`&lt;p&gt;`元素。 - **一般兄弟选择器**：使用`~`来选择紧跟在另一元素后的一系列同级元素。 - ...

    CSS选择器.txt

    2. **相邻兄弟选择器**：`li + li`。选择紧接在另一个`&lt;li&gt;`元素后的`&lt;li&gt;`元素。 3. **一般同胞选择器**：`div ~ p`。选择所有位于`&lt;div&gt;`之后的`&lt;p&gt;`元素。 4. **首行选择器**：`p:first-line`。选择每个`&lt;p&gt;`元素...

    python爬虫之css选择器

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

    第13章 CSS选择器[下]

    相邻兄弟选择器（+）选择紧跟在另一个元素之后的同级元素。例如，`h2 + p`会选择紧跟在`h2`元素后的第一个`p`元素。 八、后续兄弟选择器 后续兄弟选择器（~）选择所有紧跟在另一个元素之后的同级元素。`div ~ p`会...

    CSS3选择器教辅.pdf

    5. 相邻兄弟选择器（element+element）： - 选择紧接在另一个元素之后的元素。例如，“div+p”会选择所有紧接着&lt;div&gt;之后的&lt;p&gt;元素。 6. 属性选择器： - 简单属性选择器（[attribute]）：选择带有指定属性的所有...

    Jquery 选择器

    jQuery 提供了与 CSS 相似的基本选择器，如 ID 选择器（`#id`）、类选择器（`.class`）、元素选择器（`element`）和通配符选择器（`*`）。例如： ```javascript $("#myID"); // 选择 ID 为 "myID" 的元素 $("....

    JQuery选择器测试 离线版

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

    第03章 常规选择器（3）

    相邻兄弟选择器（或加号选择器）使用 `+` 符号，它选择紧接在另一个元素之后的同级元素。例如，`h1 + p` 会选择紧跟在 `h1` 元素后的第一个 `p` 元素，这在布局中用于关联相关元素。 七、后续兄弟选择器 后续兄弟...

    第03章 常规选择器（4）

    - **相邻兄弟选择器**（`+`符号）：`h1 + p`会选择紧跟在`h1`元素后面的`p`元素。 - **后续兄弟选择器**（`~`符号）：`div ~ p`会选择所有在`div`元素之后的`p`元素。 此外，可能还会涉及层次选择器的优先级问题，...

    JSoup CSS选择器用法大全

    - `E + F`: 选择器 `E` 后面紧跟一个选择器 `F` 的元素，即同级相邻元素。 - `E ~ F`: 选择器 `E` 后面跟着一个或多个选择器 `F` 的元素，但不是紧邻的同级元素。 在爬虫开发中，利用这些 CSS 选择器，可以精准地...

    第四章 CSS选择器.docx

    3. **后代选择器**：使用空格分隔两个选择器，表示选择第一个选择器内的任何层次的第二个选择器元素。例如： ```css ul li { list-style-type: none; } ``` 这将移除所有`&lt;ul&gt;`下的`&lt;li&gt;`元素的列表样式。 4....

    第03章 常规选择器（1）

    相邻兄弟选择器使用`+`符号，选取紧跟在A元素后面的同级元素B。例如，`h1 + p`会选择所有紧跟在`h1`元素后的`p`元素，但不包括其他位置的`p`。 七、通用选择器与伪类 通用选择器`*`选取文档中的所有元素。而伪类如`...

    jQuery选择器速查表

    - **兄弟选择器**：通过`~`来选取所有后续的兄弟元素，例如`$('.one ~ div')`选取class为`one`的元素后的所有`&lt;div&gt;`兄弟元素。 #### 三、过滤选择器 过滤选择器通过特定的规则筛选DOM元素。过滤规则类似于CSS伪类...

    css+jquery选择器大全

    5. 层次选择器：包括子元素选择器（`&gt;`）、相邻兄弟选择器（`+`）和通用兄弟选择器（`~`）。 二、CSS属性选择器 1. 属性存在选择器：如`[target]`选择所有具有target属性的元素。 2. 属性值选择器：如`[target="_...

    jQuery基础选择器练习题

    3. **相邻兄弟选择器**: 使用`+`符号，如`$("div + p")`选取紧跟在`&lt;div&gt;`后面的那个`&lt;p&gt;`元素。 4. **通用兄弟选择器**: 使用`~`符号，如`$("div ~ p")`选取`&lt;div&gt;`之后的所有同级`&lt;p&gt;`元素。 jQuery还提供了层级...

    jsoup 选择器（一）常规选择器

    相邻兄弟选择器选取紧跟在`element`后面的第一个`adjacent`元素。例如，选取所有`&lt;h2&gt;`后的第一个`&lt;p&gt;`元素： ```java Elements h2NextPs = doc.select("h2 + p"); ``` ### 7. 通用选择器 `*` 通用选择器选取文档中...

    Jquery选择器大全

    - **相邻兄弟选择器**：使用 `+` 符号来选取紧跟在另一个元素后的元素。 - 示例：`$("label + input")` 选取紧跟在 `&lt;label&gt;` 后面的 `&lt;input&gt;` 元素。 - **通用兄弟选择器**：使用 `~` 符号来选取共享同一个父...

    第03章 常规选择器 （2）

    相邻兄弟选择器（相邻 sibling selector）使用加号（+）连接两个选择器，例如 `h1 + p`。它会选取紧跟在 `h1` 元素后面的 `p` 元素，使得我们可以在元素序列中精确地控制相邻元素的样式。 通用选择器（*）匹配任何...

    jquery 选择器 大全

    - `prev + next`：相邻兄弟选择器，如`$("div + p")`选取紧跟在div后面的第一个段落。 - `prev ~ siblings`：同级元素选择器，如`$("div ~ p")`选取所有跟div在同一级别的p元素。 3. **过滤器选择器**： - `:...

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