网页HTML5、CSS3应用教程分享(2)

我们再来看看基于HTML5的实例:

section {}

article {}

header {}

footer {}

aside {}[button value=\\\\\\\"复制代码\\\\\\\"]

网页HTML5、CSS3应用教程分享图三

这是个进步，但仍有一些问题需要解决。在

实例中，我们需要通过class或id属性来调用页面中的元素。这种逻辑将允许我们将样式应用到文档中的任何一个元素上，无论是整体还是个体。例如在

实例中，.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元素的定位吧:

定位最外层的

考虑到我们的例子并不是一套完整的HTML5代码，所以我们假定在元素下有个

body nav+section {}

定位下一个

作为最外层

section>section {}

定位

可以定位

section section article {}

定位

这三个元素分别在两个地方都出现过，一是在

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”这样的属性，但这就与我们练习的意图相冲突了(再加上它没有一点乐趣所在)。使用”子字符串匹配选择器”，我们就可以像下面这样定位所有日志和它们的不同元素了。

article[id*=post-] {} /* 定位所有日志 */

article[id*=post-] header h1 {} /* 定位所有日志中的h1标签 */

article[id*=post-] section p {} /* 定位所有日志中的p标签 */

[button value=\\\\\\\"复制代码\\\\\\\"]

我们仍然可以使用同样的方式定位评论的元素和它们的子元素。

article[id*=comment-] {} /* 定位所有评论 */

article[id*=comment-] header h1 {} /* 定位所有评论中的h1标签 */

article[id*=comment-] section p {} /* 定位所有评论中的p标签 */

[button value=\\\\\\\"复制代码\\\\\\\"]

定位一些指定的区域(section)或文章(article)

有很多博客的日志量和评论量都相当大，HTML 5会将它们由

或

元素组成。为了定位哪些指定的

或

元素，我们就要转而使用强大的“:nth-child”选择器了:

<上一页123下一页>

App Builder 2019.40 免费版

• 软件性质：国产软件
• 授权方式：免费版
• 软件语言：简体中文
• 软件大小：15354 KB
• 下载次数：142 次
• 更新时间：2019/9/18 15:29:56
• 运行平台：WinAll...
• 软件描述：现在各大APP都非常火，很多公司都想开发属于自己的APP，除了要有专业的APP开... [立即下载]