css通過子元素選擇父元素的實現示例
發(fā)布時間：2024-02-19 16:07:53 作者：progrmmmm 
我要評論
我要評論 在CSS中無法直接根據子元素選擇父元素,因為CSS是一種向語言,它只允許選擇器從父元素向子元素匹配，本文介紹了css通過子元素選擇父元素的實現示例，具有一定的參考價值，感興趣的可以了解一下
偽類:has選擇父元素
td:has(> .unfoldTable){
//可選中所有td下包含unfoldTable的class標簽的td屬性
color: red;
}
td:has(> div){
//可選中所有td下包含div標簽的td屬性
color: red;
}特殊舉例分析：
個別UI框架個別標簽通過事件直接生成或者無法選中的情況。直接使用::v-deep會導致全部標簽改變，包裹標簽使用class名::v-deep無法選中父元素改變父元素屬性的情況。
如：elementui的table的type="expand"表格展開行。點擊展開后td標簽有padding。但td標簽和包裹他的tr標簽都是點擊后產生的。無法在外層包裹div，直接用::v-deep會改變包裹他的表格的樣式。
所以可以使用偽類:has來改變td標簽的padding。
部分代碼：
//標簽
<el-table-column type="expand">
<template slot-scope="scope">
<div class="unfoldTable">
<el-table
:show-header="false"
:data="statusDetail">
<el-table-column label="序號" width="80" align="center" />
<el-table-column width="40"></el-table-column>
//樣式
::v-deep td:has(> .unfoldTable){
//需要額外加入穿透和!important
padding: 0px !important;
}到此這篇關于css通過子元素選擇父元素的實現示例的文章就介紹到這了,更多相關css子元素選擇父元素內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
- 這篇文章主要介紹了CSS子元素選擇父元素的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習2020-09-01
這篇文章主要介紹了CSS子元素跟父元素的高度一致的實現方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來2020-09-02
這篇文章主要介紹了純CSS讓子元素突破父元素的寬度限制,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學2020-09-03- 這篇文章主要介紹了詳解CSS 子元素相對于父元素固定定位解決方案,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小2020-09-03
css選中父元素下的第一個子元素(:first-child)
這篇文章主要介紹了css選中父元素下的第一個子元素(:first-child)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著2020-09-08