XML：可扩展标记语言-CFANZ编程社区

在这里插入图片描述
文章目录:

1. 复合选择器

一个复合选择器的代码案例?

<span>span标签</span>

<div>
<span>文字颜色是绿色</span>
</div>

如何准确的找到复合选择器中某一个选择器的位置,并给他们添加样式呢?
⬇⬇⬇⬇⬇⬇
后代选择器

一个后代选择器的代码案例?

<style>
	div span {
		color: red;
}
</style>

<span>span标签</span>
<div>
<span>文字颜色是绿色</span>
</div>

注意:

后代选择器，选中所有后代,包含儿子、孙子、重孙子...

我们不想选中那么多,只想选中他的儿子怎么办
⬇⬇⬇⬇⬇⬇
子代选择器

一个子代选择器的代码案例?

<style>
	div > span {
		color: red;
}
</style>

<span>span标签</span>
<div>
<span>文字颜色是绿色</span>
</div>

多个标签使用相同的样式,缩写代码量的写法
⬇⬇⬇⬇⬇⬇
并集选择器

<style>
div,
p,
span {
color: red;
}
</style>

<div> div 标签</ div>
<p>p 标签</p>
<span>span 标签</span>

注意:

规范书写要逗号换行

只想让同一个类的某种标签显示某种样式,而不是这个类的全部
⬇⬇⬇⬇⬇⬇
交集选择器

一个交集选择器的应用场景代码?

<p class="box">p标签,使用了类选择器box</p>
<P>p标签</p>
<div class="box">div标签,使用了类选择器box</div>

我们的目标是让p标签中的box类显示为红色

p.box{
color: red ;
}

注意:如果交集选择器中有标签选择器，标签选择器必须书写在最前面。

一个使用hover的代码?
鼠标悬停文字上方会变红

 <style>
    div:hover{
        color: red;
    }
    </style>

<body>
<div>这是一段文字</div>
</body>

超链接一共有四个状态

注意:

如果要给超链接设置以上四个状态，需要按LVHA的顺序书写。
在工作中,一般情况下,只用hover.