一些不常用的CSS伪类选择器的使用技巧

谁践踏了优雅 2023-06-15 06:41 16阅读 0赞

# 1. 属性值正则匹配选择器 #

#### 1）介绍 ####

（1）\[attr^=“val”\]：匹配attr属性以字符val开头的元素  
（2）\[attr$=“val”\]：匹配attr属性以字符val结尾的元素  
（3）\[attr\*=“val”\]：匹配attr属性包含字符val的元素

#### 2）应用：过滤搜索技术 ####

![过滤搜索技术][20191121093503930.gif]

# 2. :focus伪类选择器 #

#### 1）试用范围 ####

###### 只能匹配特定类型的元素： ######

*  （1）非disabled状态的表单元素；
 *  （2）包含href属性的a标签；
 *  （3）area元素；
 *  （4）summary元素。

###### 如何让普通元素可以应用:focus伪类？ ######

*  （1）设置HTML的contenteditable = ‘true’ 或者 ‘plaintext-only’；
 *  （2）设置了tabIndex的属性的普通元素：
    
        a. 如果希望被tab键索引，且被点击的时候可以触发:focus伪类元素，则设置tabIndex = 0;
         b. 如果不希望被tab键索引，且被点击的时候可以触发:focus伪类元素，则设置tabIndex = -1;

#### 2) 扩展:focus-within ####

在当前元素或者当前元素的子元素处于聚焦状态的时候都会匹配  
例如下面代码，表示form元素自身，或者form内部的任意子元素处于聚焦状态时，form元素的outline都会出现

form:focus-within{ 
    	outline: 1px solid blue;
    }

# 3. :target交互布局技术实现展开和收起效果 #

<div id="articleMore" hidden></div>
    <a href="#articleMore" class="cs-button" data-open="true">阅读更多</a>   
    <p class="cs-more-p">更多文章内容，更多文章内容，更多文章内容，更多文章内容。</p>
    <a href="##" class="cs-button" data-open="false">收起</a>

.cs-more-p, [data-open=false] { 
    	display: none;
    }
    :target ~ [data-open=true] { 
    	display: none;
    }
    :target ~ .cs-more-p, :target ~ [data-open=false] { 
    	display: block;
    }

![纯CSS实现展开和收起效果][CSS]

# 4. 占位符显示伪类:placeholder-shown #

#### 1）占位符交互效果 ####

:placeholder-show表示当输入框的placeholder内容显示的时候，匹配该输入框，  
**注：但是这里需要注意的是，placeholder属性可以为空格（“ ”），但是不能完全为空（“”），否则将不能匹配**  
在使用过程中，可以将placeholder属性设置为空格，并用其他元素通过定位来实现placeholder的效果，并且当input获取到焦点时，将placeholder的值移动至上方。

.input-fill-x { 
    	position: relative;
    	margin-top: 32px;
    }
    .input-fill:placeholder-shown::placeholder { 
    	color: transparent;
    }
    .input-label { 
    	position: absolute;
    	left: 8px;
    	top: 6px;
    	pointer-events: none;
    	transition: all 0.3s;
    	background: #fff;
    	padding: 0 2px;
    }
    .input-fill{ 
    	height: 24px;
    }
    .input-fill:not(:placeholder-shown) ~ .input-label, .input-fill:focus ~ .input-label { 
    	transform: scale(0.75) translate(0, -20px);
    }

#### 2）:placeholder-shown与空值判断 ####

由于placeholder的内容只有在空值状态的时候才显示，因此我们可以通过该伪类来判断一个输入框中是否有值。

.input-fill:placeholder-shown + small::before { 
    	content: '尚未输入内容';
    	color: red;
    	display: block;
    }

最终实现的效果如下图所示：  
![纯CSS实现占位符与空值判断的交互效果][CSS 1]

# 5. :empty伪类 #

#### 1）特性 ####

用来匹配**空标签**元素，例如

#### 2）注意事项 ####

（1）空标签中不能有空格：

（2）不能换行：

（3）:before和:after元素可以给标签插入内容、图形，但是不会影响:empty伪类的匹配

#### 3）使用 ####

（1）隐藏空元素

.my-empty { 
    	display: none;
    }

（2）字段缺失智能提示  
实际开发过程中经常需要对空字段做缺省处理，有的用‘–’代替，有的用‘未知’，有的用“暂无”。实际在开发的过程中经常是以下面的方式处理(以vue工程为例):

如果用:empty伪类，则不需要这样写，直接用css代码就能实现：

.username:empty { 
    	content: '--';
    }

# 6. 总结 #

本章只简单介绍了几种比较好用的伪类选择器，包括：

*  正则匹配选择器\[attr^="val\], \[attr$=“val”\], \[attr\*=“val”\]
 *  :focus和:focus-within伪类选择器
 *  :target选择器
 *  :placeholder-shown选择器
 *  :empty伪类选择器  
    更多选择器的使用技巧可以参考张鑫旭老师的新作《css选择器世界》，该书确实有不少干货。

[20191121093503930.gif]: https://img-blog.csdnimg.cn/20191121093503930.gif
[CSS]: https://img-blog.csdnimg.cn/2019112109355119.gif
[CSS 1]: https://img-blog.csdnimg.cn/20191121093640914.gif