了解CSS3选择器,第 1部分: 结构伪类

分享于 

27分钟阅读

Web开发

  繁體

前端开发人员不只是需要理解如何编写 CSS,我们需要知道如何编写它,高效的。 而"有效"的含义取决于你的项目和环境。 也许你有一个团队,有几个成员在CSS中工作,你需要一个有效的方法来共同工作。 或者你有一个巨大的企业网站,你需要你的CSS优化速度。 你甚至可以使用限制HTML访问的遗留系统,这意味着你需要有效的选择器来有效地样式化元素。 你甚至可以面对所有这些情况。

无论你的CSS目标是什么,到达它们的最佳途径都是了解你的选择,这意味着了解所有可用的选择器。 我已经熟悉了id和类选择器,我向你介绍了属性选择器的美妙之处,但是在中还有很多其他的内容。

我将从结构伪类开始,讨论CSS3中的新选择符。

什么是伪类?

CSS 伪类不能与组合符或者简单选择器( 如id或者类) 目标元素。 你可以使用伪类根据元素的属性。状态和 relative 位置来选择元素。 例如你可能已经熟悉了用于链接状态插件的伪类:

:link
:visited
:hover
:active
:focus

CSS3引入了许多新的伪类,包括针对它们在文档树中的位置和与其他元素的关系的结构伪类。 下面是你将在本文中看到的结构伪类的列表。

:root
:only-child
:empty
:nth-child(n)
:nth-last-child(n)
:first-of-type
:last-of-type
:only-of-type
:nth-of-type(n)
:nth-last-of-type(n)
:first-child
:last-child

在查看详细信息之前,让我们简要地介绍一下在pseudo类中使用的语法。

伪类语法

伪类的语法使用冒号( : ) 后跟伪类名:

:pseudo-class {}

如果要针对特定元素( e ),则将该元素追加到伪类语法的开头:

e:pseudo-class {}

你甚至可以在id和类选择器旁边使用伪类,如下所示:

#id:pseudo-class {}
.class:pseudo-class {}

数值

基于文档树中元素特定位置的一些nautilus伪类目标元素。 指示附加到伪类名称的括号 (n) 中的数值的位置:

:pseudo-class(n) {}

(n)的值可以是整数,表示文档树中元素的位置。 以下示例针对符合伪类规则的第三个元素:

:pseudo-class(3) {}

你还可以指定数值公式,如"每第五个元素",它指示为 (5n) 值:

:pseudo-class(5n) {}

此外,还可以通过添加( + ) 或者减去( - ) 值来指定偏移公式( 允许负值;默认值为零):

:pseudo-class(5n+1) {}

这些新选择器还允许你通过它的文档树顺序使用奇异和甚至关键字来目标元素。 例如如果要针对奇数编号元素,请使用以下命令:

:pseudo-class(odd) {}

将伪类置于工作状态

现在你已经看到了一般语法,让我们更详细地看一些新的选择器,看看你可以实现的样式。

:根

:根类针对HTML元素中的元素。 考虑页面的以下基本标记:

<!DOCTYPEhtml><head><title>Getting to Know CSS3 Selectors</title></head><body></body></html>

如果要将主 background 颜色应用于这里页,用不同的background 颜色显示"集装箱",只能使用 CSS,如下所示:

:root{
 background-color: rgb(56,41,48);
}
body {
 background-color: rgba(255, 255, 255,. 9);
 margin: 0 auto;
 min-height: 350px;
 width: 700px;
}

本文中,通过 :root 将 background 颜色应用到html元素,并通过类型选择器( ) 对容器应用了容器样式( for )。 这将导致简单的可视布局,如图所示的

图 1.指定给html元素并分配给 body 元素的较浅的background 颜色的页面的一个示例。

:仅子级

:只有子类 pseudo targets是它的父级的唯一子元素。 这意味着父元素只包含一个元素。 :only-child 伪类与:根伪类不同,后者假定HTML元素。 通过将伪类语法附加到元素( e ),可以使用 :only-child 来定位任何元素,如下所示:

e:only-child {}

例如,可以能你有一个文本 block,你可以在它的中升级新项: 现在可用 <> <b> ! </b> 版僵尸生存指南: 完全保护活死 </h2>

