CSS：HTML标签选择器
我们已经知道，CSS为HTML制定元素样式。CSS中的选择器，指CSS为HTML某类特定元素制作一个样式，这个样式由HTML在代码中指定使用，例如，假设我们有一个 p 标签：<p class="iBold">文本</p>
p标签在此通过 class 关键字引用了CSS制定的一个类选择器，如此，p标签的文本将以CSS样式表中 .iBold 所设定的样式呈现。CSS大约是这样制定样式的：
<style>
.iBold {
font-size: 14px;
font-weight: bold;
}
</style>
以上是复习。此次我们要讨论的标签选择器。
HTML有很多标签，我们最常用的 div、p、h1(h2 ...)、table等，它们就是HTML标签。标签名称是固定的，HTML规定有的才是合法的，不能硬生生地去造一个标签，那将是不仅不合法，浏览器也将无法识别。
HTML标签都有自己的默认的外在表现，可能不能满足需求，所以通过CSS来设置样式。CSS给HTML的元素制定样式需要一个名称以便HTML能够通过名称调用，这个名称就是选择器，用HTML标签命名的选择器则是标签选择器，它使用的名称对应于HTML标签的名称：
body { ... }
div { ... }
a { ... }
h3 { ... }
p { ... }
上面示例，红色部分是选择器名称，它们和HTML实际的标签名称是一致的，也必须是一致的。
标签选择器还可以用一个通配符来表达所有HTML标签的共性样式： * { ... } 。星号 * 表示“所有的”的意思。
请特别注意，在论坛里发帖，必须慎用标签选择器，因为，HTML文档流中，后面制定的CSS样式被视为是最新样式的改变，会被优先执行，从而会导致整个页面的原有设定受到破坏。慎用不是不能用，我们可以这样封装我们帖子的标签选择器：
#fukuang { ... }
#fukuang a {
color: red;
text-decoration: none;
}
<div id="fukuang">
<a href="http://gxblk.byethost11.com/">黑马草原</a>
</div>
上面示例，我们把 a 标签选择器置于 #fukuang 父元素之中，这样，a标签选择器只作用于父元素 #fukuang 下的 a 子元素，不会破坏整个页面的其他 a 标签事先设定的样式。也就是说，我们制定的帖子里用到的标签选择器，必须限定于指定父级元素之下。
这个好，为了防止定义的标签样式影响论坛原本页面的设定，可以将标签选择器置于父框中，这样就会被限制在父框下，不会造成影响了{:4_187:} 我好像在前面的帖子里看到过在父框下定义的audio标签。 黑黑辛苦了，这些知识都很实用{:4_187:} 所有的标签都可这样放在父框里的么？ 本帖最后由 马黑黑 于 2022-2-11 12:47 编辑
红影 发表于 2022-2-11 10:25
所有的标签都可这样放在父框里的么？
不是所有的，像 body 就只能做其他发帖用的标签的父层，它不可以做子层。
绝大多数标签都可能拥有父层、子层等身份，但也有一些事特别设定的：
<div>
<div></div>
</div>
上面，同是div标签，红色的是子层。
<ul>
<li>1</li>
<li>2</li>
</ul>
上面，规定好的，ul 做父层，li 做子层。
红影 发表于 2022-2-11 10:15
我好像在前面的帖子里看到过在父框下定义的audio标签。
这个我有做过，还有网易云音乐的 iframe 也这么操作过 马黑黑 发表于 2022-2-11 12:48
这个我有做过，还有网易云音乐的 iframe 也这么操作过
嗯，到现在才知道这样做的道理{:4_173:} 马黑黑 发表于 2022-2-11 12:46
不是所有的，像 body 就只能做其他发帖用的标签的父层，它不可以做子层。
绝大多数标签都可能拥有父层 ...
这个不是在css里规定的，是html里也可以定的啊。 红影 发表于 2022-2-11 13:18
这个不是在css里规定的，是html里也可以定的啊。
HTML才能显示出元素之间的父子关系 红影 发表于 2022-2-11 13:17
嗯，到现在才知道这样做的道理
理解需要一个过程 马黑黑 发表于 2022-2-11 13:19
HTML才能显示出元素之间的父子关系
嗯嗯，前面学的是在css里就设定了和父容器相关。一下子没反应过来。 马黑黑 发表于 2022-2-11 13:20
理解需要一个过程
嗯，先看到，留点印象，然后在学习中一点点理解原理。 红影 发表于 2022-2-11 20:08
嗯，先看到，留点印象，然后在学习中一点点理解原理。
对的，不急的 红影 发表于 2022-2-11 20:07
嗯嗯，前面学的是在css里就设定了和父容器相关。一下子没反应过来。
嗯，这个要看 HTML 的结构的 马黑黑 发表于 2022-2-11 20:30
对的，不急的
在玩中学习，是最好的。轻松，没负担。 马黑黑 发表于 2022-2-11 20:31
嗯，这个要看 HTML 的结构的
嗯嗯，随着慢慢跟着看，慢慢感受。 红影 发表于 2022-2-11 21:02
嗯嗯，随着慢慢跟着看，慢慢感受。
好的好的 红影 发表于 2022-2-11 21:02
在玩中学习，是最好的。轻松，没负担。
也不必要有负担，大不了学不会 马黑黑 发表于 2022-2-11 22:32
好的好的
这是一全新的世界。
页:
[1]
2