在css
中,元素不能往前选择,即不能选择父元素或前兄弟元素;这都受制于DOM渲染规则;这其实也好理解,html是从外层往里层的渲染机制;如果可以往上渲染就会出现渲染紊乱与性能等之类的问题;
改变DOM与视界的位置,从而达到改变展示效果 【css|css子元素选择父元素的实现】兄弟选择符只能选择后面的元素,但所表达的“后面”是指代码层面的后面,我们可以通过改变视界的效果来实现”前兄弟选择符“的效果;即把元素放到后面,通过更改样式或文档流让视界上展示在前方;
展示的效果如下图所示:
文章图片
实现的方法有如下几种:
(1)flex布局 flex
布局中有个flex-direction
的属性,该属性可以控制元素的水平或者垂直方法的呈现顺序;
实现的代码如下:
>
.cs__flex {
display: inline-flex;
flex-direction: row-reverse;
}
.form__input:focus ~ .form__input-lab {
color: darkcyan;
text-shadow: 0 0 1px;
}
(2)float浮动 该方法的兼容性极佳,但是要容器的宽度要根据子元素的宽度计算;
>
.cs__float {
width: 275px;
}
.form__input {
width: 200px;
float: right;
}
.form__input:focus ~ .form__input-lab {
color: darkcyan;
text-shadow: 0 0 1px;
}
(3)absolute属性 用margin预约位置,通过定位到前方展示
>
.cs__absolute {
position: relative;
}
.form__input {
margin-left: 64px;
}
.form__input-lab {
position: absolute;
left: 0;
}
.form__input:focus ~ .form__input-lab {
color: darkcyan;
text-shadow: 0 0 1px;
}
(4)direction属性 改变文档流的顺序,实现
DOM位置
和视界位置
的调换;兼容性较好,容易理解,唯一的不足就是它针对的必须是内联元素;>
.cs__direction {
direction: rtl;
}
.form__input,
.form__input-lab {
direction: ltr;
}
.form__input-lab { // 针对的是内联元素
display: inline-block;
}
.form__input:focus~.form__input-lab {
color: darkcyan;
text-shadow: 0 0 1px;
}
:focus-within
的伪类选择器,类似于‘父选择器
’:focus-within
匹配的是当前元素或者当前的子元素处于聚焦的状态;而:focus
是匹配当前元素;该属性非常的实用,本质上是一种”父选择器“行为,子元素的状态会影响父元素的样式;这就可类比于
css
中无法往回选中元素得情况,那么正常DOM
顺序实现无障碍访问的样式例子;实例代码如下:
>
.cs-normal:focus-within .cs-label {
color: darkcyan;
text-shadow: 0 0 1px;
}
使用
:has()
;注:暂未支持>
li:has(> a.active){
color:red;
}
看网上也提到:has()伪类的使用,但是目前没有浏览器支持这个属性,这里就不过多的进行阐述,仅供事先了解;
推荐阅读
- vue|Vue的axios封装
- 设备兼容与分辨率|font-size有关rem的适配 -无需使用JavaScript代码进行多设备的适配
- javascript|Async 的用法
- promise|promise和async+await
- 前端|Promise实现
- 前端|Element-UI(el-table样式修改)
- Vue.js|Vue3.0 + Vite + Ant Design Vue + TypeScript 管理后台vue-vben-admin
- react-redux|「源码解析」一文吃透react-redux源码(useMemo经典源码级案例)
- 前端自动化打包实践