CSS样式表：详细介绍IE7新支持的选择器（3）
作者：w3cpro.cn翻译 来源：蓝色理想 发布时间：2007-10-09 18:24:00
图2使用清楚的样式显示它们怎么展示，First DIV的结构有Paragraph One, Second DIV, and Paragraph Nine组成。Second DIV有三个以上段落和拥有三个以上段落的Third DIV。所有段落的颜色是白色，每个包含两个链接元素。所有DIV黑色边框轻度褐色。
图2
图2: DIVs are black-bordered and paragraphs are colored white for clarity.
这个结构可以进行许多选择符的试验。#p#分页标题#e#
试验
好了，让我们试着更改Second DIV的三四两个段落。如果我们只想使用后代选择符可以像这样div div p {color:red;}；问题是上面的规则影响了Second DIV所有的段落，当然包括Third DIV的所有段落，因为Third div在DIV里面而段落在它里面。 还使用它？后代选择符没有一点选择性，让很多嵌套的元素都被选择当我们宁愿有给小的组选择。
的确，classes提供更好的选择性，但我们正试着避免class-itis。可是，不使用任何class仅使用相邻选择符比较困难。IE7 以前我们使用下面的方法：
div div p {color: red;}
div div div p {color: black;}
div div p.first {color: black;}
第一个规则应用了，然后带有另外DIV选择器的另外一个规则颠倒了Third DIV里的样式。随后阻止Paragraph Two的样式，我们没有选择，只有给段落指定一个class更换样式。真是痛苦！
通过子和兄选择符，我们可以很简单的实现，不需要class。
div>div>p+p {color: red;}
div>div>div p {color: black;}
图3
图3: Our new combinators have selected only Paragraphs Three and Four.
让我们来分析下上面的代码，第一个规则的意思是：选择div的子部div的子部段落的相邻兄弟段落。
Second DIV是第一DIV的子部，Second DIV里面的两个段落即符合直接跟随另外一个段落的要求是Paragraph Two 和 Paragraph Three。Paragraph one没有被选中，因为在Second DIV里面没有兄弟段落在它前面。
0
投稿猜你喜欢
- /** * 递归法实现的快速排序 * @param $seq * @return array */f
1. 日志的意义日志是个好东西，但却并不是所有人都愿意记，直到出了问题才追悔莫及，长叹一声，当初要是记日志就好了。但记日志却是个技术活，不能- 在python程序中添加tensoboard一系列代码我就不一一写了。查找资料就可以找到很多这方面的内容。今天我主要是想说下，如何在cmd中
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&
- 一 描述720. 词典中最长的单词 - 力扣（LeetCode） (leetcode-cn.com)给出一个字符串数组 words
- 效果图：图（1）初始图图（2）点击“从右侧划出”代码如下：<!DOCTYPE html><html> <hea
- 正则表达式，又称正规表示法、常规表示法（英语：Regular Expression，在代码中常简写为regex、regexp或RE），计算机
- 这种问题一般是退出flask服务时选择了disconected而不是选择terminate，dicconected是一种伪断开，只是在pyc
- 一下demo演示2.0中的vue-router是如何获取到不同参数的，并在地址栏中匹配不同的信息 <!DOCTYPE html>
- 关于F.normalize计算理解动机最近多次看到该方法出现，于是准备了解一下，搜了后发现原来是所谓的L2 norm计算简介函数定义torc
- 前言相信大家在日常工作生活中少不了和邮件打交道，比如我们会用邮件进行信息交流，向上级汇报日常工作；再比如大家熟悉的某个WEB系统注册阶段，通
- 概论在讨论ECMAScript闭包之前，先来介绍下函数式编程（与ECMA-262-3 标准无关）中一些基本定义。 然而，为了更好的解释这些定
- 常见的绑定事件有直接绑定在页面元素中比如<div id="wrap" onclick="a();&quo
- 最近看到N多介绍CSS框架，前些天我说过一句话：“在我有限的视野里，还没见到可以真正可以称得上css框架的东东~”，当然也可能是我的视野太小
- openpyxl 的用法实例1.1 Openpyxl 库的安装使用openpyxl 模块是一个读写 Excel 2010 文档的 Pytho
- 每一个变量都有数据类型，Go中的数据类型有：简单数据类型：int、float、complex、bool和string数据结构或组合(comp
- Oracle公司6月9日宣布同意收购TimesTen公司，TimesTen是一家私营软件企业，其产品能提高用于股市和机票预订等需要快速响应时
- 这篇文章主要介绍了python列表生成器迭代器实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋
- 前言网易云音乐这款音乐APP本人比较喜欢，用户量也比较大，而网易云音乐之所以用户众多和它的歌曲评论功能密不可分，很多歌曲的评论非常有意思，其
- axios * 的配置方式本文所用 axios 版本号为：1.3.2。axios 中有两种 * ：axios.interceptors.r
