css选择器详解

目录

1、基础选择器

（1)通用选择器（通配选择器）

（2）标签选择器

（3）id选择器

（4）类选择器

（5）群组选择器

2、关系型选择器

1、后代选择器

2、兄弟选择器、相邻选择器

3、伪类选择器

（1）、鼠标悬停

（2）、点击激活

（3）、:link和:visited

（4）、获取焦点

4、伪元素

 （1）::before

（2）::after

（3）content

---

1、基础选择器

（1)通用选择器（通配选择器）

当前页面上的所有标签都会应用该样式

* {
    margin:0;
    padding:0;
}

优先级非常低，性能低

（2）标签选择器

直接使用标签名作为选择器

div {
    color:red;
}
p {
    color:blue;
}

优势是快捷，选中的所有标签都会渲染该样式

劣势是选择太广泛，不利于项目使用

优先级权重值1（最低）

（3）id选择器

#ss{
    color:red;
}
<div id="ss"></div>

先要在标签中加入id属性

优先级很高，权重100

在一般的项目中，尽量不使用id选择器，复用性很差

（4）类选择器

.aa{
    width:20px;
    height:12px;
}
<div class='aa'> </div>

类选择器需要在标签中天气class属性

类选择器复用性高，在项目中经常使用

优先级的权重10

（5）群组选择器

span，p{
    color:red;
}
<span>红色</span>
<p>红色</p>

多个选择器之间用逗号连接，使用相同的样式

群组选择器不限定选择器必须是同一个类型的

2、关系型选择器

1、后代选择器

div span{
    color:red;
}


<div>
     <span>子</span>
</div>



ul>li>span {width: 22px;}
<ul>
	<li>
		<span>小明</span>
	</li>
</ul>

两种写法

①先代选择器 后代选择器{
    样式
}②先代选择器>后代选择器{
    样式
}

 后代选择器需要在先代选择器后加空格连接后代选择器，后代选择器值的是当前标签中嵌套的所有标签

劣势：易点错空格

结构简单

2、兄弟选择器、相邻选择器

//兄弟选择器
.b~li {
	color: blue;
}
//相邻选择器
input+label {
	color: red;
}

<ul>
	<li class="a">亮亮</li>
	<li class="b">涛桑</li>
	<li>小新</li>
	<li>明明</li>
</ul>
<div>
	<input type="text">
	<label>该用户已注册</label>
</div>

兄弟选择器指的是后面的选择器，并不包括本身

相邻选择器是指的是紧挨着的兄弟元素

3、伪类选择器

（1）、鼠标悬停

/* 对元素的基础样式渲染(悬停前) */
.box {
	width: 150px;
	height: 50px;
	background-color: yellow;
}
/* 再增加伪类，触发后的样式 （悬停后）*/
.box:hover {
	background-color: red;
}

:hover当鼠标移入到元素的范围内时，叠加元素的样式。

如果是触摸屏（不存在鼠标）:hover就会呈现不同的效果 

（2）、点击激活

.box:active {
	background-color: blue;
}

 :active鼠标按住元素不松开，就会触发激活的伪类

（3）、:link和:visited

/* a标签未激活前的状态 */
a:link {color: green;}
/* a标签激活之后的状态 */
a:visited {color: darkorange;}

• :link伪类是用来选中元素未激活前（访问前）的链接样式

• :visited伪类用来选中元素激活后（访问后）的链接样式

• 注意事项

• a标签伪类的优先级，先后顺序

  :link>:visited>:hover>:active

（4）、获取焦点

/* 获取焦点前 */
input+span {
	color: transparent;
}
/* 获取焦点后 */
input:focus+span {
	color: red;
}
input:focus {
	background-color: yellow;
}

:focus获取焦点的元素（如表单元素），当用户点击或者触摸元素是会触发。

表单元素，进入到输入或者选择状态会触发该伪类

4、伪元素

它并不是一个元素，而是某个元素的样式

在标签后面使用

规范：在标签后面添加::,虽然大部分的伪元素也可以使用：，但是尽量使用::,区别于伪类选择器

 （1）::before

在元素的最前端插入，

div::before {
	/* 必写属性,可以空 */
	content: "我爱你，";
	/* 接下来渲染的都是伪元素的样式 */
	color: red;
	background-color: yellow;
}

（2）::after

在元素的最后端插入

/* 在元素后 */
div::after {
	content: "♥";
}

（3）content

注：content是::before和::after两个伪元素必写的属性，可以为空，但属性必须写。