如果要将文本"现在可用"作为标注样式,则可以使用:仅子级来目标b 元素。 图 2 显示你将使用的代码。

h2 {
 background: rgb(255, 255, 255) url(zombies.png) no-repeat
97% 4%;border: 1px solid rgba(125, 104, 99,. 3);border-radius: 10px;color: rgb(125,104,99);font: normal 20px Georgia,"Times New Roman", Times,
serif;padding: 20px 20px 20px 60px;position: relative;width: 450px; }
 b:only-child {
 background-color: rgb(156,41,48);color: rgb(255,255,255);display: block;font: bold 12px Arial, Helvetica, sans-serif;font-weight: bold;letter-spacing: 1px;padding: 10px;text-align: center;text-transform: uppercase;-moz-transform: translate(-70px) 
 rotate(-5deg) matrix(1, -0.2, 0, 1, 0, 0);-moz-transform-origin: 50px 0;-webkit-transform: translate(-70px) 
 rotate(-5deg) matrix(1, -0.2, 0, 1, 0, 0);-webkit-transform-origin: 50px 0;-o-transform: translate(-70px) 
 rotate(-5deg) matrix(1, -0.2, 0, 1, 0, 0);-o-transform-origin: 50px 0;-ms-transform: translate(-70px) 
 rotate(-5deg) matrix(1, -0.2, 0, 1, 0, 0);-ms-transform-origin: 50px 0;transform: translate(-30px) 
 rotate(-5deg) matrix(1, -0.2, 0, 1, 0, 0);transform-origin: 50px 0 0;width: 150px; }
图 2使用了:的子类,并强调了标题中的文本。

这个CSS导致在图1 中显示的可视化标注,它不需要添加到HTML中的任何id或者类属性。

图 3产品促销的图例示例。

:空

