一、相邻选择器

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

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

二、简单例子

<!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 相邻选择器(七)的更多相关文章

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

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

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

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

  3. [css]我要用css画幅画(七) - 哆啦A梦

    接着之前的[css]我要用css画幅画(六),今天画的有所不同,画的是哆啦A梦,我们小时候对他的称呼其实是小叮当机器猫. (PS:这次我要做的事情,很多人已经做过,这并不是什么创新,我只是在学习并记录 ...

  4. CSS 后代选择器

    后代选择器(descendant selector)又称为包含选择器. 后代选择器可以选择作为某元素后代的元素. 根据上下文选择元素 我们可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起 ...

  5. CSS 派生选择器

    派生选择器 通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁. 在 CSS1 中,通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors),这是由 ...

  6. IE7浏览器下CSS属性选择器二三事

    一.为何专门说起IE7 以前,或者说数年前,我们从事桌面端网页开发的时候,基本上都还要兼顾IE6浏览器, 即使有些特性,IE7支持,我们也会忽略之.于是,我们会不自然地把IE6和IE7浏览器归为一路货 ...

  7. CSS常用选择器

    关于CSS常用选择器: 1.ID选择器 关于ID选择器具有唯一性,在文档流中,ID是唯一的,在低版本的浏览器中,允许出现不适唯一ID的情况,而在高版本的浏览器中,出现ID不唯一的情况浏览器会出现的报错 ...

  8. css以及选择器基础

    CSS样式基础了解1.css基础语法CSS样式的出现是为了将内容和表现分离极大的提高了工作效率内联样式(在 HTML 元素内部)<p style="margin-left: 10px: ...

  9. css节点选择器

    基础选择器 基础选择器是选择器的所有选择器的基本组成元素,也最简单,包含如下5个类别: ID选择器 标签选择器 类选择器 属性选择器:类选择器算是一个特殊的属性选择器,通用的属性选择器举例如下: #c ...

随机推荐

  1. 用C#实现修改网页数据

    背景    由于某宝最近升级,导致朋友买的刷单软件不能用了:在又付过钱之后,那个刷单软件供应商竟然捐款跑路了...于是,朋友委托我做一个功能一样的软件.功能    他给我描述的软件功能,是这个样子的: ...

  2. MyBatis知多少（17）MyBatis和JDBC

    有了MyBatis,就不再需要编写JDBC代码了.像JDBCT这样的API的确非常强大,但使用起来总不免觉得太过繁琐.代码清单给出了一个使用JDBC的示例. 从这个例子中很容易看出,JDBC API会 ...

  3. 在ASP.NET开发中容易忽略的2个小问题

    本文地址:http://www.cnblogs.com/outtamyhead/p/3642729.html,转载需保留本地址. 最近在我的MVC项目中出现了两个非常小,但是往往惹出大麻烦的问题,借中 ...

  4. Only top uni produces good ppt.

    重要的事说三遍: 学技术,我只相信那几所top高校 学技术,我只相信那几所top高校 学技术,我只相信那几所top高校 <Good Habits you must own> Wake up ...

  5. Understanding CMS GC Logs--转载

    原文地址:https://blogs.oracle.com/poonam/entry/understanding_cms_gc_logs Understanding CMS GC Logs By Po ...

  6. angular中$cacheFactory缓存的使用

    最近在学习使用angular,慢慢从jquery ui转型到用ng开发,发现了很多不同点,继续学习吧: 首先创建一个服务,以便在项目中的controller中引用,服务有几种存在形式,factory( ...

  7. 《构建之法》之第8、9、10章读后感 ，以及sprint总结

    第8章: 主要介绍了软件需求的类型.利益相关者,获取用户需求分析的常用方法与步骤.竞争性需求分析的框架NABCD,四象限方法以及项目计划和估计的技术. 1.软件需求:人们为了解决现实社会和生活中的各种 ...

  8. Websocket 概述

    WebSocket protocol 是HTML5一种新的协议.它实现了浏览器与服务器全双工通信(full-duplex). [[ from websocket是什么原理? ]] 一.WebSocke ...

  9. Fisrt Node-Webkit App

    1.什么是Node-Webkit 基于node.js和chromium的应用程序实时运行环境,可运行通过HTML(5).CSS(3).Javascript来编写的本地应用程序.node.js和webk ...

  10. OracleHelper(对增删改查分页查询操作进行了面向对象的封装，对批量增删改操作的事务封装)

    公司的一个新项目使用ASP.NET MVC开发,经理让我写个OracleHelper,我从网上找了一个比较全的OracleHelper类,缺点是查询的时候返回DataSet,数据增删改要写很多代码(当 ...