CSS常见选择器

一.CSS选择器

😬在开发中我们经常需要找到某个元素去添加对应的CSS，常见的选择器有如下这些种类：

通用选择器 (universal selector)
元素选择器 (type selector)
类选择器 (class selector)
id选择器 (id selector)
属性选择器 (attribute selectors)
组合 (combinators)
伪类 (pseudo-classes)
伪元素 (pseudo-elements)

二.通用选择器

🐸在一个网页中我们可能有很多的元素，但是这些元素我们想要给所有的元素设置共同的某个样式，这个时候我们就需要使用通用选择器，像如下，所有的元素都会有对应的样式内容（本质上会将这个网页的所有的元素及逆行遍历一遍，所以相应的性能会比较低）

css 复制代码

*{
  padding:0;
  margain:0;
  color:#999;
}

🦄如果需要进行对某些元素进行统一的属性设置，推荐使用这种做法：

css 复制代码

body,p,div,h2,span{
  margain:0;
  padding:0;
}

三.简单选择器

👽简单选择器是开发中使用最多的选择器,具体的使用方式如下：

css 复制代码

div{
  font-size:12px;
  color:#ffffff;
}

#box{
  font-size:12px;
  color:#ffffff;
}

.home{
  font-size:12px;
  color:#ffffff;
}

😈id选择器注意事项，在HTML文档中id值是唯一的，不能重复，id值如果使用多个单词组成，单词之间可以用中划线-，下划线_连接，也可以使用驼峰标识，最好不要使用标签名作为id值；

四.简单选择器

🥰属性选择器主要使用的有两种方式，拥有某一个属性[att]属性等于某个值[att=val]其他的了解即可；

css 复制代码

  [title] {
    color: red;
  }

  [title=bbb] {
    color: blue;
  }

  <div title="aaa">这是属性选择器的内容</div>
  <div title="bbb">这个另一个属性选择器的内容</div>

🤢需要了解的属性选择器：

attr*=val: 属性值包含某一个值val
attr^=val: 属性值以val开头
attr$=val: 属性值以val结尾
attr|=val: 属性值等于val或者以val开头后面紧跟连接符-
attr~=val: 属性值包含val, 如果有其他值必须以空格和val分割

五.后代选择器

🙈后代选择器主要有两种方式，主要包括直接后代选择器/间接后代选择器；

间接后代选择器，以空格分割home span，如下需求，给home下的span中的字体全部设置为红色；

css 复制代码

  .home span {
      color: red;
    }

直接后代选择器,以div>span这种方式分割，这种方式只能选中直接的后代元素。

css 复制代码

  .home>span {
      color: red;
    }

六.兄弟选择器

🐔兄弟选择器包含两种：相邻兄弟选择器（使用符号+连接），普遍兄弟选择器（使用符号~连接）

相邻兄弟选择器，在one后边相邻的兄弟会被赋予样式；

css 复制代码

<style>
  .son-one+div {
    color: red;
  }
</style>

<body>
  <div class="son-one">第一个兄弟</div>
  <div class="son-two">第二个兄弟</div>
  <div class="son-three">第三个兄弟</div>
  <div class="son-four">第四个兄弟</div>
</body>

普遍兄弟选择器，只要是前面这个元素的兄弟都会被赋予样式（切记，如果后边的元素不是所有兄弟共同拥有的，那么普遍兄弟选择器的选中效果会和相邻兄弟选择器一样）

css 复制代码

<style>
  .son-one~div {
    color: red;
  }
</style>

<body>
  <div class="son-one">第一个兄弟</div>
  <div class="son-two">第二个兄弟</div>
  <div class="son-three">第三个兄弟</div>
  <div class="son-four">第四个兄弟</div>
</body>

七.选择器组

😬交集选择器：需要同时符合两个选择器条件(两个选择器紧密连接)，在开发中通常为了精准的选中某个元素；

css 复制代码

<style>
  div.box {
    color: rebeccapurple;
    font-size: 20px;
  }
</style>

<body>
  <div class="box">这是第一个数据</div>
  <div class="box2">这是第二个数据</div>
</body>

🥰并集选择器：符合一个选择器条件即可(两个选择器以，分割)，在开发中通常为了给多个元素设置相同的值

css 复制代码

<style>
    span,
    div,
    p {
      font-size: 30px;
      color: aqua;
    }
</style>
</head>

<body>
  <p>这个是p元素的内容</p>
  <div>这个是div元素的内容</div>
  <span>这个是span元素的内容</span>
</body>

八.伪类

🙈伪类是选择器的一种，它用于选择处于特定状态的元素，比如我们经常会实现当鼠标放在某个元素上显示另外一个颜色，其实这个就是一个悬浮的状态。

动态伪类：（dynamic pseudo-classes）：:link :visited :hover :active :focus

css 复制代码

/* hover是鼠标停留在元素的状态 */
div:hover {
  color: aqua;
}

css 复制代码

/*  a元素从来没有被访问过 */
a:link{
  color:red;
}

css 复制代码

/* a元素被访问过的颜色 */
a:visited{
  color:green;
}

css 复制代码

/*  a元素点上去了还没有松手 */
a:active{
  color:purple
}

css 复制代码

