相邻后一个兄弟选择器

理解css相邻兄弟选择器

今天在菜鸟教程看到了css组合选择符的“相邻兄弟选择器”,刚开始对这个概念有些不太理解,通过查阅资料并且经过一些试验总算有了些头绪. 原文解释是“相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素.如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector).” 这里面有2个关键信息:(1)紧接在另一元素后:(2)二者有相同父元素例子①: <!DOCT

04.CSS选择器-->相邻、通用兄弟选择器

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /*相邻兄弟选择器*/ /*h1 + p{ color: red; }*/ /*通用兄弟选择器*/ h1 ~ p{ color: red; } </style> <title>相邻兄弟选择器,通用兄弟选择器</title> <

web CSS的知识- 关于后代选择器，子选择器，兄弟选择器的使用

1. 后代选择器官方解释:后代选择器可以选择作为某元素后代的元素.理解:选择某一标签的后代中,所有的此标签标记例:ul em {color:red;}就是选择,h1标签后代中中,所有的em.代码如下:如果选择器写作 ul em,这个语法就会选择从 ul 元素继承的所有 em 元素,而不论 em 的嵌套层次多深.红色标签就是受影响的标签 <ul> <li>List item 1 <ol> <li>List item 1-1</li> <li&

CSS 相邻兄弟选择器

相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素. 选择相邻兄弟如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector). 例如,如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写: h1 + p {margin-top:50px;} 这个选择器读作:“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”. 亲自试一

CSS相邻兄弟选择器

相邻兄弟选择器定义:选择紧接在另一个元素后的元素,而且两者有着相同的父元素. 代码一:<body> <h1>This is a heading.</h1> <p>This is paragraph.</p> <p>This is paragraph.</p> <p>This is paragraph.</p> <p>This is paragraph.</p> <p&g

CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h1开始里面包含的所有的em元素变成红色,h1为祖先,其他的em都是后代,即选中后代,不管是儿子还是孙子,只要是都会被选中,为后代选择器.例如 <html> <head> <style type="text/css"> ul em {color:red;

前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h1开始里面包含的所有的em元素变成红色,h1为祖先,其他的em都是后代,即选中后代,不管是儿子还是孙子,只要是都会被选中,为后代选择器.例如 <html> <head> <style type="text/css"> ul em {color:red;

CSS系列之后代选择器、子选择器和相邻兄弟选择器

后代选择器比子选择器的范围大,包含子选择器,且包含子选择器的“子孙”选择器,后代选择器使用"空格"符号间隔选择器子选择器:子选择器只是父选择器的一级子元素,使用">"符号链接选择器相邻兄弟选择器,是拥有相同父元素,且两个元素相邻,使用"+"符号链接 1. 后代选择器比如如下html代码,em是h1的后代元素,如下css样式这样写,只会影响h1中的em标签的内容变为红色,不会影响p中em的内容 css: h1 em {color:red

CSS后代选择器,子选择器和相邻兄弟选择器

平时在代码练习中,经常用到后代选择器,子选择器也会用到,这里做个总结: 1,后代选择器和子选择器区别: ①写法不一样:后代选择器的标识为:空格如:ul li{width:150px;} [ul和li之间用空格隔开]子选择器的标识为:> 如:ul>li{width:150px;}[ul和li之间用>隔开]相邻兄弟选择器的标识为:+ 如:h1 + p {margin-top:50px;}［h1和p之间用+隔开］ ②功能不一样:后代选择器(descendant selector),又称为包含

jQuery中的层级选择器（四、二）：后代元素、子元素、相邻元素、兄弟元素

<!DOCTYPE html> <html> <head> <title>层次选择器</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/jquery-1.11.3.js"&

css选择器兄弟选择器相邻兄弟选择器子元素选择器

1.兄弟选择器: ~ 该选择器会选择当前元素之后的所有相邻指定元素(具有相同父元素的兄弟元素): .p ~ li{ color: blue; } <div> <p class="p">我是p元素</p> <strong>我是strong元素</strong> <li>我是li元素</li> /*li元素被选中*/ </div> 2.相邻兄弟选择器: + 该选择器会选择当前元素相邻的第一个兄弟

HTML连载20-并集选择器&兄弟选择器

一.并集选择器 1.作用:给所有的选择器选中的标签设置属性. 2.格式: 选择器1,选择器2{ 属性:值: } 3.例如: .abc1,#abc2{ color:red; } .......省略代码....... <p class="abc1">并集1</p> <p id="abc2">并集2</p> 4.注:支持多个标签取并集,中间用逗号连接就行.上一节中交集选择器也可以取多个交集二.兄弟选择器 1.相邻兄弟选择器

使用CSS兄弟选择器完成复杂垂直边距（vertical margins）的设计

-------------------sibling选择器如何在完成复杂设计要求的同时,保持CSS可读这是web前端开发过程中开始简单逐步变的复杂的例子之一:将一篇文章中的所有元素应用垂直边距(vertical margins),例如由复杂markdown编译来的博客文章. 大多数情况下,你必须要处理很多例外和相关,比如:标题和图片上下通常需要更多空白,但是如果两个图片上下挨着,那两图间空白就改变少.h2标签和h3标签直接的距离要比两个h2之间要小. 当原作者几年前刚开始做前端的时候,所有这些

CSS选择器之兄弟选择器（~和+）

今天在改以以前人家写的网页的样式的时候,碰到这个选择器,‘~’,当时我是懵逼的,傻傻分不清 ‘+’ 跟 ‘~’的区别,虽然我知道他们都是兄弟选择器. 后来网上查了下,也许是我查找的方式不对,没有找到我想要的答案,于是私下拿这两个选择器来测试了一下.发现原来是这样的. 先来代码说话: (1).‘~’选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

css兄弟选择器，+ ~选择器的区别

壹 ❀ 引实习生在写搜索框下拉提示时,遇到了不知道怎么解决的问题,所以来问我.效果不难,鼠标选中输入框(focus)时,展示搜索关键字相关提示,看了眼dom结构是这样的: 在她的理解里面,选中父元素可以操控子元素样式,而此时输入框和下拉框是兄弟关系,所以难住了,听到这里我不假思索说了句,用兄弟选择器. 贰 ❀ 兄弟选择器 1.相邻兄弟选择器+ +表示相邻兄弟选择器,例如h3+p表示选中每个h1之后同级(相同父级)且紧接其后的第一个p元素:我们来看看效果: h3+p{ background:

兄弟选择器 E + F

兄弟选择器在IE7下支持会有bug,特记于此如果兄弟选择器有Html注释,兄弟选择器在IE7下会失效代码如下 E + Fp + p{color:red} <p class="test1">some message 01</p> <p class="test2">some message 02</p> <p class="test3">some message 03</p>

H5C3--属性选择器、兄弟选择器、伪类选择器

属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .red{ color: red; } .green{ color: green; } .blue{ color: blue; } /*属性选择器的使用*/ /*需求:获取所有拥有class

获取第上一个兄弟元素屏蔽浏览器的差异（PreviousElementSibling）

//获取element上一个兄弟元素 function getPreviousElementSibling(element){ //能力检测判断是否支持PreviousElementSibling if(element.previousElementSibling){ return element.previousElementSibling; }else{ //获取上一个兄弟节点 var node = element.previousSibling; //如果没有上一个节点,此时null w

获取第下一个兄弟元素屏蔽浏览器的差异（nextElementsibling）

//获取element下一个兄弟元素 function getNextElementSibling(element){ //能力检测判断是否支持nextElementSibling if(element.nextElementSibling){ return element.nextElementSibling; }else{ //获取下一个兄弟节点 var node = element.nextSibling; //如果没有下一个节点,此时null while(node && node

用Django做一个省份选择器

做一个省份选择器使用django做后端, mysql数据库, jQuery 列出结构主要的文件, 其它配置比较简单 models.py 因为所有数据的结构基本一致, 把所有省份, 市和区全部存储一张表, 实现表的自连接 from django.db import models class Pro(models.Model): name = models.CharField(max_length=200) parent = models.ForeignKey('self', null=True,

相邻后一个兄弟选择器

热门专题