後代選擇器過濾選擇器

㈠ css選擇器的1.4 後代選擇器

後代選擇器也稱為包含選擇器，用來選擇特定元素或元素組的後代，將對父元素的選擇放在前面，對子元素的選擇放在後面，中間加一個空格分開。後代選擇器中的元素不僅僅只能有兩個，對於多層祖先後代關系，可以有多個空格加以分開，如id為a、b、c的三個元素，則後代選擇器可以寫成#a #b #c{}的形式，只要對祖先元素的選擇在後代元素之前、中間以空格分開即可。
如：
<style>
.father.child{
color:#0000CC;
}
</style>
<p class=father>
黑色
<label class=child>藍色
<b>也是藍色</b>
</label>
</p>
這里我們定義了所有class屬性為father的元素下面的class屬性為child的顏色為藍色。後代選擇器是一種很有用的選擇器，使用後代選擇器可以更加精確的定位元素。

㈡ css後代選擇器有哪些

後代選擇器（descendant selector）又稱為包含選擇器。

後代選擇器可以選擇作為某元素後代的元素。

我們可以定義後代選擇器來創建一些規則，使這些規則在某些文檔結構中起作用，而在另外一些結構中不起作用。

舉例來說，如果您希望只對 h1 元素中的 em 元素應用樣式，可以這樣寫：

h1 em {color:red;}

㈢ HTML怎麼選中多個兄弟標簽

• 首先明確各類選擇器的權值

  ID選擇器：100，偽類和屬性選擇器：10，類型選擇器和偽元素選擇器：1，通用選擇器（*）：0。

• 多個標簽關聯多用於：子代選擇器，後代選擇器，群組選擇器，交集選擇器，過濾選擇器

• <div id="model">

  <div class="parent"> <div class="lists"> <div class="list"></div>

  <div class="list"></div>

  </div>

  <div class="sons"> <div class="list"></div>

  <div class="list"></div>

  </div>

  </div></div>

  可以將上訴代碼看做，一個家族#model,有一個父親.parent,有兩個兒子，.lists和.sons,每家有兩個兒子.list;

  子代選擇器：就是指定查找哪個兒子，.parent>.lists或者.parent>.sons

  後代選擇器：指查找他的孫子，兒子都可以

  .parent div 所有兒子,孫子

  .parent .list 所有孫子

  群組選擇器，將多個標簽用「，」連接起來，多用於同時設置多個標簽的樣式；

• <div id="model"> <ul class="lists"> <li></li> <li></li> <li></li> <li></li> </ul></div>

  交集選擇器 ul.lists，

  過濾選擇器#model>.lists>li:even 查詢下標為基數的標簽

㈣ jquery有幾種選擇器

jQuery選擇器一般分為四種

一、基本選擇器

基本選擇器是jQuery中最常用也是最簡單的選擇器，它通過元素的id、class和標簽名等來查找DOM元素。

1、ID選擇器 #id

描述：根據給定的id匹配一個元素， 返回單個元素（註：在網頁中，id名稱不能重復）

示例：$("#test") 選取 id 為 test 的元素

2、類選擇器 .class

描述：根據給定的類名匹配元素，返回元素集合

示例：$(".test") 選取所有class為test的元素

3、元素(標簽)選擇器 element

描述：根據給定的元素名匹配元素，返回元素集合

示例：$("p") 選取所有的<p>元素 $("div") :選取所有的div標簽

4、*

描述：匹配所有元素，返回元素集合

示例：$("*") 選取所有的元素

5、selector1，selector2,...,selectorN（並集選擇器）

描述：將每個選擇器匹配到的元素合並後一起返回，返回合並後的元素集合

示例：$("p,span,p.myClass") 選取所有<p>,<span>和class為myClass的<p>標簽的元素集合

二、層次選擇器

層次選擇器根據層次關系獲取特定元素。

1、後代選擇器

示例：$("p span") 選取<p>元素里的所有的<span>元素（註：後代選擇器選擇父元素所有指定選擇的元素，不管是兒子級，還是孫子級）

2、子選擇器 $("parent>child")

示例：$("p>span") 選擇<p>元素下的所有<span>元素 （註：子選擇器只選擇直屬於父元素的子元素）

3、同輩選擇器 $("prev+next")

