今天的网页设计师可以使用 HTML4 和 CSS2.1 做一些很酷的事情。 我们可以在不使用旧的基于表格的布局的情况下完成文档的逻辑结构并创建内容丰富的网站。我们可以在不使用内联和
根据标签为网站添加美观、质朴的风格。 事实上，我们目前的设计能力早已让我们摆脱了浏览器战争、专有合同和充满闪烁、滚动和闪烁的丑陋网页的可怕日子。
事实上，我们已经广泛使用了HTML4和CSS2。 1、我们可以做得更好！ 我们可以重新组织我们的代码结构，让我们的页面代码更加语义化。 我们可以减少代码量，使页面具有漂亮的外观并使其更具可扩展性。 现在，HTML5和CSS3正在热切地等待着您，让我们看看它们是否真的可以将我们的设计提升到一个新的水平......
过去，设计师经常使用基于表格的布局，没有任何语义。但最终，得益于像Jeffrey Zeldman和Eric Meyer这样的思想创新者，聪明的设计师逐渐接受了相对更语义化的布局。
该布局取代了表格布局，但开始调用外部样式表。 但不幸的是，复杂的网页设计需要大量不同的标签结构代码，我们称之为“
-soup”综合症。其实你对下面的代码非常熟悉：
网页HTML5、CSS3应用教程分享图1
DivSoup示范
发表于 2009 年 7 月 11 日
Loremip 总和文本等等等等。
Loremip 总和文本等等等等。
Loremip 总和文本等等等等。
标签：HMTL、代码、演示
切向信息
Loremip 总和文本等等等等。
Loremip 总和文本等等等等。
Loremip 总和文本等等等等。
标签：HMTL、代码、演示
[buttonvalue=\\\"复制代码\\\\"]
网页HTML5、CSS3应用教程分享图2
虽然这样有点勉强，但是里面的例子还是可以说明css3 源代码，用HTML4来编码复杂的设计还是太臃肿了（虽然xHTML1.1没有那么多）。 但令人兴奋的是 HTML5 解决了“
-soup”综合症，并为我们带来了一组新的结构元素。这个新的 HTML5 元素具有相当细粒度的语义，从而取代了这些非语义元素
标签，同时为CSS调用提供“自然”的CSS钩子。
以下是 HTML5 解决方案的示例：
DivSoup示范
发表于 2009 年 7 月 11 日
Loremip 总和文本等等等等。
Loremip 总和文本等等等等。
Loremip 总和文本等等等等。
标签：HMTL、代码、演示
切向信息
Loremip 总和文本等等等等。
Loremip 总和文本等等等等。
Loremip 总和文本等等等等。
标签：HMTL、代码、演示
[/code][buttonvalue=\\\"复制代码\\\"]
正如我们所看到的，HTML5允许我们用大量更具语义的结构化代码标签来替换这些大量无意义的标签
标签。 这些语义特征不仅提高了我们网页的质量和语义，还大大减少了之前代码中CSS必须调用的class和id属性。 事实上，CSS3也可以让我们忽略所有的类和id。
告别类属性，欢迎使用整洁的标签
结合 HTML5 相当新的语义标记，CSS3 为网页设计者提供了网页设计的神奇力量。 借助HTML5的能量，我们将获得对文档代码更多的控制力，而借助CSS3的能量，我们的控制力将趋于无限！
虽然没有这样的中间 CSS 选择器，但我们仍然可以通过强大的 HTML5 项来调用不同的容器，而不必担心 class 和 id 等属性。 和前几年的DIV布局一样，我们在css中可能会这样称呼：
div#新闻{}
分区部分{}
分区文章{}
分区标头{}
分区内容{}
分区页脚{}
div.aside{}[buttonvalue=\\\\"复制代码\\\"]
我们来看一个基于HTML5的例子：
部分{}
文章{}
标头{}
页脚{}
旁边{}[buttonvalue=\\\"复制代码\\\"]
网页HTML5、CSS3应用教程分享图3
这是进步，但仍有一些问题需要解决。存在
在示例中，我们需要通过class或者id属性来调用页面中的元素。 这些逻辑将允许我们将样式应用于文档中的任何元素，无论是集体的还是单独的。例如
例如，.section 和 .content 元素很容易找到。 而在 HTML5 示例中，实际文档中会有很多section元素。 虽然我们可以添加一些特定的属性选择器来调用这些不同的部分元素，但幸运的是，我无法使用少量的中间 CSS 选择器来定位不同的部分元素。
定位没有 class 和 id 的 HTML-5 元素
让我们看看如何在不使用 class 和 id 的情况下定位 HTML5 页面元素的实例。 我们可以使用三个 CSS 选择器来定位和识别实例中的元素。 如下：
后代选择器：[CSS2.1]:EF
兄弟选择器：[CSS2.1]:E+F
子元素选择器：[CSS2.1]:E>F
让我们看看如何在不使用 class 和 id 的情况下在文档中定位这些节元素：
找到最里面的
元素
考虑到我们的示例不是一套完整的 HTML5 代码，我们假设有一个
元素与
元素是兄弟元素，这样我们就可以定位到最里面的
得到：
正文导航+部分{}
定位下一个
元素
作为最里面的
该元素下唯一的直接子集元素，
元素可以这样定位：
部分>部分{}
位置
元素
可以找到
创建元素的方法有很多种，但最简单的方法实际上是后代选择器：
节节文章{}
位置
,
和元素
这三个要素出现在两个地方，一是在
一个元素发生，另一个元素发生在一个元素内。 这些差异使我们能够轻松定位每个元素。
文章标题{}
文章部分{}
文章页脚{}
或者一起定义：
节节标题 {}
节节节{}
节节页脚{}
到目前为止，我们已经使用 CSS2.1 选择器来排除所有类和 id。 那么为什么我们还需要使用CSS3呢？ 我很高兴你问...
使用 CSS3 的 HTML5 元素的中间定位
事实上，我们已经使用CSS2.1选择器来排除所有类和id。 事实上，还会有很多更复杂的情况需要CSS3中间选择器来解决。 让我们通过以下示例了解如何使用 CSS3 定位页面元素css3 源代码，而不使用无用的 class 和 id 属性。
使用唯一的帖子（post）ID来定位所有帖子
WordPress为我们提供了整个日志的源代码输出，包括ID。 此信息通常用于导航和/或了解数据的用途，但 CSS3 可以使用这些唯一 ID 来定义此日志的样式。 事实上，你也可以像往常一样为整个帖子添加 class="post" 属性，但这与我们练习的意图相冲突（而且也没有一点乐趣）。 使用“子字符串匹配选择器”，我们可以定位所有日志及其不同元素，如下所示。
Article[id*=post-]{}/*查找所有帖子*/
Article[id*=post-]headerh1{}/* 定位所有帖子中的 h1 标签*/
Article[id*=post-]sectionp{}/*定位所有帖子中的p标签*/
[buttonvalue=\\\"复制代码\\\\"]
我们仍然可以使用相同的方法来定位注释元素及其子元素。
Article[id*=comment-]{}/* 定位所有评论*/
Article[id*=comment-]headerh1{}/*目标所有评论中的h1标签*/
Article[id*=comment-]sectionp{}/*定位所有评论中的p标签*/
[buttonvalue=\\\"复制代码\\\\"]
定位一些指定的区域（章节）或文章（文章）
有很多博客有大量的日志和评论，HTML5会将它们划分为
或者
元素组成。为了找到指定的内容
或者
元素，我们将切换到强大的“:nth-child”选择器：
section:nth-child(1){}/*选择第一个
*/
Article:nth-child(1){}/* 选择第一个
*/
section:nth-child(2){}/*选择第二个
*/
Article:nth-child(2){}/* 选择第二个
*/
同样，我们可以使用“:nth-last-child”选择器以相反的顺序定位某些元素。
section:nth-last-child(1){}/*选择最后一个
*/
Article:nth-last-child(1){}/*选择最后一个
*/
section:nth-last-child(2){}/*选择倒数第二个孩子
*/
Article:nth-last-child(2){}/*选择倒数第二个孩子
*/
