CSS的选择器_css选择器-CSDN博客

本文链接：https://blog.csdn.net/m0_52083530/article/details/122587227

本篇分享是总结了CSS的选择器，如果在看的过程有任何问题都可以评论或者私聊我哦！

概念：用于“查找”（或选取）要设置样式的 HTML 元素。（CSS要作用的标签，标签名就是选择器）

分类：基本选择器和高级选择器

基本选择器：

标签选择器：针对一类标签
ID选择器：针对一个特定的标签使用
类选择器：针对你想要的所有标签使用
通用选择器（通配符）：针对所有的标签都适用

高级选择器

后代选择器：可以选择作为某元素后代的元素（用空格隔开）
交集选择器：用.隔开
分组选择器（并集选择器）：选取所有具有相同样式定义的 HTML 元素（用逗号隔开）
伪类选择器：根据特定状态选取元素

接下来我们讲解这8种选择器

一、基本选择器

1、标签选择器：选择器名代表html的标签

格式：标签名{}

用处：我们可以根据标签选择器来对我们需要有共同属性的标签进行设置

所有的标签，都可以是选择器。比如ul、li、dl、input、div，span等。

实例

页面上的所有 <p> 元素都居中对齐，文本颜色变为红色

<style>
        p{
            text-align: center;
            color: red;
        }
    </style>
<body>
    <p>
        今天天气真好
    </p>
    <p>
      适合出去玩
    </p>
    <p>
        冲冲
    </p>
</body>

2、ID选择器：使用 HTML 元素的 id 属性来选择特定元素

格式： #id名{ }

元素的 id 在页面中是唯一的，因此 id 选择器用于选择一个唯一的元素（不能出现相同的id）

id 名称

标签的名字，可以任取，但是规则：

（1）只能有字母、数字、下划线。（只能以字母开头）
（2）不能和HTML标签同名。比如id不能叫做body、div、。
（3）大小写严格区

实例

将应用于 id="box1" 的标签：

    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
   <body>
   <!-- ID选择器 -->
  <div id="box1">

  </div>
  </body>

3、类选择器：选择有特定 class 属性的 HTML 元素

