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. ...
随机推荐
- YYModel 源码解读(二)之YYClassInfo.h (1)
NS_ASSUME_NONNULL_BEGIN NS_ASSUME_NONNULL_END 为了兼容Swift 中的 ? 和 ! oc 在6.3引入了两个新的类型注释:__nullable和__non ...
- vim 编辑器简单使用总结
http://blog.csdn.net/sharp_allen/article/details/27075133转载 说了这么多,其实还少一个和word,记事本一样的编辑器,在各个操作系统都有编辑器 ...
- sublime快捷键操作
一些文本编辑器窗口,浏览器窗口,软件(qq)窗口的快捷键操作有些都是一致的,下面是sublime的一些快捷键操作,很好用. 另外按住ESC键可以关闭CTRL + B执行结果的窗口 ctrl+shift ...
- Java正则速成秘籍(三)之见招拆招篇
导读 正则表达式是什么?有什么用? 正则表达式(Regular Expression)是一种文本规则,可以用来校验.查找.替换与规则匹配的文本. 又爱又恨的正则 正则表达式是一个强大的文本匹配工具,但 ...
- JS魔法堂:不完全国际化&本地化手册 之 拓展篇
前言 最近加入到新项目组负责前端技术预研和选型,其中涉及到一个熟悉又陌生的需求--国际化&本地化.熟悉的是之前的项目也玩过,陌生的是之前的实现仅仅停留在"有"的阶段而已. ...
- H5天气查询demo(二)
最近刚好有空,学长帮忙让做个毕设,于是我提到了那个基于H5地理位置实现天气查询的方法,学长听了也觉得不错,于是就这个主题,扩展了一下,做了一个航班管理查询系统,为上次博客中提到的利用H5 api中的经 ...
- 『.NET Core CLI工具文档』(十一)dotnet-test
说明:本文是个人翻译文章,由于个人水平有限,有不对的地方请大家帮忙更正. 原文:dotnet-test 翻译:dotnet-test 名称 dotnet-test - 使用配置的测试运行器运行单元测试 ...
- cin.ignore()函数的用法
cin.ignore(a,ch)方法是从输入流(cin)中提取字符,提取的字符被忽略(ignore),不被使用.每抛弃一个字符,它都要计数和比较字符:如果计数值达到a或者被抛弃的字符是ch,则cin. ...
- add-two-numbers
leetcode开篇~ 问题描述: You are given two linked lists representing two non-negative numbers. The digits a ...
- Lind.DDD敏捷领域驱动框架~介绍
回到占占推荐博客索引 最近觉得自己的框架过于复杂,在实现开发使用中有些不爽,自己的朋友们也经常和我说,框架太麻烦了,要引用的类库太多:之前架构之所以这样设计,完全出于对职责分离和代码附复用的考虑,主要 ...