[CSS3] Using CSS Combinators to Identify Siblings and Descendants in CSS
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的更多相关文章
- 《CSS3实战》读书笔记 第2章 层叠样式表（CSS）
## 层叠样式表 本章将阐述CSS的基本规则. ### 解构CSS 所谓CSS,由选择器(selector)和声明块(declaration block)组成.再进一步细分,每个声明包括了属性和值. ...
- css3种引入方式,样式与长度颜色,常用样式,css选择器
# CSS三种引入方式 ## 一.三种方式的书写规范 #### 1.行间式 ```html<div style="width: 100px; height: 100px; backgr ...
- HTML-HTML5+CSS3权威指南阅读（五、设备像素和CSS像素的概念）
在这个迷你系列的文章里边我将会解释viewport,以及许多重要元素的宽度是如何工作的,比如<html>元素,也包括窗口和屏幕 这篇文章是关于桌面浏览器的,其唯一目的就是为移动浏览器中相似 ...
- CSS预编译与PostCSS以及Webpack构建CSS综合方案
CSS全称Cascading Style Sheets(层叠样式表),用来为HTML添加样式,本质上是一种标记类语言.CSS前期发展非常迅速,1994年哈肯·维姆·莱首次提出CSS,1996年12月W ...
- css预编译语言 sass scss（变量$var, css嵌套规则，@import规则，@extend，@mixin）
什么是sass Sass 是对 CSS 的扩展,让 CSS 语言更强大.优雅. 它允许你使用变量.嵌套规则. mixins.导入等众多功能, 并且完全兼容 CSS 语法. Sass 有助于保持大型样式 ...
- gulp实现打包js/css/img/html文件，并对js/css/img文件加上版本号
参考打包教程: http://www.cnblogs.com/tugenhua0707/p/4069769.html http://www.cnblogs.com/tugenhua0707/p/498 ...
- CSS特异性（CSS Specificity）的细节之CSS样式权重的计算与理解（CSS样式覆盖规则）
本篇讲解CSS特异性(CSS Specificity)的细节,也就是CSS样式选择器的权重计算 通过计算选择器的权重(weight)最终决定哪个选择器将获得优先权去覆盖其他选择器的样式设定,即“优先原 ...
- CSS之旅——第一站 为什么要用CSS
不知道有多少码农和我一样,css一直是一个软肋,软到全身酥麻...既然软肋来了,只能是要想办法解决,所以就找本CSS权威指南看一看,都说 CSS权威指南这本书比较过时,但是内容还是比较充实的,而且内容 ...
- 平常写css网页制作时最实用的九条CSS技巧
一.使用css缩写 使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则请参看<css基本语法>. 二.明确定义单位,除非值为0 忘记定义尺寸的单位是CSS新手普遍的 ...
随机推荐
- paramiko SSH 模块简单应用。
目的:需要ssh链接到Linux主机,执行telnet 命令,抓回显匹配制定内容. ssh --->执行telnet到本地端口--->执行类似 ls 的命令.匹配命令执行后的特定回显字段. ...
- underscorejs-sample学习
2.22 sample 2.22.1 语法: _.sample(list, [n]) 2.22.2 说明: 从list中产生一个随机样本.传参n后返回n个随机元素,各元素不重复. 2.22.3 代码示 ...
- 控制寄存器 CR*
控制寄存器(CR0-CR3)用于控制和确定处理器的操作模式以及当前执行任务的特性,如图4-3所示.CR0中含有控制处理器操作模式和状态的系统控制标志:CR1保留不用:CR2含有导致页错误的线性地址:C ...
- Wdcp两日志的路径
Wdcp两日志的路径: /www/wdlinux/httpd-2.2.22/logs /www/wdlinux/nginx-1.0.15/logs
- oracle积累继续
选出当天的日期的数据 select * from test_table where to_char(datetime, 'yyyy-mm-dd')=to_char(sysdate,'yyyy-mm-d ...
- SmartPhone手机网站的制作
刚开始努力有点偏,看到响应式网站去了,其实主要是要用JQuery Mobile 做一个像应用的网站. JQuery Mobile的教程 http://www.hongkiat.com/blog/bui ...
- 应用程序的关闭退出（在FMX中，Activity替代了Form的概念）
在VCL中,关闭程序的主窗体也就意味着程序的主循环结束,主程序自然而然结束.所以在主窗体中使用窗体的关闭函数(Close)即可,如下: procedure TfrmMain.btncloseClick ...
- 如何给div加一个边框border样式
如何给div加一个边框样式? 对div盒子加一个边框样式很简单只需要使用border板块样式即可. 一.虚线与实线边框 边框虚线样式:dashed 边框实现样式:solid border:1px da ...
- Android 批量上传sd卡图片
最近手头上需要批量上传一些保存到SD卡图片由于简单,过于忘记,写在博客中吧!同时也希望能帮到大家! 一 . 以下是一个Service类 package cn.com.service; import j ...
- bzoj1146
这是一道无比繁琐的题目话说这道题使我第一次练dfs序,比较感动:首先dfs序就是在dfs过程中按照访问的顺序给每个点标上两个“时间戳”一个是第一次访问到点i时的时间戳c[i],一个是访问完以i为根时的 ...