描述：選取緊接在prev元素後的next元素，返回元素集合

示例：$(".one+p") 選取class為one的下一個<p>同輩元素集合

4、同輩選擇器 $("prev~siblings")

描述：選取prev元素後的所有siblings元素，返回元素集合

示例：$("#two~p")選取id為two的元素後所有<p>同輩元素集合

三、過濾選擇器

1>基本過濾選擇器

1、 :first

描述：選取第一個元素，返回單個元素

示例：$("p:first") 選取所有<p>元素中第一個<p>元素

2、 :last

描述：選取最後一個元素，返回單個元素

示例：$("p:last") 選取所有<p>元素中最後一個<p>元素

3、 :not(selector)

描述：去除所有與給定選擇器匹配的元素，返回元素集合

示例：$("input:not(.myClass)") 選取class不是myClass的<input>元素

4、 :even

描述：選取索引是偶數的所有元素，索引從0開始，返回元素集合

5、 :odd

描述：選取索引是奇數的所有元素，索引從0開始，返回元素集合

6、 :eq(index)

描述：選取索引等於index的元素，索引從0開始，返回單個元素

7、 :gt(index)

描述：選取索引大於index的元素，索引從0開始，返回元素集合

8、 :lt(index)

描述：選取索引小於於index的元素，索引從0開始，返回元素集合

9、 :focus

描述：選取當前獲取焦點的元素

2>內容過濾選擇器

1、:contains(text)

描述：選取含有文本內容為text的元素，返回元素集合

示例：$("p:contains('我')") 選取含有文本「我」的元素

2、:empty

描述：選取不包含子元素或者文本元素的空元素，返回元素集合

示例：$("p:empty") 選取不包含子元素或者文本元素的空<p>元素（<p></p>）

3、:has(selector)

描述：選取含有選擇器所匹配的元素的元素，返回元素集合

示例：$("p:has(p)") 選取含有<p>元素的<p>元素（<p><p/></p>）

4、:parent

描述：選取含有子元素或者文本的元素，返回元素集合

示例：$("p:parent") 選取含有子元素或者文本元素的<p>元素（<p><p/></p>或者<p>文本</p>）

3>可見性過濾選擇器

1、:hidden

描述：選取所有不可見的元素，返回元素集合

2、:visible

描述：選取所有可見的元素，返回元素集合

4>屬性過濾選擇器（返回元素集合）

1、[attribute]

示例：$("p[id]") 選取擁有id屬性的p元素

2、[attribute=value]

示例：$("input[name=text]") 選取擁有name屬性等於text的input元素

3、[attribute!=value]

示例：$("input[name!=text]") 選取擁有name屬性不等於text的input元素

4、[attribute^=value]

示例：$("input[name^=text]") 選取擁有name屬性以text開始的input元素

5、[attribute$=value]

示例：$("input[name$=text]") 選取擁有name屬性以text結束的input元素

6、[attribute*=value]

示例：$("input[name*=text]") 選取擁有name屬性含有text的input元素

7、[attribute~=value]

示例：$("input[class~=text]") 選取擁有class屬性以空格分割的值中含有text的input元素

8、[attribute1][attribute2][attributeN]

描述：合並多個屬性過濾選擇器

5>表單對象屬性過濾選擇器（返回元素集合）

1、:enabled

描述：選取所有可用元素

2、:disabled

描述：選取所有不可用元素

3、:checked

描述：選取所有被選中的元素（單選框，復選框）

示例：$("input:checked") 選取所有被選中的<input>元素

4、:selected

描述：選取所有被選中的選項元素（下拉列表）

示例：$("select option:selected") 選取所有被選中的選項元素

四、表單選擇器（返回元素集合，使用相似）

1、:text

描述：選擇所有的單行文本框

示例：$(":text")選取所有的單行文本框

2、:password

描述：選擇所有的密碼框

3、:button

描述：選擇所有的按鈕

4、:checkbox

描述：選擇所有的多選框

㈤ css的選擇器有哪些優先順序

1、標記選擇器（如：body,div,p,ul,li）

2、id選擇器（如：id="name",id="name_txt"）

3、類選擇器（如：id="name",id="name_txt"）

4、後代選擇器（如：#head.navulli從父集到子孫集的選擇器）

