欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css通過子元素選擇父元素的實現(xiàn)示例

  發(fā)布時間：2024-02-19 16:07:53   作者：progrmmmm   我要評論
在CSS中無法直接根據(jù)子元素選擇父元素,因為CSS是一種向語言,它只允許選擇器從父元素向子元素匹配，本文介紹了css通過子元素選擇父元素的實現(xiàn)示例，具有一定的參考價值，感興趣的可以了解一下

偽類: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標簽都是點擊后產(chǎn)生的。無法在外層包裹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;
}

到此這篇關(guān)于css通過子元素選擇父元素的實現(xiàn)示例的文章就介紹到這了,更多相關(guān)css子元素選擇父元素內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！ 

相關(guān)文章

  • CSS子元素選擇父元素的實現(xiàn)

    這篇文章主要介紹了CSS子元素選擇父元素的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習
    2020-09-01

  • CSS子元素跟父元素的高度一致的實現(xiàn)方法

    這篇文章主要介紹了CSS子元素跟父元素的高度一致的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來
    2020-09-02

  • 純CSS讓子元素突破父元素的寬度限制

    這篇文章主要介紹了純CSS讓子元素突破父元素的寬度限制,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學
    2020-09-03

  • 詳解CSS 子元素相對于父元素固定定位解決方案

    這篇文章主要介紹了詳解CSS 子元素相對于父元素固定定位解決方案,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小
    2020-09-03

  • css選中父元素下的第一個子元素(:first-child)

    這篇文章主要介紹了css選中父元素下的第一個子元素(:first-child)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著
    2020-09-08

最新評論