CSS combinators allows us to reference the DOM relationship between two or more elements in CSS.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Combinators</title>
</head>
<body>
<section>
<h1>H1 Content</h1>
<h2>H2 Content</h2>
<p>sub text subtext</p>
<a href="#">Call to Action</a>
<p>
paragraph description paragraph description paragraph description paragraph description <a href="#">link in paragraph</a>
</p>
<a href="#">Call to Action</a>
</section>
</body>
</html>
section {
border: 1px solid #ccc;
width: 500px;
padding-bottom: 10px;
} /* All the h1 inside section */
section h1 {
background-color: #000;
color: #fff;
margin:;
padding: 10px 5px;
} /* All a tags as direct child in section */
section > a {
color: red;
} /*only descendants a tag of the section*/
section p > a {
color: #000;
} /* the p tag next to h2 tag*/
section h2 + p {
font-style: italic;
margin-top: -15px;
} /* All the siblings after h1*/
section h1 ~ * {
margin-left: 15px;
}

[CSS3] Using CSS Combinators to Identify Siblings and Descendants in CSS的更多相关文章

  1. 《CSS3实战》读书笔记 第2章 层叠样式表(CSS)

    ## 层叠样式表 本章将阐述CSS的基本规则. ### 解构CSS 所谓CSS,由选择器(selector)和声明块(declaration block)组成.再进一步细分,每个声明包括了属性和值. ...

  2. css3种引入方式,样式与长度颜色,常用样式,css选择器

    # CSS三种引入方式 ## 一.三种方式的书写规范 #### 1.行间式 ```html<div style="width: 100px; height: 100px; backgr ...

  3. HTML-HTML5+CSS3权威指南阅读(五、设备像素和CSS像素的概念)

    在这个迷你系列的文章里边我将会解释viewport,以及许多重要元素的宽度是如何工作的,比如<html>元素,也包括窗口和屏幕 这篇文章是关于桌面浏览器的,其唯一目的就是为移动浏览器中相似 ...

  4. CSS预编译与PostCSS以及Webpack构建CSS综合方案

    CSS全称Cascading Style Sheets(层叠样式表),用来为HTML添加样式,本质上是一种标记类语言.CSS前期发展非常迅速,1994年哈肯·维姆·莱首次提出CSS,1996年12月W ...

  5. css预编译语言 sass scss(变量$var, css嵌套规则,@import规则,@extend,@mixin)

    什么是sass Sass 是对 CSS 的扩展,让 CSS 语言更强大.优雅. 它允许你使用变量.嵌套规则. mixins.导入等众多功能, 并且完全兼容 CSS 语法. Sass 有助于保持大型样式 ...

  6. gulp实现打包js/css/img/html文件,并对js/css/img文件加上版本号

    参考打包教程: http://www.cnblogs.com/tugenhua0707/p/4069769.html http://www.cnblogs.com/tugenhua0707/p/498 ...

  7. CSS特异性(CSS Specificity)的细节之CSS样式权重的计算与理解(CSS样式覆盖规则)

    本篇讲解CSS特异性(CSS Specificity)的细节,也就是CSS样式选择器的权重计算 通过计算选择器的权重(weight)最终决定哪个选择器将获得优先权去覆盖其他选择器的样式设定,即“优先原 ...

  8. CSS之旅——第一站 为什么要用CSS

    不知道有多少码农和我一样,css一直是一个软肋,软到全身酥麻...既然软肋来了,只能是要想办法解决,所以就找本CSS权威指南看一看,都说 CSS权威指南这本书比较过时,但是内容还是比较充实的,而且内容 ...

  9. 平常写css网页制作时最实用的九条CSS技巧

    一.使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则请参看<css基本语法>. 二.明确定义单位,除非值为0 忘记定义尺寸的单位是CSS新手普遍的 ...

随机推荐

  1. 《JavaScript高级程序设计 第3版》-学习笔记-1

    P1-P30页 1.<script>标签的属性 async:async(html)  | async="async"(xhtml),表示立即下载脚本,但不马上执行(执行 ...

  2. CSS3的appearance属性--改变元素的外观

    CSS3 appearance 属性 CSS 参考手册 实例 使 div 元素看上去像一个按钮: div { appearance:button; -moz-appearance:button; /* ...

  3. IOS“多继承”

    转自念茜的博客: 当单继承不够用,很难为问题域建模时,我们通常都会直接想到多继承.多继承是从多余一个直接基类派生类的能力,可以更加直接地为应用程序建模.但是Objective-C不支持多继承,由于消息 ...

  4. JavaScript的组成—ECMAScript、BOM和DOM

      JavaScript 是一种基于 ECMAScript 规范的脚本语言,并在此基础上进行了自己的封装.ECMAScript 不是一种编程语言,仅仅是一种脚本语言规范,由欧洲计算机协会制定和发布,任 ...

  5. wlan的QOS配置

    WLAN QoS配置 1.1  WLAN QoS简介 802.11网络提供了基于竞争的无线接入服务,但是不同的应用需求对于网络的要求是不同的,而原始的网络不能为不同的应用提供不同质量的接入服务,所以已 ...

  6. Squares<哈希>

    Description A square is a 4-sided polygon whose sides have equal length and adjacent sides form 90-d ...

  7. 通用GPIO模拟串口,提供源代码,本人经过测试OK(第一版)

    --------------------------serial.h------------------------------------------ #ifndef _SERIAL_H_ #def ...

  8. java学习之数组(一)【内存】

    在java语言当中,为了更方便多个数据的管理,这里提供数组. 比如说,现在我们有一组数据,7,8,9,9,为了保存这四个数据,我们分别要定义变量来保存,少了还好说.但是假如,有100多个数据呢,我们一 ...

  9. Light OJ 1027 - A Dangerous Maze(概率)

    题目大意: 你在一个迷宫里,你面前有n个门,你选择门的概率是一样的,每扇门有一个数字k, 加入这个数字是负数,那么这个门会花费你abs(k)分钟后把你带回原点, 假如这个数字是正数,他可以把你带出迷宫 ...

  10. 图论(对偶图):COGS 470. [NOI2010]海拔

    470. [NOI2010]海拔 ★★★☆   输入文件:altitude.in   输出文件:altitude.out   简单对比 时间限制:2 s   内存限制:512 MB 海拔 [问题描述] ...