前端基础之CSS选择器

最近写页面感觉有些选择器已经忘了，于是乎重新整理了一遍css选择器。你们还记得多少种选择器呢，每一种选择器的用法都还记得吗

那么下面我们一起来复习一下吧

ID选择器

以#加id名来表示, id是唯一的，同一个页面里不允许多个ID相同的元素。一般只用来强调某个页面或者某个模块，多个功能相同的模块建议使用类选择器。

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

<!--css-->
#box{
    color: #fff;
    background: #000;
}

类选择器

以.加上class名称来表示，下面以class 名称为 item 的元素为例

<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;
}

标签选择器

直接标签名作为选择器的名称，如果使用标签选择器，那么该页面所有使用该标签的元素样式都会改变，一般不建议使用。

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

<!--css-->
p {
    color: red;
}

属性选择器

• [attr]表示选择所有带有attr属性的标签

<p title="hello world"> hello world </p>
<p title="test"> 你好呀~ </p>

<!--css-->
p[title] {
  color: red;
}

• [attr=xxx]表示用来选择有attr属性且属性值等于xxx的元素，注意属性值必须完全相等

<input class="input text" type="text" value="hello world"/>

<!--css-->
input[type=text] {
  color: red;
}
// or
input[class="input text"]{
  color: red;
}

• [attr~=xxx] 表示包含某个类的元素，多个类中的其中一个类名必须和xxx相等

<input class="input text" type="text" value="hello world"/>

<!--css-->
input[class~=input] {
  color: red;
}

• [attr|=xxx] 表示选择属性值为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]表示选择以xxx属性开头的元素

<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]表示选择属性值中包含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的说法。 以seletorA空格selectorB形式，表示在selectorA内部向下查找所有所有符合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权重表：

子元素选择器

以selectorA>selectorB的形式，表示只查找指定元素的直接子元素，层级为一层。

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

相邻兄弟选择器

以selectorA+selectorB的形式，表示选择紧接在指定元素后的元素，且二者有相同父元素。 注意他只有一个兄弟呀~

<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字体都变红
}

交集选择器

以selectorA.selectorB形式，表示既符合选择器A又符合选择器B的元素

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

并集选择器

以seltorA,selectorB逗号分隔的形式，表示不同的选择器A和选择器B的元素都应用同一种样式。

<div class="box1"> 段落1 </div>
<div class="box2"> 段落2 </div>
<!--css-->
.box1, .box2 {
  color: red;
}

伪类选择器

以selector加:的的形式，CSS 伪类用于向某些选择器添加特殊的效果，这里只列举常见的几种：

• 表示状态：

• 表示结构:

• 表单相关:

伪元素选择器

CSS 伪元素用于将特殊的效果添加到某些选择器

选择器权重计算

摘抄：

这个计算公式的形式就是这样，但有几点要注意：
1、这个计算模型仅供理解样式优先级关系，不能代表浏览器里真实的计算方法。
2、权重值的计算不能越级，比如选择器 A 只有 1 个 ID 选择器，权重就是 100；选择器 B 用了 20 个类选择器，权重值是 200。这个时候如果两个选择器对应的样式作用在同一个 DOM 节点上，那么还是选择器A会生效，因为它的选择器级别更高。
3、如果两个选择器 A 和 B 是同级别选择器，并且最终计算的权重值也相同，那么这两个选择器谁在后面谁优先级高。