建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
關(guān)于jquery操作兄弟節(jié)點(diǎn)CSS的簡(jiǎn)單問(wèn)題
style
創(chuàng)新互聯(lián)主要從事成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)武寧,十余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專(zhuān)業(yè),歡迎來(lái)電咨詢(xún)建站服務(wù):028-86922220
.red{
background-color:?red;
}
/style
div?id="demo"
a?href="javascript:void(0)"蘿卜/a
a?href="javascript:void(0)"青椒/a
a?href="javascript:void(0)"白菜/a
a?href="javascript:void(0)"土豆/a
/div
$(function(){
//綁定單擊事件
//將事件綁定在DIV上,是利用事件的冒泡原理,?這樣使用,
//使代碼結(jié)構(gòu)看起來(lái)更整潔,更容易搜索到單擊事件發(fā)生的位置
//推薦在開(kāi)發(fā)插件,或者其它比較復(fù)雜的功能時(shí)候,將事件綁定到父級(jí)容器
//這樣即使此例中的A標(biāo)簽是后來(lái)通過(guò)?JAVASCRIPT腳本添加進(jìn)來(lái)的,
//同樣能夠正確地處理
$('#demo').click(function(event){
var?$target?=?$(event.target);
//判斷如果點(diǎn)擊的A標(biāo)簽,則執(zhí)行以下代碼
if(/^a$/i.test(event.target.tagName)){
$target.addClass('red')
.siblings('a').removeClass('red');
alert('你點(diǎn)擊了我:'+$target.text());
}
});
});
jquery如何利用css選擇器去除兄弟樣式
$('.class').removeClass(.class) 第一個(gè)class為選擇器class 第二個(gè)為需要移除的class
CSS父元素的子元素樣式控制另一子元素怎么實(shí)現(xiàn)？
你說(shuō)講的這應(yīng)該是同級(jí)兄弟元素之間的CSS控制。
話(huà)說(shuō)有一種選擇器就叫兄弟元素選擇器，分為臨近兄弟和普通兄弟。
臨近兄弟：用 ＋ 表示，只匹配該元素后邊的第一個(gè)同級(jí)元素。
普通兄弟：用 ～ 表示，匹配該元素后邊的所有同級(jí)元素。
給個(gè)例子：
style
div#aa { }
div#aa p { font-size: 14px; color: #000; }
div#aa p.on { color: #f00; }
div#aa p.on ~ span { color: #00f; }
div#aa p.on + span { color: #0f0; font-weight: bold; }
/style
div id="aa"
p class="on"sdf/p
spansdf/span
spansdf/span
/div
當(dāng)把p的class設(shè)為on的時(shí)候，span的樣式也跟著改變。
不知道這么說(shuō)清楚沒(méi)有。
另外這種方式IE6是不支持的。慎用吧。
二、CSS之——選擇器
作用：通過(guò)元素選擇器可以選擇頁(yè)面中的所有指定元素
語(yǔ)法：標(biāo)簽名{}
作用：通過(guò)元素的class屬性值選中一組元素
語(yǔ)法：.class屬性值{}
id選擇器
作用：通過(guò)元素的id屬性值選中唯一的一個(gè)元素
語(yǔ)法：#id屬性值{}
復(fù)合選擇器（交集選擇器）
作用：可以選中同時(shí)滿(mǎn)足多個(gè)選擇器的元素
語(yǔ)法：選擇器1選擇器2選擇器N{}
選擇器分組（并集選擇器）
作用：通過(guò)選擇器分組可以同時(shí)選中多個(gè)選擇器對(duì)應(yīng)的元素
語(yǔ)法：選擇器1,選擇器2,選擇器N{}
通配選擇器
作用：可以用來(lái)選中頁(yè)面中的所有的元素
語(yǔ)法：*{}
元素之間的關(guān)系：
父元素：直接包含子元素的元素
子元素：直接被父元素包含的元素
祖先元素：直接或間接包含后代元素的元素，父元素也是祖先元素
后代元素：直接或間接被祖先元素包含的元素，子元素也是后代元素
兄弟元素：擁有相同父元素的元素叫做兄弟元素
作用：選中指定元素的指定后代元素
語(yǔ)法：祖先元素 后代元素{}
有時(shí)候，你需要選擇本身沒(méi)有標(biāo)簽，但是 仍然易于識(shí)別的網(wǎng)頁(yè)部位，比如段落首行 或鼠標(biāo)滑過(guò)的連接。CSS為他們提供一些選 擇器：偽類(lèi)和偽元素。
給鏈接定義樣式：
有四個(gè)偽類(lèi)可以讓你根據(jù)訪問(wèn)者與該鏈接的交互方式，將鏈接設(shè)置成4中不同的方式。
其他：
否定偽類(lèi)
否定偽類(lèi)可以幫助我們選擇不是其他東西的某種東西。
語(yǔ)法： :not(選擇器){}
比如p:not(.hello)標(biāo)識(shí)選擇所有的p元素，但是class為hello的除外。
屬性選擇器可以挑選帶有特殊屬性的標(biāo)簽。
語(yǔ)法：
[屬性名]
[屬性名 = "屬性值"]
[屬性名 ~= "屬性值"]
[屬性名 ^= "屬性值"]
[屬性名 |= "屬性值"]
[屬性名 $= "屬性值"]
[屬性名 *= "屬性值"]
作用：選中指定父元素的指定子元素
語(yǔ)法：父元素 子元素
比如body h1將選擇body字標(biāo)簽中的所有h1標(biāo)簽
IE6及以下的瀏覽器不支持子元素選擇器
其他子元素選擇器
除了根據(jù)祖先父子關(guān)系，還可以根據(jù)兄弟關(guān)系查找元素。
語(yǔ)法：
兄弟元素 + 兄弟元素 ：查找后邊一個(gè)兄弟元素
兄弟元素 ~ 兄弟元素：查找后邊所有的兄弟元素
在頁(yè)面中使用CSS選擇器選中元素時(shí)，經(jīng)常都是一個(gè)元素同時(shí)被多個(gè)選擇器選中。
比如：
這兩個(gè)選擇器都會(huì)選擇h1元素，如果兩個(gè)選擇器設(shè)置的樣式不一樣那還好不會(huì)產(chǎn)生沖突，但是如果兩個(gè)選擇器設(shè)置的是同一個(gè)樣式，這樣h1到底要應(yīng)用哪個(gè)樣式呢？CSS中會(huì)默認(rèn)使用權(quán)重較大的樣式，下面看一下權(quán)重又是如何計(jì)算的。
不同的選擇器有不同的權(quán)重值：
網(wǎng)站題目：css兄弟樣式,css 兄弟元素
文章源于：http://fisionsoft.com.cn/article/dsgghdj.html
