|
1.选取器的功能 将所必须的元素选中，能够操作这些元素的CSS样式2.基本选取器归类（常用选取器）
// 语法格式
选取器{
属性1 ： 值1；
属性2 ： 值2；
...
}
元素选取器以元素的名字做为选取器id选取器以id名字做为选取器区别class: id是身份证，拥有独一性，因此不可同期设置多个相同的id名id名字：以“#”号开头class选取器以class名字做为选取器能够存在多个相同的class名字class名字：以“.”号开头后代选取器（多个选项用空格隔开）便是选取元素内部某一种元素的所有元素：包含子元素和其他后代元素<body>
<div class="father">
<span class="son1"></span> //选中它 -----> .father span{} 或 .father .son1{}
<div class="son2"></div>// 选中它 -----> .father div{} 或 .father .son2{}</div>
</body>
群组选取器（多个选项用逗号隔开）指同期对几个选取器进行相同的操作<body>
<span class="son1"></span>
<div class="son2"></div>
</body>// 选中body里面的两个标签 ----> span,div{} 或 .son1,.son2{}等方式
3.层次选取器归类（进阶选取器） 后代选取器（ M N ）选取M元素内部后代的N元素（所有N元素，包含子代元素或孙代元素）<body>
<div>
<p>子元素</p> （1）
<p>子元素</p> （2）
<div>
<p>孙元素</p> （3）
<p>孙元素</p> （4）
</div>
<p>子元素</p> （5）
</div>
</body>
div p{} -----> 会选中 （1）（2）（3）（4）（5）
子代选取器（ M > N ）选取M元素内部子代的N元素（所有第 1 级N元素）<body>
<div>
<p>子元素</p> （1） // 第1级 p元素
<p>子元素</p> （2） // 第二季 p元素
</div>
</body>
div > p{} ------> 会选中 (1)
兄弟选取器（ M ~ N）选取M元素后的所有同级N元素(只选取后面的兄弟元素，不选取前面的兄弟元素)<body>
<div>
<p>子元素</p> （1）
<p>子元素</p> （2）
<div id="brother_div">
<p>孙元素</p> （3）
<p>孙元素</p> （4）
</div>
<p>子元素</p> （5）
<p>子元素</p> (6)
</div>
</body>
#brother_div ~ p {} -----> 会选中(5)(6)，不会选中（1）（2）
相邻选取器（ M + N）(区别兄弟选取器)选取M元素相邻的下一个N元素（M、N是同级元素）常用场景：用于两个元素之间实现效果<body>
<div>
<p>子元素</p> （1）
<p>子元素</p> （2）
<div id="brother_div">
<p>孙元素</p> （3）
<p>孙元素</p> （4）
</div>
<p>子元素</p>（5）<p>子元素</p> (6)
</div>
</body>
#brother_div + p {} ------> 选中 (5)
4.:first-letter和:first-line选取器 :first-letter选取器选中元素内容的“第1个字”或“第1个字母”:first-line选取器（只针对文字，不针对字母）选中元素内容的“第1行文字”
| 
发表于 2024-6-30 11:05:34
