鍍金池/ 問(wèn)答/HTML/ 問(wèn)一個(gè)關(guān)于點(diǎn)擊狀態(tài)樣式的問(wèn)題

問(wèn)一個(gè)關(guān)于點(diǎn)擊狀態(tài)樣式的問(wèn)題

1. 問(wèn)題：

父元素的樣式里有.parent:active,當(dāng)點(diǎn)擊的時(shí)候會(huì)更換背景顏色；
想要實(shí)現(xiàn)的效果是：點(diǎn)擊某個(gè)特殊的子元素的話，不想觸發(fā)父元素的更換背景顏色，但是其他元素就正常觸發(fā)。請(qǐng)問(wèn)怎么做到呢？純css可以做到嗎？
demo的頁(yè)面結(jié)構(gòu)和樣式是這樣的：

<!DOCTYPE html>
<html>    
<head>
<meta charset="utf-8"> 
<title>菜鳥(niǎo)教程(runoob.com)</title> 
<style> 
    .parent{
        height: 100px;
        background: #ccc;
    }
    .parent:active {
        background: #aaa;
    }
    .no-active{
        height: 40px;
        width: 40px;
        background: #219;
        color: #fff;
    }
</style>
</head>
<body>

    <div class="parent">
        <div class="no-acitve">hello</div>
        <div class="other">active</div>
    </div>

</body>
</html>
回答
編輯回答
小曖昧

CSS現(xiàn)在是沒(méi)有父代選擇器，但是呢，有一定的辦法可以取巧模擬
css:


.parent {
    position: relative;
    height: 100px;
    z-index: 1;
}

.replace {
    width: 100%;
    height: 100px;
    background: #ccc;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
}

.other:active+.replace {
    background: #aaa;
}

.replace:active {
    background: #aaa;
}

dom：<div class="parent">

    <div class="no-acitve">hello</div>
    <div class="other">active</div>
    <div class="replace"></div>
</div>

具體詳見(jiàn) 鏈接描述

2017年6月27日 01:16
編輯回答
旖襯

加個(gè)判斷不就好了么

if(!e.target.className === “特殊標(biāo)簽class”) {
    ...
}
2018年2月9日 03:42
編輯回答
熟稔

如果你想讓這個(gè)特殊的子元素被active的時(shí)候沒(méi)有任何反應(yīng)，可以試試CSS:pointer-events
當(dāng)然，要注意一下兼容性。

2018年3月26日 14:23