[CSS3] Using CSS Combinators to Identify Siblings and Descendants in CSS
2016-05-17 22:41
579 查看
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: 0; 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; }
相关文章推荐
- 关于css中的水平垂直居中问题总结
- sublime中安装css 格式化插件
- CSS学习记录
- html 学习(css class选择器)
- 讲一讲CSS的position/float/display都有哪些取值
- css float left right 中间空间城数据无法显示
- 沉浸式标题栏样式
- js获取非行间样式
- js去除所有标签行内样式
- CSS文件及样式命名规范
- 自定义toast样式和指定显示位置
- CSS学习之网格布局grid system - CSS: The Missing Manual
- css border
- CSS选择器
- 深入了解css的行高Line Height属性(图文并茂)
- CSS3京东图片动画
- <css3>2D动画
- <css3>font
- <css3>text
- <css3>background