`
zhangyaochun
  • 浏览: 2613772 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

css相邻兄弟选择器

css选择器相邻兄弟选择器 
阅读更多

 

CSS 相邻兄弟选择器

 

     --------------可选择紧接在另一元素后的元素，且两者有相同的父元素。

 

 

 

/*选择紧接在h1元素后出现的段落
h1和p有共同的父元素
*/
h1 + p{margin-top:2px;}

 

 注释：

 

 

  •   相邻兄弟选择器使用了加号（+），即相邻兄弟结合符
  •   相邻兄弟结合符旁边可以有空白符   

 

扩展阅读：

 

1、http://www.w3school.com.cn/tiy/t.asp?f=csse_selector_adjacent_sibling  w3school的在线例子

分享到：
| 浅谈本地存储之localStorage
评论
发表评论

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

相关推荐

    CSS的相邻兄弟选择器用法简单讲解

    此外，CSS相邻兄弟选择器不仅限于`<li>`元素。任何有相同父元素的相邻HTML元素都可以使用这个选择器，比如段落`<p>`标签。以下是使用相邻兄弟选择器对段落元素进行样式的例子： ```html <style type="text/css">...

    CSS选择器.pdf

    相邻选择器（E+F）选中紧接在指定元素（E）后的第一个匹配元素（F），而兄弟选择器（E~F）选中所有位于指定元素（E）后面的兄弟元素（F），这要求两者具有相同的父元素，但不一定要相邻。 属性选择符是基于HTML元素...

    CSS层叠样式表技术参考手册

    - **5.8 CSS相邻兄弟选择器** - **相邻兄弟选择器**：解释如何选择紧邻某个元素之后的兄弟元素。 - **示例展示**：通过实例代码展示相邻兄弟选择器的使用方法。 - **5.9 CSS伪类(Pseudo-classes)** - **伪类定义*...

    JSoup CSS选择器用法大全

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

    30个最常用css选择器解析

    相邻选择器的优点是可以选取特定的元素，但缺点是只能选取第一个元素。 8. 子选择器（X>Y） 子选择器用于选取X元素下的直接子元素Y。例如：`div#container > ul { border: 1px solid black; }`，这将将div元素下的...

    css+jquery选择器大全

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

    前端css选择器练习diner.zip

    5. **选择器的优先级**：理解选择器的权重是至关重要的，ID选择器权重最高（100），接着是类（10），标签（1），以及属性和伪类（1），通用选择器、子元素、相邻兄弟和后续兄弟选择器权重为0。内联样式（如`style="....

    CSS3选择器教辅.pdf

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

    bootstrap响应式布局

    1. CSS 相邻兄弟选择器 + 相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。 相邻兄弟选择器使用了加号（+），即相邻兄弟结合符（Adjacent sibling combinator）...

    CSS3选择器.rar

    5. 相邻兄弟选择器： - `A + B`：选择紧跟在A元素后面的同级B元素。 6. 通用兄弟选择器： - `A ~ B`：选择紧跟在A元素后面的所有同级B元素。 7. 伪类和伪元素： - `:hover`、`:active`、`:focus`：分别用于在...

    很不错的CSS练手文件代码，应用多种选择器

    - **相邻兄弟选择器**：使用`+`，如`div + p`，选择紧跟在`div`后面的`p`元素。 - **后续兄弟选择器**：使用`~`，如`div ~ p`，选择`div`后面的所有同级`p`元素。 3. 属性选择器： - `[attr]`：选择具有指定属性...

    CSS组合选择器.pdf

    组合选择器共有四种：后代选择器、子元素选择器、相邻兄弟选择器和普通兄弟选择器。 后代选择器（Descendant Selector） ------------------------- 后代选择器的语法格式为：E 空格 F，它选择 E 元素内部的所有...

    一种可视化的方式来分析选择器在CSS中的特殊性

    4. **通用选择器、子选择器、相邻兄弟选择器等**（*, >, +, ~）：这些选择器不赋予特殊性值。 在计算特殊性时，先比较相同级别的值，然后逐级向上比较。如果所有级别都相同，则根据样式表的顺序（最后定义的优先）...

    python爬虫之css选择器

    - **相邻兄弟选择器**：`element + element` 示例：`div + p` 描述：选择所有紧接在`<div>`后的`<p>`元素。 ##### 4. 属性选择器 - **属性存在选择器**：`[attribute]` 示例：`[target]` 描述：选择所有...

    scrapy爬虫之CSS选择器(比前面两个更全)

    - `element + element`：相邻兄弟选择器，选取紧接在另一个元素之后的元素。 - `element ~ element`：通用兄弟选择器，选取所有后面的兄弟元素。 Scrapy的`css()`方法返回的是一个可迭代的`SelectorList`对象，你...

    头歌教学实践平台 Web前端开发基础 CSS-基础选择器

    相邻兄弟选择器使用加号（`+`）连接两个选择器，表示第一个选择器后面紧跟的同级元素。例如： ```css h1 + p { margin-top: 20px; } ``` 这将在每个`<h1>`后添加20像素的上外边距给紧跟的`<p>`元素。 八、后续兄弟...

    CSS的选择器内容文档

    **派生选择器**是一组更高级的选择器，包括后代选择器、子元素选择器、相邻兄弟选择器等。 #### 1. 后代选择器 后代选择器可以匹配一个元素的后代元素。它使用空格来分隔选择器，表示匹配作为第一个选择器的后代的...

    jQuery 遍历css选择器

    2. `+`：相邻兄弟选择器，选取紧跟在另一个元素之后的同级元素，例如`$("element1 + element2")`。 3. `~`：后续兄弟选择器，选取所有在另一个元素之后的同级元素，例如`$("element1 ~ element2")`。 **四、属性...

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