CSS选择器详解

CSS推出了很多选择器，方便在开发过程中精准更改元素样式。本博客详细讲解一下各选择器。

一、适配符选择器

选择所有元素
语法: * { }

*{
	background-color: red;// 将所有元素背景变为红色
}

二、标签选择器

选择所有相同类型标签
语法: tag { }

div{
	background-color: red;// 将所有div标签背景变为红色
}

三、类选择器

定义类名样式，通过类名可以引用
语法: . { }

<div class="back"></div>

.back{
	background-color: red;// 将所有引用back的元素背景变为红色
}

四、ID选择器

定义ID样式，通过ID名可以引用
语法: # { }

<div id="back"></div>

#back{
	background-color: red;// 将所有引用back的元素背景变为红色
}

五、后代选择器

选择元素所有后代
语法: ancestor offspring{ }

ul li{
	font-size: 16px;// ul下所有li字体大小为16px
}

六、相邻（兄弟）选择器

选择元素的相邻（往下）兄弟元素
语法: brother+brother { }

<p>brother1</p>
<div>
	<p>children</p>
<div>
<p>brother2</p>
<p>brother3</p>

// 以div为例
div+p{
	color: red;// brother2变成红色，因为它是往下最靠近div的brother
}
div+p+p{
	color: red;// brother3变成红色
}

七、子选择器

选择元素所有子元素
语法: father > chlidren

// 子选择器与后台选择器有什么区别，这里举一个例子
<ul>
  <li>1</li>
  <div>
    <li>2</li>
  </div>
  <li>3</li>
</ul>

ul > li{
	color: red;// 1 3变红
}
ul li{
	color: red;// 1 2 3都变红
}
// 子选择器是只选择该元素下第一层级元素
// 后台选择器是选择该元素下所有层级元素

八、属性选择器

选择元素的属性
语法: tag[attribute] { }

<a href="#">href</a>
<a name="#">name</a>

a[href]{
	color: red;// href变，因为它有href属性
}

九、伪类选择器

选择元素的伪类
语法: tag:pseudo-class { }

a:link{
	color: red;// 所有未访问过的链接变成红色
} 
// 伪类有很多，具体可以百度

十、伪元素选择器

选择元素的伪元素
语法: tag::pseudo-element { }

p::first-line{
	color: red; // p元素第一行变成红色
}
// 伪元素有很多，具体可以百度

十一、综合选择器

各种选择器不是只能使用一种，他们可以搭配使用，举一个例子：

.el-popper[x-placement^="bottom"] .popper__arrow::after {                           
  margin-left: -6px;
  border-top-width: 0;
  border-bottom-color: #23263D !important;
}
// 即选择 使用el-popper类样式的元素里有x-placement^="bottom"属性的后代中 使用poppei__arrow类样式元素的after伪元素