常见的基于关系的选择器
选择器 选择的元素
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 基于关系的选择器的更多相关文章

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

    html代码: <div class="menu-bar"> <ul> <li> <h3 class="text-warning ...

  2. Atitit.隔行换色  变色 css3 结构性伪类选择器

    Atitit.隔行换色  变色 css3 结构性伪类选择器 1.1. css3隔行换色扩展阅读 1 1.2. 结构伪选择器 1 1.3. jQuery 选择器2 1.1. css3隔行换色扩展阅读 原 ...

  3. CSS3常用30种选择器总结

    CSS3常用30种选择器总结 HTML5/CSS3时尚的圆盘时钟动画 带当前日期 www.html5tricks.com/demo/html5-css3-clock-with-date/index.h ...

  4. CSS3 结构伪类选择器 详解

    1 CSS3 结构伪类选择器 1.E:root 匹配E元素所在的根元素 即:html 2. E:nth-child(n) (1)匹配E元素的父元素中第n个子元素,(2)且该位置的子元素类型必须是E类型 ...

  5. css3新增加的选择器

    css3新增加的选择器 一.属性选择器: E[attr] 只要有属性名E[attr=value] 属性名=属性值E[attr~=blue] 包含这个blue整个单词就可以E[attr^=c] 以这个字 ...

  6. T-SQL 基于关系分割字符串

    今天晚上学习了下 SQL 基于关系的运算,同时也捉摸着写了个例子,虽然我知道性能不是很好,还有待优化.直接上源代码吧,思路表达出来有点困难,直接贴上代码,如果有人不懂得可以MM 我. declare ...

  7. css3学习系列之选择器(一)

    CSS3中的属性选择器 [att*=val]属性选择器:[att*=val]属性选择器的含义是:如果元素att表示的属性之属性值中包含用val指定的字符的话,则该元素使用这个样式. [att^=val ...

  8. CSS3学习系列之选择器(二)

    first-child选择器和last-child选择器 first-child指定第一个元素.last-child指定最后一个子元素. 例如: <!DOCTYPE html> <h ...

  9. CSS3的[att$=val]选择器

    1.实例源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

随机推荐

  1. ASP.NET Core中的依赖注入(1):控制反转(IoC)

    ASP.NET Core在启动以及后续针对每个请求的处理过程中的各个环节都需要相应的组件提供相应的服务,为了方便对这些组件进行定制,ASP.NET通过定义接口的方式对它们进行了"标准化&qu ...

  2. 从零开始编写自己的C#框架(13)——T4模板在逻辑层中的应用(二)

    最近这段时间特忙,公事私事,忙得有时都没时间打开电脑了,这两周只能尽量更新,以后再将章节补回来. 直接进入主题,通过上一章节,大家明白了怎么使用模板类编写T4模板,本章进的是一些简单技巧的应用 1.首 ...

  3. ISO日期格式标准,浏览器到服务器到mysql中的时区

    时区简单理解 https://zh.wikipedia.org/wiki/%E6%97%B6%E5%8C%BA 上面的链接是时区的wiki说明,下面说说我记住的部分: GMT时区是格林威治标准时间,我 ...

  4. grunt自定义任务——合并压缩css和js

    npm文档:www.npmjs.com grunt基础教程:http://www.gruntjs.net/docs/getting-started/ http://www.w3cplus.com/to ...

  5. wordpress插件bug排查后记(记一次由于开启memecached引起的插件bug)

    这篇文章是写给自己的. 周三的时候我在维护公司的一个wordpress项目页面时发现了一个非常奇怪的情况:当我尝试更新网站上的一个页面后,在wordpress后台的编辑器中发现其内容并没有按我预期的将 ...

  6. Python(七)Socket编程、IO多路复用、SocketServer

    本章内容: Socket IO多路复用(select) SocketServer 模块(ThreadingTCPServer源码剖析) Socket socket通常也称作"套接字" ...

  7. 类型基础---CLR Via C#笔记一

    一.所有类型都是从System.Obejct派生 1.下面两个类型定义是完全一致的: class Employee{ ... } class Employee:System.Object{ ... } ...

  8. Mac制作U盘系统(OS X El Capitan)教程

    前言部分 重装过Mac OS X系统的人应该都深有体会,通过自带的重新安装 Mac OS X功能恢复系统(开机时按Command+R) 要耗费10几个小时才能完成(请求苹果国外服务器),但如果通过U盘 ...

  9. openresty 前端开发序

    还记得第一次尝试前后端分离的时候,是使用nginx + react 构建的spa应用,后端是java,主要处理业务逻辑逻辑部分,返回json数据,在nginx里面配置好html + js纯静态文件,再 ...

  10. php中抽象类与接口的概念以及区别

    php里面的接口类,抽象类到底有什么用呢? 刚接触php的时候,觉得这个东西没什么用,其实这些东西还是有一定的作用的,下面我就简单的说说. 1.php 接口类:interface 其实他们的作用很简单 ...