CSS选择器，你真的都了解吗？

ID 选择器

由 # 加上 id-name 表示。 ID 是唯一的。同一页面上不允许有多个具有相同 ID 的元素。通常它仅用于突出显示特定页面或模块。建议对具有相同功能的多个模块使用类选择器。

<div id="box"> 我是box </div>

<!--css-->
#box{
    color: #fff;
    background: #000;
}
复制代码

类选择器

由.加上classname表示。下面以类名为element的元素为例

<ul>
    <li class="item"> a </li>
    <li class="item"> b </li>
    <li class="item"> c </li>
    <li class="item"> d </li>
</ul>

<!--css-->
.item {
  margin: 0;
  padding: 0;
}
复制代码

标签选择器

Direct。标签名称用作选择器的名称。如果使用标签选择器，页面上所有使用该标签的元素的样式都会改变。一般不推荐。

<p> hello world </p>
<p> 你好呀~ </p>

<!--css-->
p {
    color: red;
}
复制代码

属性选择器

• [attr]表示选择所有具有属性

  <p title="hello world"> hello world </p>
  <p title="test"> 你好呀~ </p>
  
  <!--css-->
  p[title] {
    color: red;
  }
  复制代码

  • [attr=xxx]的❝❝标签] 表示已使用 使用 选择项目 Aattr属性和属性值等于xxx。请注意，属性值必须完全相等。几个类中其中一个类名必须等于 xxx

  <input class="input text" type="text" value="hello world"/>
  
  <!--css-->
  input[class~=input] {
    color: red;
  }
  复制代码

  • [attr|=xxx] 表示选择的属性值为 （这里必须相等）或者元素以xxx-属性

  <div class="box"> box <div>
  <div class="box-sm"> box <div>
  
  <!--这里的div不会生效, 这里必须是 box- 开头-->
  <div class="box_lg"> box <div>
  <!--css-->
  div[class|=box] {
    color: red;
  }
  复制代码

  • [attr^=xxx]表示选择以 e

  <div class="box"> box <div>
  <div class="box-sm"> box <div>
  <div class="box_lg"> box <div>
  <!--css-->
  div[class^=box] {
    color: red;
  }
  复制代码

  • [attr$=xxx ] ​​ 表示选择元素以 ​​xxx 属性

  <div class="box"> box <div>
  <div class="box red blue"> box <div>
  <div class="box _red"> box <div>
  <!--css -->
  <!--这里以red结尾的样式类必须写在最后，否则有可能会被后面的样式覆盖-->
  div[class$=red] {
    color: red;
  }
  复制代码

  • [attr*=xxx]e 表示选择 e 值 xxx 所有元素的通配符选择器

  <div class="box-sm"> box <div>
  <div class="box sm blue"> box <div>
  <div class="box _sm"> box <div>
  <!--css -->
  div[class*=sm]{
    color: red;
  }
  复制代码

  通配符 如名称建议，它应用所有标签。将样式应用于所有元素会影响浏览器的渲染效率。实际开发中不建议使用。

   * {
     margin: 0;
     padding: 0;
   }
  复制代码

  后代选择器

  也称为派生选择器，派生选择器是CSS2的说法。以selectorAspaceselectorB的形式表示在选择器A内部，向下搜索所有选择器中的元素selectorB 无论如何保持不变层次结构的深度将会受到影响。例如：

  <div class="box">
      <p> 段落 </p>
      <div class="outer">
          <div class="inner"> 这是一段内容呀~ </div>
      <div>
  </div>
  
  <!--css-->
  .box .inner {
    color: red;
  }
  
  复制代码

  当然，后代选择器可以使用叠加，如：

  .box .outer .inner {
    color: red;
  }
  复制代码

  但是这是值得的注意：CSS选择器匹配，从右到左越深CSS选择器，搜索效率越低，权重也太低，可能会被其他样式覆盖。建议根据需要使用。附css权重表：

  选择	使用	权重值
  ！重要	放在属性值后面！例如port！	10000
  内联样式	style="xxx"	1000
  ID选择器	#box	100
  类、伪类、属性选择器	.box, :hover, div[class=box]♿或-选择元素选择器	p、:before	1
  通配符 * 子选择 + 同级选择器 ~	小	0

  子元素选择器形式为 selectorA>selectorB 表示唯一的直接子元素由子元素设置。级别是一级。

  <div class="box">
      <p> 段落 </p>
      <div class="outer">
          <p> 这是一段内容呀~ </p>
      <div>
  </div>
  <!--css-->
  .box > p {
    color: red; // 这里只会作用在段落上
  }
  复制代码

  相邻兄弟选择器

  的形式为selectorA+选择，两者有相同的父元素 。请注意，他只有一个兄弟ah~

  <div class="main">
    <h1>标题</h1>
    <p>段落</p>
  </div>
  <!--css-->
  h1 + p {
    color: red; // 段落字体变红色
  }
  复制代码

  兄弟选择器

  和selectorA selectorB 形式

  表示选择给定元素中满足条件全部的 同级元素，可以有 多个兄弟

  <div class="main">
    <h1>标题</h1>
    <p>段落1</p>
    <p>段落2</p>
  </div>
  <!--css-->
  <!--符合两个条件：1：h1的兄弟元素； 2：凡是p标签包裹的-->
  h1 ~ p {
    color: red;  // 段落1、2字体都变红
  }
  复制代码

  将选择器

  与 ❝相交。 形状选择器B表示匹配选择器A 匹配选择器B的元素

  <ul>
    <li class="item"> btn1 </li>
    <li class="item active"> btn2 </li>
  </ul>
  <!--css-->
  .item.active {
    color: red;  // 表示有active类的，又有item类的。
  }
  复制代码

  和并集选择器

  以逗号分隔，形式为seltorA ,,B 选择器 B 中的元素全部使用相同的样式。pseudo-selector以selector的形式使用：

  --e.g。用于为某些选择器添加特殊效果。更多类型：

  • 表示状态：

  选择	角色	栗子
  x：链接已访问链接x：已访问	已访问链接	a:已访问
  x:hover	鼠标悬停在链接上	a:hover
  x:active	所选链接:	1000
  x:focus	所选元素处于焦点时的样式	ul li :first-child
  x:last-child	最后一个子元素是 x	ul li:last-child
  x:nth- child(n)	子元素 x	ul 位于从底部开始的第 n 个位置 li:nth-last-child(2)
  x:only-child	唯一的子元素是 x	a span:only- child x :checked	检查输入状态（值为 true 或 false）	input:checked
  x:disabled	表单元素是否禁用（值为 true 或 false:dd） x:必填	设置并指定何时需要表单元素 style	INPUT：必需的伪元素选择器 用于为某些选择器添加特效的 CSS 伪元素 选择器 功能 栗子 x: :之后 在元素 x 的内容之前插入新内容 a:after x::before 在元素行内容之后插入新内容 使用元素第一行文本的样式p :first-line x::first-letter 是元素文本中的第一个字母或单词 使用样式 p:first-letterx: 选择 将样式 input:selection 添加到元素 .im/post/5e86f04c51882573b7536afa 。商业转载请联系作者获取授权。非商业转载请注明来源。