网站设计者可以使用HTML4和CSS2.1做出很酷的东西。我们可以完成对文件的逻辑结构而不使用旧表的布局，创造一个丰富的网站，我们可以添加一个精美的网站风格不使用内联和标签。事实上，我们目前的设计能力，我们一直走从可怕的浏览器大战，专有协议和丑陋的网页，闪烁，滚动和闪耀。
虽然我们已经使用HTML4和CSS2.1的现在，我们可以做的更好！我们可以通过我们的代码的结构，使我们的网页代码更多的语义，我们可以减少页面美观样式代码的数量，使它们更具可扩展性。现在，HTML5和CSS3的渴望等待你。让我们看看他们是否真的能提高我们的设计的一个新的水平，hellip。
有一次，设计师经常使用无语义的布局基于表频繁。但最终还是要感谢Jeffrey Zeldman和Eric Meyer喜欢创新的想法，聪明的设计师慢慢接受相对更多的语义布局而不是表格的布局，并开始调用外部样式表。不幸的是，复杂的网页设计需要大量的不同的标签结构代码，我们称之为- soup综合征。也许你用下面的代码很熟悉：
复制代码代码如下所示：
Div Soup示范
发布于2009年7月11日
乱数假文文本blah blah blah。
乱数假文文本blah blah blah。
乱数假文文本blah blah blah。
标签：HTML，代码，演示
切的信息
乱数假文文本blah blah blah。
乱数假文文本blah blah blah。
乱数假文文本blah blah blah。
标签：HTML，代码，演示
虽然这有点舍不得，上面的例子可以证明，HTML4还是太臃肿复杂的设计，但xhtml1.1是一样的。但令人兴奋的是，HTML5解决了- soup证给我们带来了一套新的结构化元素。这些新的HTML5元素有更详细的语义相反那些没有语义的标签，并在同一时间，他们提供的CSS调用CSS钩子自然。
下面是HTML5解决方案的一个示例：
复制代码代码如下所示：
Div Soup示范
发布于2009年7月11日
乱数假文文本blah blah blah。
乱数假文文本blah blah blah。
乱数假文文本blah blah blah。
标签：HTML，代码，演示
切的信息
乱数假文文本blah blah blah。
乱数假文文本blah blah blah。
乱数假文文本blah blah blah。
标签：HTML，代码，演示
我们可以看到，HTML5可以让我们用更多的语义结构化代码标签取代大量无意义的标签。这个语义特征不仅提高了我们的网页的质量和语义，而且还大大降低了CSS必须打电话过去码的class和id属性。实际上，CSS3也可以忽略所有的class和id通过我们。
告别班级物业，欢迎整洁的标签
随着HTML5的新的语义标记，CSS3的网页设计师，网页提供了一种神圣的力量。随着HTML5的能源，我们将得到比代码的文件控制。随着CSS3的能量，我们的控制将趋向于无穷大！
即使没有这些先进的CSS选择器，我们仍然可以调用不同的容器由强大的HTML5的酒吧没有驱动的属性如类和ID。像以前的div的布局，所以我们可能要调用CSS DIV #新闻{ }：
复制代码代码如下所示：
div.section { }
div.article { }
div.header { }
div.content { }
div.footer { }
div.aside { }
让我们看一看基于HTML5的示例：
复制代码代码如下所示：
第{ }
标题{ }
页脚{ }
除了{ }
这是一个进步，但仍存在一些亟待解决的问题。在实例中，我们需要调用的元素在页面中使用的类或ID属性。这种逻辑将允许我们将样式应用于文档中的任何一个元素，无论是整体还是个人。例如，在一个实例中，该部分内容元素和，很容易找到。但在HTML5实例，有许多部分的实际文档元素。事实上，我们可以添加一些特定的属性选择器的不同部分的元素，但值得庆幸的是，我不能与一个小数量的先进CSS选择器查找不同的部分元素。
不使用class和id来定位HTML 5元素
现在让我们看看如何在不使用类和ID的情况下定位HTML5页面元素的实例。我们可以使用三个CSS选择器来定位和标识实例中的元素：
子代选择器：{ 2.1 }：EF
兄弟选择器：{ 2.1
子元素选择器：{ 2.1 }：E > F CSS
让我们看看如何在不使用类和id的情况下定位文档中的节元素：
定位最外面的元素
考虑到我们的示例不是一组完整的HTML5代码，我们假设有一个元素和一个元素，它是元素下面的一个兄弟元素。
这个:
复制代码代码如下所示：
体导航+段{ }
定位下一个元素
作为最外层元素下唯一的直接子集元素，这个元素可能能够找到这个：
复制代码代码如下所示：
节>节{ }
定位元素
有许多方法来定位元素，但最简单的方法当然是后代选择器。
复制代码代码如下所示：
第三节第{条}
位置和元素
这三个元素出现在两个地方，一个在元素中，另一个在元素中。
复制代码代码如下所示：
文章标题{ }
第九条{ }
文章页脚{ }
或者一起定义：
复制代码代码如下所示：
节段标题{ }
截面部分{ }
节段页脚{ }
到目前为止，我们已经使用CSS2.1选择器来移除所有的类和ID，那么为什么我们需要使用CSS3呢我很高兴你能问这样hellip。
用CSS3 HTML5元素先进的定位
虽然我们已经消除了所有的class和id与CSS2.1选择器，显然有更复杂的情况，需要CSS3的高级选择器来解决。让我们来看看如何使用CSS3定位网页元素不使用无用的class和id属性。
使用唯一的日志（POST）ID定位所有日志
WordPress提供的源代码的输出包含所有该ID的信息通常是用于导航和/或理解数据的意图的日志，但CSS3可以使用这些独特的ID来定义这些日志的风格。当然，你可以添加class=，post每个日志像往常一样，但这与我们练习的意图冲突（加上它没有任何乐趣）。使用的匹配的子字符串的选择；我们可以找到所有的日志和他们的不同的元素，如以下。
复制代码代码如下所示：
文章{
在日志中的所有文章{ { } }
在日志中所有的文章{
我们还可以用同样的方法找到的复习元素及其子元素。
复制代码代码如下所示：
文章{
在所有注释中，文章名为注释}
在所有注释中，p=注释- }部分
找到一些指定的区域（部分）或文章（文章）
有很多博客具有相当的日志卷和评论，和HTML 5使他们或元素。为了找到什么指定或元素，我们将变成一个强大的：n child选择器：
复制代码代码如下所示：
节：第n个子（1）{第一选择
条目：第n个子（1）{第一选择
节：第n个子元素（2）
条目：第n个子（2）{
以同样的方式，我们可以使用：n上child选择器定位反序的一些元素。
复制代码代码如下所示：
节：第最后一个子（1）{选择最后一个
第n个最后一个子（1）{选择最后一个
节：第二个最后的子（2）{从第二个
条目：第二个最后的子（2）{从第二个
用更多的方式选择指定的元素
另一种方式来选择指定的元素在HTML5，如标题、部分和页脚，是利用：只有type选择器。因为这些HTML5元素将不止一次出现在很多地方，所以这种方法非常方便，当我们想找到只出现一次的母件下的标签。例如，我们要选择的是有一个元素只有一个元素，如以下代码：
复制代码代码如下所示：
定位此节元素
定位此节元素
但此节元素不位于
这部分元素
我们只能使用下面的行选择器：
复制代码代码如下所示：
节>仅限于类型{ }
再次，你可以固执地添加ID属性的每一个元素，但你将失去的可扩展性、可维护性和绝对简单的code.css3确实让我们很快地找到几乎所有的网页元素，没有id和class属性。
总结
我相信，随着时间的推移，更多的浏览器支持HTML5和CSS3将会变得越来越流行了。它们将给Web设计者带来更多的能量，使我们的Web前端达到更高的水平。
