CSS选择器

最新推荐文章于 2024-10-01 23:20:42 发布

执迷原理

最新推荐文章于 2024-10-01 23:20:42 发布

阅读量51

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/ddd2501/article/details/127628585

版权

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） // 第一级 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选择器