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。
CSS3 基于关系的选择器的更多相关文章
- 使用基于关系的选择器和伪类选择器创建纯CSS无JavaScript的鼠标移动到上面即可显示的下拉菜单
html代码: <div class="menu-bar"> <ul> <li> <h3 class="text-warning ...
- Atitit.隔行换色 变色 css3 结构性伪类选择器
Atitit.隔行换色 变色 css3 结构性伪类选择器 1.1. css3隔行换色扩展阅读 1 1.2. 结构伪选择器 1 1.3. jQuery 选择器2 1.1. css3隔行换色扩展阅读 原 ...
- CSS3常用30种选择器总结
CSS3常用30种选择器总结 HTML5/CSS3时尚的圆盘时钟动画 带当前日期 www.html5tricks.com/demo/html5-css3-clock-with-date/index.h ...
- CSS3 结构伪类选择器 详解
1 CSS3 结构伪类选择器 1.E:root 匹配E元素所在的根元素 即:html 2. E:nth-child(n) (1)匹配E元素的父元素中第n个子元素,(2)且该位置的子元素类型必须是E类型 ...
- css3新增加的选择器
css3新增加的选择器 一.属性选择器: E[attr] 只要有属性名E[attr=value] 属性名=属性值E[attr~=blue] 包含这个blue整个单词就可以E[attr^=c] 以这个字 ...
- T-SQL 基于关系分割字符串
今天晚上学习了下 SQL 基于关系的运算,同时也捉摸着写了个例子,虽然我知道性能不是很好,还有待优化.直接上源代码吧,思路表达出来有点困难,直接贴上代码,如果有人不懂得可以MM 我. declare ...
- css3学习系列之选择器(一)
CSS3中的属性选择器 [att*=val]属性选择器:[att*=val]属性选择器的含义是:如果元素att表示的属性之属性值中包含用val指定的字符的话,则该元素使用这个样式. [att^=val ...
- CSS3学习系列之选择器(二)
first-child选择器和last-child选择器 first-child指定第一个元素.last-child指定最后一个子元素. 例如: <!DOCTYPE html> <h ...
- CSS3的[att$=val]选择器
1.实例源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
随机推荐
- SQL Server-聚焦EXISTS AND IN性能分析(十六)
前言 前面我们学习了NOT EXISTS和NOT IN的比较,当然少不了EXISTS和IN的比较,所以本节我们来学习EXISTS和IN的比较,简短的内容,深入的理解,Always to review ...
- c 进程和系统调用
这一篇博客讲解进程和系统调用相关的知识 有这样一个场景,我需要输入一串文字,然后把我输入的文字加上一个本地的时间戳 保存在一个文件中,可以初步理解为一个备忘录也行 #include <stdio ...
- NSCharacterSet 使用说明
NSCharacterSet 和 NSMutableCharacterSet 用面向对象的方式来表示一组Unicode字符,它经常与NSString及NSScanner组合起来使用,在不同的字符上 ...
- DotNet 资源大全中文版(Awesome最新版)
Awesome系列的.Net资源整理.awesome-dotnet是由quozd发起和维护.内容包括:编译器.压缩.应用框架.应用模板.加密.数据库.反编译.IDE.日志.风格指南等. 算法与数据结构 ...
- CSS知识总结(五)
CSS常用样式 3.边框样式 1)边框线 border-style : none | hidden | dotted | dashed | solid | double | groove | ridg ...
- 利用Python进行数据分析(2) 尝试处理一份JSON数据并生成条形图
一.JSON 数据准备 首先准备一份 JSON 数据,这份数据共有 3560 条内容,每条内容结构如下: 本示例主要是以 tz(timezone 时区) 这一字段的值,分析这份数据里时区的分布情况. ...
- 在web浏览器上显示室内温度(nodeJs+arduino+socket.io)
上次的nodejs操作arduino入门篇中实现了如何连接arduino.这次我们来实现通过arduino测量室内温度并在浏览器上显示出来. [所需材料] 硬件:LM35温度传感器,arduino u ...
- c#面向对象基础技能——学习笔记(五)委托技术在开发中的应用
委托 delegate 1.是一种全新的面向对象语言的特性: 2.开发事件驱动程序变得非常简单: 3.简化多线程难度. 理解委托:可以理解成一个方法的指针.(接收的变量是方法) 步骤: 1.声明委托, ...
- Eclipse代码和xml文件的智能提示
一.代码智能提示 Windows → Preferences → Java→ Editor → Content Assist 将 Auto activation delay(ms): 改为 0 将 A ...
- atitit.日期,星期,时候的显示方法ISO 8601标准
atitit.日期,星期,时候的显示方法ISO 8601标准 1. ISO 86011 2. DAte日期的显示1 2.1. Normal1 2.2. 顺序日期表示法(可以将一年内的天数直接表示)1 ...