Day2课程 1-复合选择器

课程内容：复合选择器、CSS特性、背景属性、显示模式

复合选择器

//只要是选择器，作用就是找标签。
复合选择器就是多个基础选择器，为了更准确高效地选择目标元素（标签），通过不同的方式组合而成的选择器。

后代选择器

选中某元素所有的后代元素，写法是父选择器 子选择器 {CSS属性}，用空格隔开。（反正就是套娃，被套住的就是被选择的）
案例中，<div>内层的<span>标签均被选中，包括内层的内层
//<span>标签是块元素，和<div>一样都是盒子，只是后者会换行，前者不会。

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

<span>span 标签</span>
<div>
	<span>这是 div 的内层 span</span>
</div>

子代选择器

写法是父选择器 > 子选择器 {CSS属性}，用>隔开。

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

<div>
	<span>这是 div 里面的 span</span>
	<p>
	<span>这是 div 里的 p 里的span</span>
	</p>
</div>

并集选择器

选择多组标签设置相同的样式。

写法：选择器1,选择器2,,...,选择器N { CSS属性}，选择器之间用,隔开，不限制选择器数量

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

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

// 这里换行之后更直观，也更方便删改

交集选择器 - 了解

选中同时满足多个条件的元素

写法：选择器1选择器2{CSS属性}，选择器之间连写，没有任何符号（如果交集选择器中有标签选择器，标签选择器必须书写在最前面）

<style>
	p.box {
		color: red;
	}
</style>

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

伪类选择器

伪类表示元素状态，选中元素的某个状态设置样式。

鼠标悬停状态：选择器:hover{ CSS属性}，注意这里不要在冒号前后加空格

    <style>
        a:hover {
            color: orange;
        }

        .box:hover {
            color: green;
        }
    </style>
	
<body>
    <a href="#">a 标签</a>
    <div class="box">div 标签</div>
</body>

伪类 - 超链接（拓展）
超链接一共有四个状态
○ :link 访问前；:visited 访问后；:hover 鼠标悬停；:active 点击时（激活）
○ 如果要给超链接设置以上四个状态，需要按照 LVHA 的顺序书写
○ 实际工作中，只需要一个 a 标签选择器a {css样式}设置超链接的样式，再给其hover状态特殊设置a:hover {CSS样式}即可。

常用的结构化伪类选择器有：

:root选择器、:not选择器、:only-child选择器、:first-child选择器、:last-child选择器
:nth-child选择器、:nth-child(n)选择器、:nth-last-child(n)选择器、:nth-of-type(n)选择器
:empty选择器、:target选择器。
posted @ 2025-05-23 17:49  岑素月  阅读(16)  评论(0)    收藏  举报