css常用的选择器

1.属性选择器

使用属性选择器，你可以通过给定属性的名称或值选择所有元素，然后对它们应用样式。

示例1：下面是一个HTML行示例，该行具有“ rel”属性，其值为“ newfriend”

<h3 id="title" class="friend" rel="newfriend">David Walsh</h3>

让我们看看如何在上一行中将属性选择器用于“ rel”属性。

h3[rel="newfriend"] {
color: yellow;
}

开发人员经常在代码中使用“选择器”复选框来使用此选择器。阅读下面给出的示例。
范例2：

input[type="checkbox"] {
color: purple;
}

它也经常用于代码中的定位标记。阅读下面给出的示例。
范例3：

a[title] {
color: red;
}

2.子选择器

子代选择器允许你选择所有属于指定元素的子元素
范例1：子选择器和子代选择器之间的区别在于后者将仅选择直接子代。

div > h1 {
background-color: green;
}

范例2：

//html
<h3>子代选择器（选中直接子代元素）</h3>
<div class="example2">
    <p>p元素</p>
    <div>
      <p>div中的p元素</p>
    </div>
</div>


//scss
.example2 {
  & > p {
    color: blue;
  }
}

显示结果

image.png

3.同级选择器

通用的同级选择器（〜）不如相邻的同级选择器严格。它使你可以选择作为指定元素的同级的所有元素，即使它们并非直接相邻

4.相邻选择器

会直接选中指定元素紧跟的第一个p元素

//html
<h3>相邻选择器(会直接选中紧跟的第一个p元素)</h3>
<div class="example3"></div>
<p>第一个p元素</p>
<p>第二个p元素</p>


//scss
.example3 {
  & + p {
    color: #ff6700;
  }
}

显示结果

image.png