5、子元素選擇器（如：div>p,帶大於號>）

6、偽類選擇器（如：就是鏈接樣式,a元素的偽類，4種不同的狀態：link、visited、active、hover。）

看完了基本的css選擇器類型後，我們接著來看一下css優先順序的概念。

當兩個規則都作用到了同一個html元素上時，如果定義的屬性有沖突，那麼應該用誰的值的，用到誰的值誰的優先順序就高。

我們來看一下css選擇器優先順序的演算法：

每個規則對應一個初始"四位數"：0、0、0、0

若是行內選擇符，則加1、0、0、0

若是ID選擇符，則加0、1、0、0

若是類選擇符/偽類選擇符，則分別加0、0、1、0

若是元素選擇符，則分別加0、0、0、1

演算法：將每條規則中，選擇符對應的數相加後得到的」四位數「，從左到右進行比較，大的優先順序越高。

看完了上述內容，那我們就來看看css選擇器優先順序的具體排序。

css選擇器優先順序最高到最低順序為：

1.id選擇器（#myid）

2.類選擇器（.myclassname）

3.標簽選擇器（div,h1,p）

4.子選擇器（ul<li）

5.後代選擇器（lia）

6.偽類選擇（a:hover,li:nth-child）

最後，需要注意的是：

!important的優先順序是最高的，但出現沖突時則需比較」四位數「;

優先順序相同時，則採用就近原則，選擇最後出現的樣式;

繼承得來的屬性，其優先順序最低。

㈥ 後代選擇器與子選擇器有什麼不同

後代選擇器包含子選擇器。
後代選擇器選擇某元素的所有後代元素，不分層級，也就是說子級的子級等也會被選擇。
子選擇器縮小選擇范圍，只選擇子級元素，對子級之後的層級不會被選擇。

㈦ 詳細說明css的常用選擇器類型有哪些

• css常用的四種選擇器類型有：

• 標簽選擇器：針對一類標簽

• ID選擇器：針對某一個特定的標簽使用

• 類選擇器：針對你想要的所有標簽使用

• 後代選擇器：用空格隔開

1、標簽選擇器：選擇器的名字代表html頁面上的標簽

標簽選擇器，選擇的是頁面上所有這種類型的標簽，所以經常描述「共性」，無法描述某一個元素的「個性」。

舉例：

<style type="text/css">
p{
font-size:14px;
}

</style>
<body>
<p>css</p>
</body>





再比如說，想讓「學完了安卓，繼續學前端喲」這句話中的「前端」兩個變為紅色字體，那麼可以用<span>標簽把「前端」這兩個字圍起來，然後給<span>標簽加一個標簽選擇器。

代碼如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span{
color: red;
}
</style>
</head>
<body>
<p>學完了安卓，繼續學<span>前端</span>喲</p>
</body>
</html>





【總結】需要注意的是：

（1）所有的標簽，都可以是選擇器。比如ul、li、label、dt、dl、input、div等。

（2）無論這個標簽藏的多深，一定能夠被選擇上。

（3）選擇的所有，而不是一個。

2、ID選擇器：規定用#來定義（名字自定義）

針對某一個特定的標簽來使用，只能使用一次。css中的ID選擇器以」#」來定義。

舉例：


<head>
<title>Document</title>
<style type="text/css">
#mytitle
{
border:3px dashed green;
}
</style>
</head>





然後在別處使用id來引用它：

<body>
<h2 id="mytitle">你好</h2>
</body>





id選擇器的選擇符是「#」。

任何的HTML標簽都可以有id屬性。表示這個標簽的名字。這個標簽的名字，可以任取，但是：

（1）只能有字母、數字、下劃線。

（2）必須以字母開頭。

（3）不能和標簽同名。比如id不能叫做body、img、a。

（4）大小寫嚴格區分，也就是說aa,和AA是兩個不同的ID

另外，特別強調的是：HTML頁面，不能出現相同的id，哪怕他們不是一個類型。比如頁面上有一個id為pp的p，一個id為pp的div，是非法的！

一個標簽可以被多個css選擇器選擇：

比如，可以同時讓標簽選擇器和id選擇器作用於同一個標簽。（用到了層疊）如下：

㈧ 後代選擇器使用

