CSS3 基于关系的选择器

常见的基于关系的选择器
选择器 选择的元素
A E 元素A的任一后代元素E (后代节点指A的子节点,子节点的子节点,以此类推)
A > E 元素A的任一子元素E(也就是直系后代)
E:first-child 任一是其父母结点的第一个子节点的元素E
B + E 元素B的任一下一个兄弟元素E
B ~ E B元素后面的拥有共同父元素的兄弟元素E

你可以任意组合以表达更复杂的关系。

你还可以使用星号(*)来表示”任意元素“。

一般情况下,如果你提高了某个选择器的的确定度,你便提高它的优先级。

使用这个技巧,可以避免为大量标签指定 class 或 id 属性。CSS(引擎)会帮你做的。

在复杂设计中速度非常重要,避免使用复杂的依赖元素关系的规则可以使你的样式更有效率。

更多关于表格的例子,见 Tables

时间: 2024-10-22 17:11:43

CSS3 基于关系的选择器的相关文章

使用基于关系的选择器和伪类选择器创建纯CSS无JavaScript的鼠标移动到上面即可显示的下拉菜单

html代码: <div class="menu-bar"> <ul> <li> <h3 class="text-warning"><a class="drop-decoration text-warning">CSS</a></h3> <ul> <li> html/css从入门到精通 </li> <li> html

Atitit.隔行换色 &#160;变色 css3 结构性伪类选择器

Atitit.隔行换色  变色 css3 结构性伪类选择器 1.1. css3隔行换色扩展阅读 1 1.2. 结构伪选择器 1 1.3. jQuery 选择器2 1.1. css3隔行换色扩展阅读 原理就是利用结构伪类选择器 .list_div tr:nth-of-type(odd){background:#fff;} /* 奇数行 */ /*-------------------------------*/ .list_div tr:nth-of-type(even){ background:

CSS3 选择器之基本选择器

CSS是一种用于屏幕上渲染html,xml等一种语言,CSS主要是在相应的元素中应用样式,来渲染相对应用的元素,那么这样我们选择相应的元素就很重要了,如何选择对应的元素,此时就需要我们所说的选择器.选择器主要是用来确定html的树形结构中的DOM元素节点. CSS3的常用选择器有: 下面举几个例子来说明选择器的实用方法: 1.创建如下的DOM结构: <div class="demo"> <ul class="clearfix"> <li

《CSS3实战》笔记--选择器(一)

通过阅读和学习书籍<CSS3实战>总结 <CSS3实战>/成林著.-北京机械工业出版社2011. 属性选择器 CSS1中定义的选择器: CSS2中定义的选择器: CSS3新增的属性选择器: 实战体验:文档共享的友善之举 ??在百度文库的下载资源列表的超链接前面都会显示一个文档类型图标,这是一种非常友好的设计细节.使用属性选择器就可以轻松实现. ??代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona

CSS3 结构性伪类选择器(2)

CSS3 结构性伪类选择器-first-child ":first-child"选择器表示的是选择父元素的第一个子元素的元素E.简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素. 示例演示 通过":first-child"选择器定位列表中的第一个列表项,并将序列号颜色变为红色. HTML代码: <ol> <li><a href="##">Link1</a></li>

CSS3 结构伪类选择器 详解

1 CSS3 结构伪类选择器 1.E:root 匹配E元素所在的根元素 即:html 2. E:nth-child(n) (1)匹配E元素的父元素中第n个子元素,(2)且该位置的子元素类型必须是E类型.否则无效 p:nth-child(1){color:red} <div> <p>这是红色的<p> </div> <div> <h1>这是第一个子元素 但不是P类型,不是红色</h1> < p>这是黑色的 注意对比

css3新增加的选择器

css3新增加的选择器 一.属性选择器: E[attr] 只要有属性名E[attr=value] 属性名=属性值E[attr~=blue] 包含这个blue整个单词就可以E[attr^=c] 以这个字母c开头的E[attr$=b] 以这个字母b结尾的E[attr*=a] 只要包含a这个字母就行E[attr|=z] 只要以字母z-开头的或者就是字母z的 二.结构性伪类选择器: E:nth-child(n) 第n个子节点div:nth-child(odd) 奇数行div:nth-child(even

CSS3介绍以及新增选择器

一:基本介绍 1:css版本 css1: 定义了网页的基本属性:字体,颜色,补白,基本选择器等等. css2:添加了高级功能:浮动,定位,高级选择器(子选择器,相邻选择器,通用选择器) css3:遵循模块化开发.发布时间并不是一个时间点,而是时间段.(2002-至今) 2:css3新特性 (1)CSS选择器 (2)新的颜色制式和透明设定 (3)多栏布局的实现 (4)多背景图效果 (5)文字阴影效果 (6)开放的网络字体类型 (7)圆角 (8)边框背景图片 (9)盒子阴影 (10)媒体查询 二:新

站在CSS3的肩上定义选择器

按上下文选择元素 按祖先元素选择要格式化的元素 输入ancestor,这里的ancestor是希望格式化的元素的祖先元素的选择器. 输入一个空格(必不可少). 如果需要,对后续的每个祖先元素重复第(1)和 (2)步. 输入descendant,这里的descendant是要格式化的元素的选择器. 按父元素选择要格式化的元素 输入parent,这里的parent是包含直接格式化的元素的选择器. 输入>(大于号). 如果需要,对后代每个父元素重复第(1)步和第(2)步. 输入child,这里的chi