在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ css 選擇器 如何選擇前一節(jié)點(diǎn)？

css 選擇器 如何選擇前一節(jié)點(diǎn)？

問(wèn)題1：組合類選擇器都是選擇后面的節(jié)點(diǎn)，如何選擇前面的？

<p>
    <a  class="p1">This is a paragraph.1</a>

    <a  class="p2">This is a paragraph.2</a>
</p>
.p1:hover+.p2 {
                outline: 10px double purple;
            }
            
.p2:hover~.p1 {
                outline: 10px double purple;
            }

其實(shí)想做就是:鼠標(biāo)懸停p1,給p2一個(gè)框； 鼠標(biāo)懸停p2,給p1一個(gè)框。 但，后半句無(wú)效。
把組合選擇器都試了，它們?nèi)窍蚝筮x擇節(jié)點(diǎn)的，沒(méi)法向前。。。？

問(wèn)題2：如何選擇不同父的兩個(gè)/多個(gè)元素？
還是上例，我開(kāi)始的HTML是這樣寫(xiě)的

<div>    
    <p>
        <a  class="p1">This is a paragraph.1</a>
    </p>

    <p>
        <a  class="p2">This is a paragraph.2</a>
    </p>
</div>

后來(lái)發(fā)現(xiàn)，組合選擇都是兄弟 后代，像上面分屬于兩個(gè)<p>的,貌似沒(méi)啥關(guān)系，怎樣實(shí)現(xiàn)我問(wèn)題1的目的？

回答
編輯回答
墨小羽

css 并沒(méi)有提供前置選擇器, 后面的去設(shè)置前面的元素將可能會(huì)引發(fā)重排

所以使用 js 吧

2018年2月5日 16:27
編輯回答
墨沫

p:nth-child(1) p:nth-child(2) p:first-child p:last-child

2017年4月10日 00:54
編輯回答
莓森

可以使用jQuery的選擇器，用js代碼去實(shí)現(xiàn)；
給P下的a標(biāo)簽增加mouseover事件，在里面切換class
如 增加一個(gè)active類，默認(rèn)賦給某一個(gè)a標(biāo)簽

.active{border:1px solid #ccc}
$('p a').mouseover(function(e){
    $('p a').toggleClass('active'); 
})
2017年5月20日 08:51