格式：.类名{ }(类名与id名规则一样）

所有带有 class="center" 的 HTML 元素将为红色且居中对齐：

.center {
  text-align: center;
  color: red;
}
<div class="center">
<p>你好</p>
</div>

也可以指定只有特定的 HTML 元素会受类的影响

只有具有 class="center" 的 span 元素会居中对齐：

span.center {
  text-align: center;
  color: red;
}

同一个标签可以使用多个类选择器，用空格隔开

<h2 class="box1  box2">你真美</h2>

不能写成：

<h2 class="box1" class="box2">你真美</h2>

那有的人就会问了，那ID选择器和类选择器，选哪个更好呢？

答案是尽可能选择类选择器，在特殊情况使用ID选择器

在使用时我们应该记住，在CSS中尽量用类去设置属，在Js中用id产生行为。

Iid可以供js或其它脚本程序来访问该元素对象，如果css和js都在用同一个id，会出现不好沟通的情况

所以对于ID选择器和类选择器，在今后的使用中，除非特殊情况去使用ID选择器，不然的话用类选择器哦！

4、通用选择器：将匹配任何标签

使用通配符：*

用处：做网页时，当我们添加一些标签以后，打开网页，可以看到，标签旁边会有一小段间距，因为网页默认的外边距为8

如图

因此我们想要标签的外边距为0，可以使用通配符*

<style type="text/css">
/*标签的外边距都为0*/
*{
    margin:0px;
    padding:0px;
}
</style>

但是实际开发中，不建议使用通配符，原因：

1：增加代码量；因为它重置了所有元素的样式，包括不需要重置的样式，如table
2：在使用 *{padding:0;margin:0;}时，所有的标签都会被遍历一遍，当网站较大时，写的样式比较多，这样会大大的加强了网站运行的负载，使得网站加载的时候，要很长的一段时间。

二、高级选择器

后代选择器：可以选择作为某元素后代的元素（用空格隔开）
交集选择器：用.隔开
分组选择器（并集选择器）：选取所有具有相同样式定义的 HTML 元素（用逗号隔开）
伪类选择器：根据特定状态选取元素

1、后代选择器（又称为包含选择器）：可以选择作为某元素后代的元素

用空白隔开，要求必须从右向左读选择器

语法解释

h1 em 选择器可以解释为 “作为 h1 元素后代的任何 em 元素”。如果要从左向右读选择器，可以换成以下说法：“包含 em 的所有 h1 会把以下样式应用到该 em”。

只对 h1 元素中的 em 元素应用样式:

h1 em {color:green;}

上面这个规则会把作为 h1 元素后代的 em 元素的文本变为绿色，其他的em 文本（如段落或块引用中的 em）则不会被这个规则选中：

<h1>This is a <em>important</em> heading</h1>
<p>This is a <em>important</em> paragraph.</p>

有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的，（含类选择器、id选择器都是可以的）

例如，如果写 ul em，这个语法就会选择从 ul 元素继承的所有 em 元素，不论 em 的嵌套层次多深。

因此，ul em 将会选择以下标记中的所有 em 元素：

<ul>
  <li>List item 1
    <ol>
      <li>List item 1-1</li>
      <li>List item 1-2</li>
      <li>List item 1-3
        <ol>
          <li>List item 1-3-1</li>
          <li>List item 1-3=2</li>
          <li>List item <em>1-3-2</em></li>
        </ol>
      </li>
      <li>List item 1-4</li>
    </ol>
  </li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>

在这边我们来再讲一个很像的选择器叫做-子元素选择器

子元素选择器：只能选择作为某元素子元素的元素

符号：>

不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，则使用子元素选择器

如果从右向左读，选择器 h1 > strong 可以解释为“选择作为 h1 元素子元素的所有 strong 元素”。

选择只作为 h1 元素子元素的 strong 元素，可以这样写：

h1 > strong {color:red;}

这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

子结合符两边可以有空白符，是可选的。

h1 > strong
h1> strong
h1 >strong
h1>strongh

子元素选择器能够选择：

<div>

<h2>Hello</h2>

</div>

不能选择：

<div>

  <ul>

   <li>

    <h2>嗯</h2>

   </li>

  </ul>

</div

2.交集选择器

格式

        选择器1选择器2{
        属性: 值;
        }

用法如下

div.box1{

background: pink;

}

div.box1

含义：选择div中所有class值为"box1"的元素

所有类名为box1的div都被添加了样式，但是类名不为box1的div并没有被添加样式，类名为box1，但是不是div的元素也没有被添加样式。

注意区分，没有空格的div.box1（交集选择器）和有空格的div .box1后代选择器）

交集选择器并没有空格。

3、分组选择器（并集选择器）：选取所有具有相同样式定义的 HTML 元素

符号:用逗号隔开

让 h2 和段落p都有灰色：

h2, p {color:gray;}

将 h2 和 p 选择器放在规则左边，然后用逗号分隔，就定义了一个规则。其右边的样式（color:gray;）将应用到这两个选择器所引用的元素。如果没有这个逗号，那么规则的含义将完全不同。（没有逗号，变成空格就为后代选择器）

可以将任意多个选择器分组在一起，对此没有任何限制。

想把很多元素显示为灰色：

body, h2, p, table, th, td, pre, strong, em {color:gray;}

在这边补充一个叫-相邻兄弟选择器

相邻兄弟选择器：可选择紧接在另一元素后的元素，且二者有相同父元素。

符号：+

要增加紧接在 h1 元素后出现的段落的上边距：

h1 + p {margin-top:50px;}

这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。

我们来分析一下

<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
</div>

分析如下：