position隻影響的是位置關系，在DOM樹上的繼承關系還是不變的。即使父層在左上層，子層在右下角，但他們還是父子關系，存在繼承的！而你所謂的脫離也只是位置上的，而不是繼承上的。
<DIV
id="b"><div
id="a"></div></div>不管你如何定義b和a，也不管位置如何，已經決定a繼承b的關系已經確定了！

㈨ 後代選擇器和子代選擇器的區別

嗯，有區別呀，而且區別還是挺大的，嗯，建議你還是選擇後者吧，後者比較好一些。

㈩ 在「新建css樣式」對話框中可用的選擇器有哪四種

最常用的四種選擇器是：元素選擇器、類選擇器、ID選擇器、派生選擇器

1、元素選擇器

最常見的css選擇器當屬元素選擇器了，在HTML文檔中該選擇器通常是指某種HTML元素，例如：p,h2,span,a,div乃至html。

例如：

html {background-color: black;}

p {font-size: 30px; backgroud-color: gray;}

h2 {background-color: red;}

以上css代碼會對整個文檔添加黑色背景；將所有p元素字體大小設置為30像素同時添加灰色背景；對文檔中所有h2元素添加紅色背景。

通過上面的例子也可以看出css的基本規則結構：由選擇器和聲明塊組成。每個聲明塊中包含一個或多個聲明。每個聲明的格式為：屬性名 ： 屬性值。如下圖所示：

(1)後代選擇器(descendant selector)

如上圖，如果想要選擇body元素的所有li子元素，方法如下：

body li { ...}

這里會選擇所有的li後代，也就是圖中的body下的所有li，不論他們之間相隔的代數有多少。同理，如果想要選擇h1元素下的span，可以使用以下代碼：

h1 span { ...}

如果我們要選擇擁有warning類的元素的li後代，可以使用下面的方法：.warning li { ...}

當然，如果希望只選擇擁有warning類的div元素的li後代，可以寫作：div.warning li { ...}

由上面的例子不難看出，後代選擇器的規則就是用空格連接2個或多個選擇器。空格的含義為：…的後代。多個選擇器的情況如下： ul li li { ...}

這樣，就會選擇所有ul下包含在li元素下的所有li元素了，聽起來十分拗口，參考我們的DOM樹，會選擇到文檔樹種最後一排li元素。

(2)子元素選擇器(child selector)

子元素選擇器和後代選擇器不同，它只能選擇某元素的直接後代，不能跨代選取，用法如下：ul > li { ...}

兩個子元素中間用一個大於號>連接。上面的代碼會選擇到所有ul元素的直接li子元素。對應到DOM樹中，所有的li元素都會被選中，原因是圖中所有的li元素都是ul的子元素。

但是，以下代碼將不會選中任何元素：h1 > span { ...}

由於span是h1的」孫子元素」，h1沒有直接的span子元素，因而上面的代碼將不會選到任何結果。其他方面和後代元素類似，需要特別注意的就是子元素選擇器不能隔代選取。

(3)相鄰兄弟選擇器(Adjacent sibling selector)

相鄰兄弟選擇器，故名思意將會選取某個元素的相鄰兄弟元素，注意它選取的是相鄰的兄弟元素而不是所有的兄弟元素，實際上選取的是緊跟在後面的兄弟元素。

相鄰兄弟選擇器在實踐中有比較不錯的應用，例如，你想在一個h2標題後面的段落應用某種獨到的樣式或者希望在某類p段落後的table上添加一個額外的邊距等等。它的用法如下：

li + li { ...}

以上代碼會選擇所有作為li相鄰元素的li元素，聽起來又有點拗口，參考DOM樹，它會選擇除了排在第一個li元素的其餘4個li元素，因為2個排在第1的li元素沒有更靠前的兄弟元素來選擇它。

再比如：h1 + p { ...} 會選擇所有緊跟h1後面的p兄弟元素。h1.warning + p { ...} 會選擇所有有用warning類的h1元素後面緊跟的p兄弟元素。

(4)幾種派生選擇器的結合使用

實際上，以上介紹的幾種派生選擇器可以結合使用，看下面的例子：

html > body li.warning + li { ...}

上面的選擇器含義為：html元素的body子元素中，所有擁有warning類的li元素的相鄰兄弟元素。