js高階 10 7 簡單的偽類選擇器可以幹什麼

多用啊，在專案中多用

除某元素以外，某元素的一切索引相關（奇偶，開始最後，大於小於等於）

除某元素以外，某元素的第乙個，最後乙個，以及某元素所有和索引相關的操作

冒號，以英文冒號「：」開頭

用後代選擇器

$('ul :not(#one)').css('color','blue');

33             //$('li:first').css('color','red');

偽類選擇器也稱作過濾選擇器。

jquery偽類選擇器都是以英文冒號「：」開頭，和css中的偽類選擇器用法相似，使得我們可以快速地選擇我們想要獲取的元素。

1

doctype html
>
2<
html 
lang
="en"
>
3<
head
>
4<
meta 
charset
="utf-8"
>
5<
title
>演示文件
title
>
6<
script 
src="jquery-3.1.1.min.js"
>
script
>
7head
>
8<
body
>
9<
div>
10<
h4>偽類選擇器
h4>
11<
p>偽類選擇器都是以英文冒號「:」開頭。jquery參考css選擇器的形式，為我們提供了大量的偽類選擇器，使得我們可以快速地選擇我們想要獲取的元素。
p>
12<
hr>
13<
h5>簡單偽類選擇器
h5>
14<
ul>
15<
li id
="one"
>:not(selector)    選擇除了某個選擇器之外的所有元素
li>
16<
li>:first或first()    選擇某元素的第乙個元素（非子元素）
li>
17<
li>:last或last()    選擇某元素的最後乙個元素（非子元素）
li>
18<
li>:odd    選擇某元素的索引值為奇數的元素
li>
19<
li>:even    選擇某元素的索引值為偶數的元素
li>
20<
li>:eq(index)    選擇給定索引值的元素，索引值index是乙個整數，從0開始
li>
21<
li>:lt(index)    選擇所有小於索引值的元素，索引值index是乙個整數，從0開始
li>
22<
li>:gt(index)    選擇所有大於索引值的元素，索引值index是乙個整數，從0開始
li>
23<
li>:header    選擇h1~h6的標題元素
li>
24<
li>:root    選擇頁面的根元素
li>
25<
li>:animated    選擇所有正在執行動畫效果的元素
li>
26ul
>
27<
input 
type
="text"
value
="測試"
>
28li
>
29div
>
30<
script
>
31$(
function
())42
script
>
43body
>
44html
>

03 高階選擇器,屬性選擇器,偽類選擇器

使用空格表示後代選擇器。顧名思義，父元素的後代 包括兒子，孫子，重孫子 container p container item p view code 使用 表示子代選擇器。比如div p,僅僅表示的是當前div元素選中的子代 不包含孫子.元素p。container pview code 多個選擇器之...

偽類選擇器和偽元素選擇器簡單理解

元素選擇器 如上面的p 實實在在的存在的元素。偽元素選擇器 dom中不存在的元素，僅僅是css中用來渲染，新增一些特殊效果的，比如p before，選擇p標籤 真元素 前面的假元素 偽元素，p標籤前面沒有元素，只是假設有 類選擇器 真實有的類，我們自己正兒八經定義的類，如p.test1，選擇p標籤 ...

屬性選擇器，偽類選擇器，偽元素選擇器

屬性選擇器 1doctype html 2 html lang en 3 head 4 meta charset utf 8 5 title 屬性選擇器 title 6 style 7 屬性匹配 8 label for 12 屬性名匹配 13 label for pwd 17 以什麼結尾匹配 18 ...