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

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的在线例子

分享到:
评论

相关推荐

    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")`。 **四、属性...

Global site tag (gtag.js) - Google Analytics