当前位置: 电脑软硬件应用网 > 设计学院 > 网络编程 > CSS教程 > 正文 |
|
|||
利用CSS 3定位页面元素 | |||
2009-12-26 12:25:07 文/网络收集 出处:电脑软硬件应用网 | |||
使用一个唯一的日志(post)ID定位所有日志 wordpress提供给我们一种包含了ID的每篇日志的源代码输出。这种信息通常用于导航和/或了解资料的意图,不过CSS3可以利用这些唯一的ID来定义这些日志的样式。当然,你还可以像往常那样为每篇日志添加class=”post”这样的属性,但这就与我们练习的意图相冲突了(再加上它没有一点乐趣所在)。使用”子字符串匹配选择器”,我们就可以像下面这样定位所有日志和它们的不同元素了。 article[id*=post-] {} /* 定位所有日志 */ article[id*=post-] header h1 {} /* 定位所有日志中的h1标签 */ article[id*=post-] section p {} /* 定位所有日志中的p标签 */ 我没仍然可以使用同样的方式定位评论的元素和它们的子元素。 article[id*=comment-] {} /* 定位所有评论 */ article[id*=comment-] header h1 {} /* 定位所有评论中的h1标签 */ article[id*=comment-] section p {} /* 定位所有评论中的p标签 */ 定位一些指定的区域(section)或文章(article) 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> */ 使用更多的方式选择指定元素 <section> n> 我们可以仅使用以下一行选择器:
再次唠叨,你可以固执的为每个元素添加ID属性,但你会失去代码的可扩展性、维护性和绝对简洁的结构与表现相分离。CSS3的确能让我们可快速更方便的定位几乎所有没有ID和class属性的页面元素。 |
|||
最新热点 | 最新推荐 | 相关文章 | ||
CSS教程:网页中英文字体的设置 CSS教程:background-position说明 CSS教程:关于文字溢出问题的研究 CSS教程:CSS让网页文字自动隐藏 CSS教程:三列固定网页布局实例 css教程-简单的CSS下拉导航菜单 css教程-如何用纯CSS打造一个日历 CSS教程:彻底掌握Z-index属性 CSS教程:clip属性全知道 CSS布局调试的有效方法 |
关于45IT | About 45IT | 联系方式 | 版权声明 | 网站导航 | |
Copyright © 2003-2011 45IT. All Rights Reserved 浙ICP备09049068号 |