一起感受HTML5和CSS3的能量[译]（3）
作者：暴风彬彬 来源：彬Go 发布时间：2009-09-04 16:29:00
不使用class和id定位HTML-5元素
下面让我们来看看如何在不使用class和id的情况下定位HTML5页面元素的一个实例，我们可以使用三种CSS选择器来定位和辨别实例中的元素。如下:
后代选择器:[CSS 2.1]: E F
兄弟选择器:[CSS 2.1]: E + F
子元素选择器:[CSS 2.1]: E > F
下面让我们来看看如何不使用class和id而完成对文档中的那些section元素的定位吧:
定位最外层的<section>元素
考虑到我们的例子并不是一套完整的HTML5代码，所以我们假定在<body>元素下有个<nav>元素与<section>元素是兄弟元素。这样的话，我们就可以向下面代码那样定位最外层的<section>了:
body nav+section {}
定位下一个<section>元素
作为最外层<section>元素下的唯一直属子集元素，这个<section>元素也许可以这样定位:
section>section {}
定位<article>元素
可以定位<article>元素的方法有很多，不过最简单的方法当然就是后代选择器了:
section section article {}
定位<header>、<section>和<footer>元素
这三个元素分别在两个地方都出现过，一是在<article>元素中出现，另一是在<aside>元素中出现。这种差别能让我们轻松定位每个元素。
article header {}
article section {}
article footer {}
或者一起定义:
section section header {}
section section section {}
section section footer {}
到目前为止，我们已经使用CSS2.1选择器排除掉了所有的class和id。那么我们为什么还需要使用CSS3呢？我很高兴你能这么问…
0
投稿猜你喜欢
- 函数的基本结构Python中的函数基本结构：def 函数名([参数列表]): 语句 几点说明：
- 1.元字符： . 它匹配除了换行字符外的任何字符，在 alternate 模式（re.DOTALL）下它甚至可以匹配换行 ^ 匹配行首。除非
- 本文实例讲述了flask框架实现连接sqlite3数据库的方法。分享给大家供大家参考，具体如下：1. 在flask文件夹中新建一个model
- 生成器(generator)概念生成器不会把结果保存在一个系列中，而是保存生成器的状态，在每次进行迭代时返回一个值，直到遇到StopIter
- 函数调用方法：numpy.zeros(shape, dtype=float)各个参数意义：shape：创建的新数组的形状（维度）。dtype
1.字符串的字符转换1.1.字符转换的概念在前面说的的字符串替换，是将字符串中的一个子串替换成了新的子串，如果我们想对字符串中的某些字符进行- 一、导入excel文件和相关库import pandas;import matplotlib;from pandas.tools.plott
- Python中可以使用collections中的defaultdict类实现创建进行统一初始化的字典。这里总结两种常用一点的初始化方式，分别
- 前言Pandas是python的一个数据分析包，提供了大量的快速便捷处理数据的函数和方法。其中Pandas定义了Series 和 DataF
- Python自动的os库是和操作系统交互的库，常用的操作包括文件/目录操作，路径操作，环境变量操作和执行系统命令等。文件/目录操作获取当前目
- 自从web2.0之后，网页设计开始走向实用设计的阶段，越来越多的设计师注意到“为表达信息而设计”。着迷于前段时间黑白灰老师给大家介绍的“in
- 终极版终于有时间给大家分享了！！！。我们先看一下效果图。1：登录界面：2：查询数据库所有的内容！3：链接数据库：4：最终的打包！话不多说直接
- 随机数参与的应用场景大家一定不会陌生，比如密码加盐时会在原密码上关联一串随机数，蒙特卡洛算法会通过随机数采样等等。Python内置的rand
- 1.Vue父子组件通信方式父子组件通信方式一般为props和emit组合使用，那么在不同的文件中应该如何使用呢？｜.vue文件和.jsx文件
- Python字典中的键是唯一的，但不同的键可以对应同样的值，比如说uid，可以是1001。id同样可以是1001。这样的话通过值来获取指定的
- 前言python下的setuptools带有一个easy_install的工具，在安装python的每三方模块、工具时很有用，也很方便。安装
- 前言说到二手房信息，不知道你们心里最先跳出来的公司（网站）是什么，反正我心里第一个跳出来的是网站是 58 同城。哎呦，我这暴脾气，想到就赶紧
- MyBatis-Plus实现数据库curd操作1.mp是什么MyBatis-Plus(简称MP)是一个MyBatis 的增强工具，在MyBa
- 如下所示：#随机数的使用import random #导入randomrandom.randint(0,9)#制定随机数0到9i=rando
- 今天是 Firefox3的2008下载日 ，这就意味着Firefox3正式发布了。Firefox3有众多的改进和新功能，我最关注的功能之一是
