175 6191 5976

添加官方微信

领创时代关于网站建设、青岛画册设计、青岛网站设计的观点和相关新闻 将我们的想法与焦点与你共享

CSS后代选择器如何用

2019-09-27 来源:小领

HTML文档的结构类似于家谱。在您的家庭族谱中,您有父母、祖父母和更早的先辈,这些是你的祖先。孩子和孩子的后代都是你的后代。HTML以非常类似的方式工作。其他元素内部的元素是它们的后代。例如,由于几乎每个HTML元素都在<body>标记内,因此它们将是该<body>元素的后代。当您开始使用CSS并需要定位特定元素以应用视觉样式时,了解这种关系非常重要。

CSS后代选择器适用于另一个元素内部的元素(或更准确地说,是另一个元素的后代元素)。例如,无序列表具有带有后代标签的标签。让我们以以下HTML为例:

<ul> 
<li> <a href="">这是一个链接</a> </ li> 
</ ul>

如果您使用家谱树示例对此进行思考,将是该元素的孩子,而将是该元素的孩子。那么,如何使用这些后代选择器来定位网页中的特定元素?首先,您必须使用两个(或多个)以空格分隔的类型选择器来定义后代选择器。

在该示例中,样式仅适用于链接元素(<a>),该元素是列表项元素(<li>)的后代。页面上不是列表项的后代的所有其他链接都不会获得此样式。

要记住的一件事是,在后代选择器中使用的标签之间有多少个标签并不重要。如果第二个元素包含在第一个元素内的任何位置,它将被选作后代。

如果要选择从ul元素派生的所有锚,则应编写:display:no。现在,这些样式将应用于作为列表项后代的任何链接。您也可以编写此选择器这是一个后代选择器,它使用两个以上的类型选择器。在这种情况下,这将适用于列表项内部和无序列表内部的链接。 

您从其派生的选择器不必始终是类型后代。例如,假设您的站点区域(如部门)的ID属性为“广告牌”。您可以根据该ID设置后代选择器。这将设置无序列表的样式,该列表是ID为“广告牌”的元素的后代。您可以对类值执行相同的操作。假设该部门的分类值为“广告牌”。上面的CSS将在具有该类值的任何分区内设置<ul>元素的样式。

使用后代选择器,您会变得很笨拙且冗长。例如,如果使用Dreamweaver编写HTML代码,则添加新CSS规则时会有一个设置,该规则将基于光标在该页面上的位置自动创建选择器。什么Dreamweaver中确实在此情况下,是创建一个疯狂冗长而漫长的后代选择。CSS不需要那么多的特异性。您想要做的是找到足够具体的后代选择器之间的平衡,以便您可以向下钻取到所需的确切元素(不希望影响样式的元素),而无需让CSS规则的选择器过多大。

版权声明:转载此文章须经 领创时代 同意,并请附上 领创时代 及本页链接http://www.leadnov.com/newsItem.aspx?id=281
创造品牌视觉体验 X 创新IT技术赋能企业
领创帮助您创新品牌战略,让品牌成为最具价值的资产。
中国·山东 青岛市市北区郑州路43号橡胶谷A栋
热线:175 6191 5976
微信:leadnov
Copyright © 2018-2020 leadnov All Rights Reserved
鲁ICP备18056479号-1站点地图

关注领创公众平台

添加官方微信

175 6191 5976