笔记26：基础选择器_单击“子元素选择器”按钮时,设置类名为“ol02”元素的第一层子元素li的字体颜色-CSDN博客

本文链接：https://blog.csdn.net/m0_49869756/article/details/120092245

C1任务-26：基础选择器

任务背景

CSS（层叠样式表）选择器是CSS规则的一部分，用来指定需要设置样式的HTML元素。通过选择器可以实现CSS对HTML元素的一对一、一对多、多对一的控制

任务训练

在这里插入图片描述

1.通配选择器
可以与其他选择器相结合，选择某元素下的所有元素

例.box*{color:#000;}表示为选择类名为box的元素的所有后代，添加一个黑色的字体颜色

由于每个浏览器对元素的默认边距不一致，通配选择器常用于reset样式文件中，覆盖浏览器的默认样式

*{
margin:0;
padding:0;
border:0;
}

2.标签选择器
标签选择器也常用于reset样式文件中，用于清除元素的默认样式，如li标签的小圆点、a标签的下划线等

3.id选择器
id属性的属性值应当是当前文档唯一

4.类选择器
class属性值在文档中可以重复

5.组合选择器
通过间隔符将基础选择器连接起来，实现组合选择的效果

选择器间隔符描述
后代选择器空格选取该元素的后代元素
子代选择器 >大于号选择该元素的第一级子元素
相邻选择器 +加号选择该元素之后相邻第一个元素，且两者具有相同的父元素
兄弟选择器 ~波浪号选择该元素之后的同层级元素

例：有以下代码，选择所有类名为title的元素后的第一个

元素，将其字体颜色改为红色，如图1所示，可使用相邻选择器选择元素设置样式

<body>
<pclass="title">CSDN能力认证中心</p>
<p>C1见习能力认证</p>
<span>C4专项能力认证</span>
<p>C5全栈能力认证</p>
</body>
.title+p
{color:red;
}

练习
1.想要选择ol元素的所有li元素，都设置字体和字体颜色样式，请补齐这段代码________{color:#000000;font-family:MicrosoftYaHei;}

<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
</ul>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

使用后代选择器，可以选取该元素的所有后代元素
在上题中ol元素中li元素均为第一级子元素，所以也可使用子代选择器
答：olli或ol>li