一、相邻选择器

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

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

二、简单例子

<!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. Android性能优化之内存篇

    下面是内存篇章的学习笔记,部分内容与前面的性能优化典范有重合,欢迎大家一起学习交流! 1)Memory, GC, and Performance 众所周知,与C/C++需要通过手动编码来申请以及释放内 ...

  2. 两分钟了解REACTIVEX

    可能在之前,你就已经看过这篇响应式编程的入门.什么?太长?好吧,这都没关系,Rx并不难,你甚至可以自己实现一个这样的框架. 知道数组吧?你当然知道,这就是: [ 14, 9, 5, 2, 10, 13 ...

  3. 谈HTTP的KeepAlive

    为什么要使用KeepAlive? 终极的原因就是需要加快客户端和服务端的访问请求速度.KeepAlive就是浏览器和服务端之间保持长连接,这个连接是可以复用的.当客户端发送一次请求,收到相应以后,第二 ...

  4. 【转】Python中的GIL、多进程和多线程

    转自:http://lesliezhu.github.io/public/2015-04-20-python-multi-process-thread.html 目录 1. GIL(Global In ...

  5. 关于WIndows内核自映射方案的通俗解释

    在一次操作系统课程上听老师说了这么一个有意思的东西,windows的自映射方案居然达到了把4K的页目录的线性地址“藏”在4M页表里的效果,感觉甚是奇特,于是乎就想着说怎么去算.光会算之后仍旧不满足,我 ...

  6. sprint个人总结+读书博客

    读书感想:    第8章讲了需求分析,在我的日常软件编写中,肯定需要需求分析的,一个没有需求的软件,编写出来也没有什么意义,只能是丢在一个角落里发霉.需求有各种各样,要怎样才能满足客户的需求呢,那就要 ...

  7. IOS 之 PJSIP 笔记（一） 编译多平台支持的静态库

    好久没有写博客了,这也算是我步入新工作后的第一篇技术博文吧.在进入新公司前,早就有了技术层进入下一个迭代的准备,但很多事情是意想不到的,就像我以 C# 程序员的身份面试入职的,而今却是一个全职的 IO ...

  8. C#检查标准图幅编号

    /// <summary> /// 检查是否为标准图幅编号 /// </summary> /// <param name="MapNumber"> ...

  9. C#根据CPU+磁盘标号来注册软件

    很多私人软件都需要自己的作品出售给别人只能一台电脑使用,不可以随便一个电脑都可以运行自己的软件,所以就有了软件注册限制的控制,收集了一个注册软件的帮助类,分享记录一下. 功能介绍:    根据CPU+ ...

  10. Qt 框架 开发HTTP 服务器 开发记录

    最近需求需要开发一款 HTTP ,然后由于先前接触过Qt,就直接用Qt写HTTP服务器了,也是为了当作练手,要不然是直接上HTTP框架的. 后端用C++ Qt框架 前端为了练手 当然是纯生的 js h ...