:空类针对没有任何子级或者任何文本的元素( 如:: <p> </p>

我个人认为,当我允许一个空元素在站点上呈现时,我不能想象一个情况。 在语法方面,你可以自己使用伪类目标每个空元素:

:empty {
 background-color: red;
}

或者,如:只有子类伪类的示例中,你可以针对特定元素,如 td:

td:empty {
 background-color: red;
}

:nth子( n )

这是我所覆盖的第一个伪类,它利用前面描述的数值。 :子类针对与父元素在父元素中的位置相关的子元素。 比如,用交替的background 颜色列出博客评论可能会很不错,如图 4所示。

图 4.带有交替样式的博客评论列表的示例

这个示例的HTML只是一个有序列表,如图所示的

 <ol>
 <li>
 <p>March 14, 2012</p> <a href="http://nocommonsense.com"><img
src="tdog.jpg" alt="T-Dog"/></a> <p><a href="http://nocommonsense.com">T-Dog</a></p> <p>C'mon, man, don't give me that gansta s**t!</p></li> <li>
 <p>March 13, 2012</p> <a href="http://itsallblackandwhite.com"><img
src="rickgrimes.jpg" alt="Rick Grimes"/></a> <p><a href="http://itsallblackandwhite.com">Rick
Grimes</a></p> <p>You want to kill me, you're going to have to
do better than that
 wrench.</p>
 </li>
 <li>
 <p>March 13, 2012</p>
 <a href="http://becameawalker.com"><img
src="shanewalsh.jpg"
 alt="Shane Walsh"/></a>
 <p><a href="http://becameawalker.com">Shane
Walsh</a></p>
 <p>You can't just be the good guy and expect to
live. Not anymore.</p></li></ol>
图 5.博客文章示例的HTML。

要设置这里标记,我首先使用一个简单类型选择器来定位列表项,如图 6 所示:

li {
 background-color: rgba(194, 181, 158,. 5);
 background-image: -webkit-gradient(linear,
 left top, left bottom,
 from(rgba(194, 181, 158,. 7)),
 to(rgba(194, 181, 158, 0)));
 background-image: -moz-linear-gradient(top,
 rgba(194, 181, 158,. 7),
 rgba(194, 181, 158, 0));
 background-image: -o-linear-gradient(
 rgba(194, 181, 158,. 7),
 rgba(194, 181, 158,
 0));
 border: 1px solid rgb(194, 181, 158);
 border-radius: 10px;
 margin: 15px 0;
 padding: 25px;
}
图 6.博客文章示例的样式。

然后,使用 :nth-child() 伪类,以偶数编号的列表项为目标:

li:nth-child(even){
 background-color: rgba(242, 224, 131,. 5);
 background-image: -webkit-gradient(linear,
 left top, left bottom,
 from(rgba(242, 224, 131,. 7)),
 to(rgba(242, 224, 131, 0)));
 background-image: -moz-linear-gradient(top,
 rgba(242, 224, 131,. 7),
 rgba(242, 224, 131, 0));
 background-image: -o-linear-gradient(
 rgba(242, 224, 131,. 7),
 rgba(242,224, 131, 0));
 border: 1px solid rgb(242, 224, 131);
}

:nth-last-child ( n )

除了顺序确定的子元素,而不是第一个子元素之外,:nth-last-child ( n ) 伪类工作起来与 :nth-child(n) 一样。 使用相同的博客注释示例,请考虑每个列表项中的内容:

<li><p>March 14, 2012</p><ahref="http://nocommonsense.com"><imgsrc="tdog.jpg"alt="T-Dog"/></a><p><ahref="http://nocommonsense.com">T-Dog</a></p><p>C'mon, man, don't give me that gansta s**t!</p></li>

组成注释的每个段落元素都需要独特的样式,像图像一样。 ( 请参见图 7 )。

图 7这个博客评论为它里面不同类型的内容提供了不同的风格

对于注释名和链接,我使用带有数值的:nth-last-child(n) 伪类来定位列表项中的second-to-last段落:

p:nth-last-child(2) {
 clear: left;
 float: left;
 font-size: 12px;
 margin-top: 5px;
 text-align: center;
 width: 80px;
}

:first-of-type

:first-of-type 类针对父类中的特定类型的第一个元素。 在博客注释示例中,我可以将日期内容作为列表项的第一个段落:

<li><p>March 14, 2012</p><ahref="http://nocommonsense.com"><imgsrc="tdog.jpg"alt="T-Dog"/></a><p><ahref="http://nocommonsense.com">T-Dog</a></p><p>C'mon, man, don't give me that gansta s**t!</p></li>

使用:first-of-type,我将第一个段落( 包含日期) 设置为右对齐,并使用下面的边框:

p:first-of-type {
 border-bottom: 1px solid rgba(56,41,48,. 5);
 float: right;
 font-weight: bold;
 padding-bottom: 3px;
 text-align: right;
 width: 560px;
}

:last-of-type

:last-of-type 类目标就是该名称所说的: 父元素中的最后一个元素类型。 在博客示例中,我可以在最后一段中设置注释文本的样式,如下所示:

我是 <> dog dog dog dog dog dog dog dog dog give give give give give give give give give s**t。 </p> </li>

图 7中,你可以看到我如何使用:来设置最后一段的样式。 下面是我使用的CSS:

p:last-of-type {
 font-style: italic;
 margin: 50px 10px 10px 100px;
}

:only-of-type

:only-of-type伪类目标是子元素,它是父元素中唯一的类型之一。 继续使用博客评论示例,你可以使用这里选择器来针对化身:

<li><p>March 14, 2012</p><ahref="http://nocommonsense.com"><imgsrc="tdog.jpg"alt="T-Dog"/></a><p><ahref="http://nocommonsense.com">T-Dog</a></p><p>C'mon, man, don't give me that gansta s**t!</p></li>
CSS:
 img:only-of-type{
 background-color: rgb(255, 255,255);
 border: 1px solid rgba(56,41,48,. 5);
 float: left;
 padding: 3px;
 }

:nth-of-type ( n )

:nth-of-type ( n ) 伪类与其他基于数值的伪类工作类似。 这里伪类根据特定元素类型的位置 relative 指向父元素。 你可以看到你可以在简单的购物车视图中实现的效果示例,如图8 所示。

图 8.针对不同 table 单元的独特样式的购物车视图

this的HTML,如图 9所示,在中。 ( 请记住表对于数据是很好的,但是请避免它们。

<tablecellspacing="0"><tr><th>Quanity</th><th>Item</th><th>Price</th></tr><tr><td>1</td><td>The Zombie Survival Guide: Complete Protection
from the Living
 Dead</td><td>$13.95</td></tr><tr><td>1</td><td>Gerber Apocalypse Kit</td><td>$349.00</td></tr><tr><td>1</td><td>Kookaburra BIG Kahuna 2010 Cricket Bat</td><td>$189.95</td></tr><tr><td>1</td><td>40" Samurai Sword</td><td>$159.00</td></tr><tr><tdcolspan="2">Subtotal</td><td>$711.19</td></tr><tr><tdcolspan="2">Tax (7%)</td><td>$49.78</td></tr><tr><tdcolspan="2">Shipping &amp; Handling</td><td>$25.00</td></tr><tr><tdcolspan="2">Total</td><td>$785.97</td></tr></table>
图 9.购物车的HTML。

为了样式化这些 table 元素,我使用 :nth-of-type(n) 选择器来样式化 table header 和数据单元的文本对齐方式。 例如项目 table header 单元格需要左对齐左( 默认值为居中)。

<tr><th>Quanity</th><th>Item</th><th>Price</th></tr>

使用 :nth-of-type(n) 选择器,你可以针对特定的子对象:

th:nth-of-type(2) {
 text-align: left;
}

如果没有一个类或者 id,我可以使用同一个伪类来设置所需的文本对齐方式。

th:nth-of-type(3), td:nth-of-type(3) {
 text-align: right;
}
th:nth-of-type(1), td:nth-of-type(1) {
 text-align: center;
}

:nth-last-of-type ( n )

:nth-last-of-type ( n ) 伪类与 :nth-of-type(n) 类似,但是 relative 位置与最后一个子类相对应,而不是第一个子类。 shopping示例中,分类汇总。税。发货和总行需要独特的样式,如图1 所示。

图 10.小计,总计和其他行的唯一样式

让我们看一下小计行,它是从 table 底部的第四行( tr ) 中的第四行:

<tr><tdcolspan="2">Subtotal</td><td>$711.19</td></tr>

我使用 :nth-last-of-type(n) 给这一行单元格提供了图中所见的样式。 这是我使用的CSS:

tr:nth-last-of-type(4) td {
 border-top: 1px solid rgb(56,41,48);
 font-style: italic;
 font-weight: bold;
 text-align: right;
}

然后,我继续对 table的其余行使用这个伪类:

tr:nth-last-of-type(1) td {
 background-color: rgb(56,41,48);color: rgb(255, 255, 255);font-size: 14px;font-style: italic;font-weight: bold;padding: 5px 10px;text-align:right;}
tr:nth-last-of-type(2) td, tr:nth-last-of-type(3) td {
 font-style: italic;text-align: right;}

:first-child

:第一个子类伪类针对父元素中的第一个子元素,不管它的类型如何。 对于这个例子,让我们考虑一个包含一系列内容元素( 图 11 )的侧栏。

图 11.包含不同内容节的侧边栏

本示例使用的标记是一个包含div的包含 div,其中显示了图 12

<divrole="complementary"><aside><ul><li><ahref="http://youtube.com/whenzombiesattack">Subscribe
to our
 YouTube channel</a></li><li><ahref="http://twitter.com/whenzombiesattack">Follow
us on
 Twitter</a></li><li><ahref="http://facebook.com/whenzombiesattack">Like
us on
 Facebook</a></li></ul></aside><aside><h3>Newsletter Sign-Up</h3><p>The voodoo sacerdos flesh eater, suscitat mortuos
comedere carnem
 virus.</p><p><ahref="http://www.codeproject.com/newsletter/">Sign up
now</a></p></aside><aside><h3>From the Blog</h3><p>Zombie ipsum reversus ab viral inferno, nam rick
grimes malum cerebro.
 De carne lumbering animata corpora quaeritis.
Summus brains sit, morbo
 vel maleficia? De apocalypsi gorger omero undead
survivor dictum
 mauris.</p><p><ahref="http://www.codeproject.com/blog/">Read more</a></p></aside></div>
图 12.工具条的标记

如图8 所示,包含有定义边框和 background的内容部分:

aside {
 background-color: rgb(255, 255, 255);
 border: 1px solid rgba(125, 104, 99,. 5);
 border-radius: 10px;
 -moz-box-shadow: inset 00 20px
 rgba(125, 104, 99,. 5);
 -webkit-box-shadow: inset 00 20px
 rgba(125, 104, 99,. 5);
 box-shadow: inset 00 20px
 rgba(125, 104, 99,. 5);
 margin-bottom: 20px;
 padding: 25px;
}

然而,第一个部分包含社会媒体图标,缺少边框和 background ( 参见图 11中的)。 我使用 :first-child 伪类来针对内容的第一部分:

aside:first-child {
 background-color: transparent;
 border: 0;
 -moz-box-shadow: none;
 -webkit-box-shadow: none;
 box-shadow: none;
 padding: 0;
}

:最后一个子对象

最后一个子类的伪类与 :first-child 相反,指向父元素中的最后一个子元素。 回到sidebar图 11的侧栏示例中,第一部分包含一个社会媒体链接列表:

<ul><li><ahref="http://youtube.com/whenzombiesattack">Subscribe
to our YouTube
 channel</a></li><li><ahref="http://twitter.com/whenzombiesattack">Follow
us on Twitter</a></li><li><ahref="http://facebook.com/whenzombiesattack">Like
us on Facebook</a></li></ul>

每个链接都作为不同的icon 在屏幕上呈现,实现了一个简单的图像替换技术和 sprite:

li a {
 background: url(Sprites.png) no-repeat 2px 7px;
 display:block;
 height: 64px;
 text-indent: -5000px;
 width: 64px;
}

为了在列表中设置最后一个链接的样式,我使用 :last-child

pseudo-class:
 li:last-child a {
 background-position: -100px 7px;
 }

其余中间链接使用 :nth-child() 伪类进行样式化:

li:nth-child(2) a {
 background-position: -200px 7px;
}

浏览器支持

好消息是所有最新的浏览器版本,包括 IE 和 9,都支持这些CSS3伪类。 本文中一些老的浏览器版本可能为一些CSS3选择器提供有限的支持。

在早期版本的IE 中,它应该是关于你的项目的。 你如何使用不支持的选择器? if design design design ask ask ask ask ask ask ask ask ask ask ask ask ask ask ask ask ask ask ask 9 experience。 如果答案是,考虑将自适应方法集中到你的CSS。

在 IE pseudo类支持CSS3伪类时,如果需要早期版本的,请查看在中模拟CSS3类支持的 Selectivzr插件。 它与 jQuery。Dojo。MooTools和Prototype一起工作。

处理

关于浏览器和CSS3伪类的坏消息是,浏览器如何高效地处理选择器,伪类在列表的底部就会下降。 如果性能和速度对项目非常重要,那么应该明智地使用伪类。 我建议利用一些测试工具来帮助你优化CSS选择器。 一些好的是:

知道什么时候和什么时候使用

那么你如何决定使用哪个选择器? 答案取决于你的项目。 了解项目和CSS选择器可以帮助你决定。 本文中介绍的nautilus伪类可以能不是样式表的"黄油和黄油"选择器,但是它们可以能是无价的工具。 记住,编写好CSS是找到实现项目目标最有效的途径。

保持调谐 !

请注意"了解CSS3选择器。"中的第 2部分,我将介绍UI元素状态的伪类以及目标和否定类。

这篇文章是由Emily写的。 Emily是standardista变体的自由网页设计师,这意味着她对语义标记和 CSS。可用性和易访问性等事情感到非常。 作为她的一部分,她在博客上写了网页设计,博客不限制,作为for的作者作者。 她也是一家用于网络标准,的客户编写者,.NET 杂志和混合在线。

about对社区建筑和知识共享非常爱爱所有的网站。 她创建并管理了新的墨西哥用户组的Webuquerque,并且是ExpressionEngine客户机的主持人。 美国 Emily Emily,Emily,Control,Voices,InterLab,,Emily,Emily,Emily。

找到 Emily:

HTML5视频资源


PAR  str    Select  Struct  classes