/* input元素获取焦点 */
input:focus {
  border-color: blue;
}

目标伪类：（target pseudo-classes）：:target，当有一个URL，并且这个URL携带的有片段ID，当ID为这个元素中的ID的时候就更改这个元素中的样式，使用的非常少，了解即可，向的目标元素应用背景色：

css 复制代码

:target {
  background-color: yellow;
}

<main>
    <a href="#section1">Go to Section 1</a>
    <a href="#section2">Go to Section 2</a>
    <a href="#section3">Go to Section 3</a>
  </main>
  <div>
    <div id="section1">Section 1</div>
    <div id="section2">Section 2</div>
    <div id="section3">Section 3</div>
  </div>

语言伪类：（language pseudo-classes）：:lang()

css 复制代码

/* 表示div所有后代设置lang="en"的元素 */
 div :lang(en) {
  color: aqua;
}

css 复制代码

/* 对应元素设置为英文的样式设置 */
<style>
  .box:lang(en) {
    color: red;
  }
</style>
<main>
  测试语言伪类的内容
  <div class="box" lang="en">语言伪类的用法</div>
  <div>测试语言伪类的功能</div>
</main>

css 复制代码

/* 全局-设置为英文的内容设置字体为红色 */
:lang(en) {
   color: red;
}

元素状态伪类：:enabled :disabled :checked

css 复制代码

/* :enabled：选择可用的表单元素，即那些没有被禁用的元素 */
input:enabled {
  background-color: white;
}

/* :disabled：选择被禁用的表单元素，即那些不能被用户交互的元素。 */
input:disabled {
  background-color: lightgray;
}

/* :checked：选择被选中的表单元素，例如复选框或单选按钮。 */
input[type="checkbox"]:checked {
  border-color: green;
}

九.伪元素

🤢常见的伪元素有：

:frist-line ::frist-line可以针对首行文本进行设置

css 复制代码

.box {
  width: 800px;
  font-size: 12px;
  color: cadetblue;
}

.box::first-line {
  font-size: 16px;
  font-weight: 600;
  color: aqua;
}

<div class="box">内卷，网络流行语，原指一类文化模式达到了某种最终的形态以后，既没有办法稳定下来，也没有办法转变为新的形态，而只能不断地在内部变得更加复杂的现象
    [3]。经网络流传，很多高等学校学生用其来指代非理性的内部竞争或"被自愿"竞争 [6]。现指同行间竞相付出更多努力以争夺有限资源，从而导致个体"收益努力比"下降的现象。可以看作是努力的"通货膨胀" [2]。
    据2021年8月25日百度指数数据分析平台显示，"内卷"的整体日均搜索指数值为16999、移动日均搜索指数值为14886、最高峰值为88726
</div>

:frist-letter ::frist-letter可以针对首字母进行设置；

css 复制代码

.box {
  width: 800px;
  font-size: 12px;
  color: cadetblue;
}

.box::first-letter {
  font-size: 16px;
  font-weight: 600;
  color: aqua;
}

<div class="box">内卷，网络流行语，原指一类文化模式达到了某种最终的形态以后，既没有办法稳定下来，也没有办法转变为新的形态，而只能不断地在内部变得更加复杂的现象
    [3]。经网络流传，很多高等学校学生用其来指代非理性的内部竞争或"被自愿"竞争 [6]。现指同行间竞相付出更多努力以争夺有限资源，从而导致个体"收益努力比"下降的现象。可以看作是努力的"通货膨胀" [2]。
    据2021年8月25日百度指数数据分析平台显示，"内卷"的整体日均搜索指数值为16999、移动日均搜索指数值为14886、最高峰值为88726
</div>

:before ::before用于在一个元素之前插入其他内容，可以是文字或者图片，常通过content属性来为一个元素添加修饰性的内容。

css 复制代码

    .box {
      width: 600px;
      height: 100px;
      text-align: center;
      background-color: antiquewhite;
      line-height: 100px;
    }

    .box-inner::after {
      content: "aaa";
      font-size: 20px;
      color: aqua;
    }

  <div class="box">
    <div class="box-inner">这个是当前的内容</div>
  </div>

:after``::after用于在一个元素之后插入其他内容，可以是文字或者图片，常通过content属性来为一个元素添加修饰性内容。

css 复制代码

    .box-inner::before {
      content: "bbb";
      font-size: 20px;
      color: blueviolet;
    }
    .box {
      width: 600px;
      height: 100px;
      text-align: center;
      background-color: antiquewhite;
      line-height: 100px;
    }

  <div class="box">
    <div class="box-inner">这个是当前的内容</div>
  </div>

🐔如何使用伪元素:after或者:before来添加图标的内容,可以使用url来引用资源展示图标。

css 复制代码

.item::after{
  content:url("./image/icon.svg");
  color:green;
  font-size:20px;
}

👽伪元素的补充：

这个两个伪元素，严格意义上是一个非替换行内元素，无法设置宽高，宽高设置不生效，如果想设置宽高可以进行display的设置。
不能省略content的内容，省略content会不显示；

css 复制代码

   .box::after {
      content: "";
      display: inline-block;
      width: 15px;
      height: 15px;
      background-color: brown;
    }