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. css样式积累

    1.圆角:     border-radius:16px 16px 16px 16px;     2透明度:             filter: alpha(opacity=80);       ...

  2. Wdcp缺少mod_rewite模块

    1.下载apache源码包,解压并查找到mod_rewrite.c文件 tar -zxvf httpd-2.2.27.tar.gz cd httpd-2.2.27 [root@localhost ht ...

  3. Tomcat环境变量的配置

    Tomcat web服务器 支持全部JSP以及Servlet规范 主要作用 是提供了一个可以让Jsp和Servlet运行的平台 tomcat环境变量设置 CATALINA_HOME : D:\bran ...

  4. Ubuntu使用Xming和Putty

    运行个复杂的,比如 gnome-session,这个是 GNOME 的启动命令,如果想打开 KDE 就是 startkde root@carlo-cloud:~# xlogoThe program ' ...

  5. Flask_SqlAlchemy 1215, 'Cannot add f oreign key constraint'

    Flask_SqlAlchemy 1215, 'Cannot add f oreign key constraint'报错 sqlalchemy.exc.IntegrityError: (pymysq ...

  6. Python自动化运维之27、Django(一)

    一.概述 1.什么是框架? 框架,即framework,特指为解决一个开放性问题而设计的具有一定约束性的支撑结构,使用框架可以帮你快速开发特定的系统,简单说就是使用别人搭好的舞台,你来做表演. 2.常 ...

  7. [r]Ubuntu Linux系统下apt-get命令详解

    Ubuntu Linux系统下apt-get命令详解(via|via) 常用的APT命令参数: apt-cache search package 搜索包 apt-cache show package ...

  8. TC2.0中怎样调用汇编程序

    转载于: TC2.0中怎样调用汇编程序 一.概述 TC是美国BORLAND 公司在IBM PC机上开发的一个高效.优化的C编译程序,它自带高效的全屏幕编辑程序,在集成开发环境下可支持编辑.编译.连接调 ...

  9. jquery $(this).attr $(this).val方法使用介绍--useful

    $(this).attr(key); 获取节点属性名的值,相当于getAttribute(key)方法,本文整理了一些相关的示例,感兴趣的朋友可以参考下 $(this).attr(key); 获取节点 ...

  10. Basic Wall Maze

    poj2935:http://poj.org/problem?id=2935 题意:在6*6的格子中,有一些,如果两个格子之间有墙的话,就不能直接相通,问最少要经过几步才能从起点走到终点.并且输出路径 ...