css3选择器用法合集

一、focus-within

focus-within：当前元素及后代元素获取焦点后即可触发
如下：子元素input聚焦后，可以设置父元素parent的效果

.parent:focus-within{
	background-color: #d8d8d8;
}
1
2
3

<div class="parent">
	<input class="child" type="text" placeholder="请输入文本" />
div>
1
2
3

二、has

has：可设置条件信息，若满足条件，则触发选择器，否则则不触发
如下：类名为label的元素，如果满足下一个兄弟节点是input框，并且当前input框存在一个属性required，则满足条件，设置::after

.label:has(+input[required])::after{
	content: '*';
	color: red;
}
1
2
3
4

<form action="" method="post">
	<div class="form-item">
		<span class="label">用户名span>
		<input type="text" required placeholder="请输入用户名" />
	div>
	<div class="form-item">
		<span class="label">密码span>
		<input type="text" placeholder="请输入密码" />
	div>
form>
1
2
3
4
5
6
7
8
9
10

三、selection

selection：设置文字选中时的样式效果
如下：当鼠标选中文字时，文字样式将会改变

.text::selection{
	color: #fff;
	text-decoration: underline;
	background-color: #000;
}
1
2
3
4
5

<p class="text">
	这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字
p>
1
2
3