CSS 相邻选择器(七)

一、相邻选择器

相邻选择器前后部分之间用一个加号（+）隔开，前后两部分选择反符在结构上属于同级关系，如

相邻选择器，是根据左侧选择符指定相邻元素，然后在该相邻元素后面寻找匹配匹配右侧选择符的相信元素

二、简单例子

<!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">
/*选择中id为wrap最下的p标签使用相信选择器*/
#sub_wrap + p{font-size:22px;color:red;}
</style>
</head><body>
<div id="wrap">
<div id="sub_wrap">
<h2 class="news">标题2</h2>
<p class="news">标题2下的段落</p>
<span class="news">标题2下的span</span>
</div>
<p>相邻段落</p>
</div>
</body>
</html>

CSS 相邻选择器(七)相关推荐

[css] 相邻兄弟选择器、后代选择器和子选择器三者有什么区别？
[css] 相邻兄弟选择器.后代选择器和子选择器三者有什么区别? 后代选择器与子选择的关系:后代选择器>子选择器. 后代选择器:包括父元素的子元素以及孙子元素(代表符号:空格)子选择器:包括父元 ...
CSS相邻同胞选择器
相邻同胞选择器(E + F),选择紧跟在某个元素的后面,且具有相同父亲的元素.换句话说,E和F是同辈元素,F紧跟在E元素后面,即它们之间没有其他同胞元素.相邻同胞选择器中,+ 两侧的空白符是可选的. ...
CSS选择器（id选择器，包含选择器，标签名选择器，类选择器，属性选择器，通配符选择器，伪类选择器，相邻选择器，选择器的优先级，子选择器）
CSS选择器 HTML:定义网页元素 CSS:美化网页元素,控制HTML标签展示样式 CSS与HTML相结合,结合方式如下: (1)内联样式:CSS代码复用性太低,书写凌乱,不推荐,缺点就是一次只能控 ...
HTML相玲选择器,CSS 相邻元素选择器
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素. 选择相邻兄弟如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以 ...
html如何追加兄弟元素,CSS 相邻兄弟选择器
CSS 相邻兄弟选择器相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素. 选择相邻兄弟如果需要选择紧接在另一个元素后的元素,而且 ...
css常用选择器：相邻兄弟选择器（+）、子选择器（＞）、兄弟选择器（~）、属性选择器等用法
前言:我们在码代码的时候,经常会遇到需要给第一个或者最后一个元素添加或删除样式,还有一些比较特殊的是选取第几个元素添加或删除样式,下面记录css选择器中常见的选择器:相邻兄弟选择器(+).子选择器(& ...
css选择器优先级顺序是什么？css基本选择器的介绍
CSS选择器是编写CSS代码时的一个核心概念,我们在设计网页页面时,使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器.而HTML页面中的元素就是通过CSS选 ...
CSS基本选择器及优先级顺序
CSS选择器是编写CSS代码时的一个核心概念,我们在设计网页页面时,使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器.而HTML页面中的元素就是通过CSS选 ...
CSS节选——选择器
CSS,cascading style sheet,层叠样式表,请留意层叠概念. css3为了区分伪类和伪元素,伪元素采用双冒号写法. 常见伪类--:hover,:link,:active,:targ ...
css 属性选择器笔记
1.基本选择器: eg: *{margin:0;padding:0}p{color:black}.content{background:red;}#intro{padding-left:2em;} 2 ...

CSS 相邻选择器(七)

一、相邻选择器

二、简单例子

CSS 相邻选择器(七)相关推荐

最新文章

热门文章