学习HTML（十六）——CSS样式中的目标标签定位

最新推荐文章于 2023-08-30 20:03:26 发布

gc_2299

最新推荐文章于 2023-08-30 20:03:26 发布

阅读量2.1k

点赞数

分类专栏：网页编程

本文链接：https://blog.csdn.net/gc_2299/article/details/78514284

版权

网页编程专栏收录该内容

149 篇文章 11 订阅

订阅专栏

在以往的介绍中，在CSS文件中的设置都是针对某一类标签的。这种设置应用在网页中是，只要是此类标签都要应用CSS文件中该类标签的设置。这其实是一种完全覆盖的定位。除了这种定位方式，CSS还提供了其他定位方式。

1）按嵌套关系定位

如下所以的代码，如果我们想设置最里面的p标签红色，最外层的蓝色，在第一层的p为黄色，可以在css文件中按照标签的嵌套关系，从外到里一次把标签名称写下来，用空格隔开(看上去是用空格隔开的几个标签名称，其实越是靠前的标签标示它的嵌套层越靠近body标签)。然后在花括号中设置具体的属性值。CSS文件的设置如下：

<body>

<div>

<p>Hello CSS </p>

</div>

<div>

<p>Hello CSS </p>

</div>

<p>Hello CSS </p>

</body>

CSS文件设置：

{

color:blue;

}

div p

{

color:orange;

}

div div p

{

color:red;

}

效果图：

注意，标签的嵌套关系分为两种：松散嵌套关系和严格嵌套关系。松散的嵌套关系是标签路径之间还可以夹杂其他标签。比如上面的例子中如果第一个div和它的子div之间还夹杂着一个其他标签，那这不影响div div p的嵌套关系。而严格的嵌套关系是指标签路径之间没有夹杂其他的标签，是严格的从左到右的嵌套关系，这种严格的嵌套关系还要用>号来来接，也就是div>div>p，这样松散的嵌套关系就不会应用这类样式设置。

2）通配符标签*

如果你有一些属性是想让所有的标签都设置指定的值。一种方式是在CSS文件中写出每个标签然后进行设置，另一种方式是采用通配符标签*，也就在CSS文件中建立一个标签名为*的设置。在花括号中设置需要的属性。这样所有的标签都会应用这些属性值。下面的代码和效果图。代码是在第一节的基础上添加的。

{

border:1px dashed #3a5fcd;

}