Web设计师
可以
使用HTML4和CSS2.1
实现一些很酷的东西 。我们
可以在不
使用
破旧的基于table布局的
根底上
实现文档逻辑
构造并
缔造内容
丰硕的网站 。我们
可以在不
使用内联<font>和<br>标签的
根底上对网站增加漂亮而细腻的
格调
款式 。事实上，我们当前的设计
威力已经让我们远离了那个可怕的阅读器战争时代、专有
协定和那些
充斥闪动、滚动和
闪耀的
俊俏网页 。
固然我们现在已经
广泛
使用了HTML4和CSS2.1，然而我们还
可以做得更好！我们
可以重组我们代码的
构造并能让我们的页面代码更富有语义化
特点 。我们
可以缩减带给页面漂亮外观
款式代码量并让他们有更高的可
扩大性 。现在，HTML5和CSS3正
蠢蠢欲动的期待大家，下面让我们来看看他们是不是真的能让我们的设计
晋升到下一个高度吧…
曾经，设计师们
时常会跟频繁
使用基于table的没有任何语义的布局 。不过最终还是要
感激像Jeffrey Zeldman和Eric Meyer这样的
思维改造者，聪慧的设计师们
渐渐的
承受了
绝对更语义化的<div>布局
代替了table布局，而且开始调用外部
款式表 。但
可怜的是，复杂的网页设计需求大量不同的标签
构造代码，我们把它叫做“<div>-soup” 综合症 。
兴许你很
相熟下面的代码:
只管这有些牵强，但上面这个实例还是
可以
注明
使用HTML4对一个复杂的设计进行代码化后依旧过于臃肿(其实xHTML1.1也不过如此) 。不过值得
冲动的是，HTML5解决“<div>-soup” 综合症并带给我们一套新的
构造化元素 。这些新的HTML5元素富有更
详尽的语义从而
接替了那些毫无语义的<div>标签，并同时为CSS的调用提供了”自然”的CSS钩子 。
下面是HTML5的解决
方案实例:
正如我们所见，HTML5
可以让我们用众多更语义化的
构造化代码标签
接替那些大量的无
意思的<div>标签 。这种语义化的
特点不只
晋升了我们网页的
品质和语义，而且大量削减了曾经代码中用于CSS必须调用的class和id属性 。事实上，CSS3也是
可以然通过我们
忽略掉全部class和id的 。
跟class属性说再见，
欢送整洁的标签
联合了富有新的语义化标记的HTML5，CSS3为web设计师们的网页提供了神普通的力量 。有了HTML5的能量，我们将得到更多的对文档代码的操纵权，有了CSS3的能量，我们的操纵权将趋于无穷大！
即便没有那些高级的CSS
取舍器，我们
依旧
可以通过
壮大的HTML5条调用不同的容器而不劳驾class和id这类属性 。像以前的DIV布局，我们在css中可能要这样调用:
我们再来看看基于HTML5的实例:
这是个
普及，但仍有一些问题需求解决 。在<div>实例中，我们需求通过class或id属性来调用页面中的元素 。这种逻辑将同意我们将
款式
利用到文档中的任何一个元素上，无论是整体还是个体 。例如在<div>实例中，.section 和 .content元素很容易定位 。然而在HTML5实例中，实际文档中会有众多个section元素 。其实我们
可以增加一些特定的属性
取舍器来调用那些不同的section元素，不过谢天谢地，我没现在
可以用少量的高级CSS
取舍器来定位不同的section元素 。
不
使用class和id定位HTML-5元素
下面让我们来看看如何在不
使用class和id的状况下定位HTML5页面元素的一个实例，我们
可以
使用三种CSS
取舍器来定位和辨认实例中的元素 。如下:
后辈
取舍器:[CSS 2.1]: EF
兄弟
取舍器:[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呢？我很
庆幸你能这么问…
使用CSS3对HTML5元素进行高级定位
固然我们已经
使用CSS2.1
取舍器排除掉了全部的class和id，显然还会有众多更复杂的状况需求CSS3的高级
取舍器来解决 。让我们通过
实现一下的实例来了解一下如何在不
使用无用的class和id属性的状况下利用CSS3定位页面元素 。
使用一个唯一的日志(post)ID定位全部日志
wordpress提供应我们一种包括了ID的每篇日志的源代码输出 。这种信息通常用于导航和/或了解
材料的
用意，不过CSS3
可以利用这些唯一的ID来定义这些日志的
款式 。固然，你还
可以像
平常那样为每篇日志增加class=”post”这样的属性，但这就与我们练习的
用意相
摩擦了(再外加它没有丝毫乐趣所在) 。
使用”子字符串匹配
取舍器”，我们就
可以像下面这样定位全部日志和它们的不同元素了 。
我们
依旧
可以
使用同样的
模式定位评论的元素和它们的子元素 。
定位一些指定的区域(section)或文章(article)
有众多博客的日志量和评论量都相当大，HTML 5 会将它们由<section>或<article>元素构成 。为了定位哪些指定的<section>或<article>元素，我们就要转而
使用
壮大的“:nth-child”
取舍器了:
section:nth-child(1) {} /*
取舍第一个 <section> */
article:nth-child(1) {} /*
取舍第一个 <article> */
section:nth-child(2) {} /*
取舍第二个 <section> */
article:nth-child(2) {} /*
取舍第二个 <article> */
同样，我们
可以
使用“:nth-last-child”
取舍器定位反序的一些元素 。
section:nth-last-child(1) {} /*
取舍最终一个 <section> */
article:nth-last-child(1) {} /*
取舍最终一个 <article> */
section:nth-last-child(2) {} /*
取舍倒数第二个 <section> */
article:nth-last-child(2) {} /*
取舍倒数第二个 <article> */
使用更多的
模式
取舍指定元素
另一种
取舍HTML5中指定元素(如header、section和footer)的
步骤便是利用”:only-of-type”
取舍器的优势 。因为这些HTML5元素通常会在众多地方浮现不止一次，所以当我们想定位那种在父元素下仅浮现过一次的标签时这种
步骤很容易 。例如，我们要
取舍的是在某
元素中有切仅有的唯逐个个元素，如以下代码:
我们
可以仅
使用以下一行
取舍器:
section>section:only-of-type {}
再次唠叨，你
可以
执着的为每个元素增加ID属性，但你会失去代码的可
扩大性、
保护性和绝对简洁的
构造与
体现相
拆散 。CSS3确实能让我们可
快捷更容易的定位
几乎全部没有ID和class属性的页面元素 。
总结
我相信随着
工夫的推动和更多阅读器的
支撑，HTML5和CSS3将越来越受
欢送，它们将为web设计师们带来更无穷的能量，让我们的web前端更上一个台阶 。
