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