css3選擇器最新部分，有人也稱這種選擇器為css3結構類，下面我們通過實際的應用來具體了解他們的使用和區別，首先列出他具有的選擇方法：
:first-child選擇某個元素的第乙個子元素；
:last-child選擇某個元素的最後乙個子元素；
:nth-child()選擇某個元素的乙個或多個特定的子元素；
:nth-last-child()選擇某個元素的乙個或多個特定的子元素，從這個元素的最後乙個子元素開始算；
:nth-of-type()選擇指定的元素；
:nth-last-of-type()選擇指定的元素，從元素的最後乙個開始計算；
:first-of-type選擇乙個上級元素下的第乙個同類子元素；
:last-of-type選擇乙個上級元素的最後乙個同類子元素；
:only-child選擇的元素是它的父元素的唯一乙個了元素；
:only-of-type選擇乙個元素是它的上級元素的唯一乙個相同型別的子元素；
:empty選擇的元素裡面沒有任何內容。
:nth-child(length);/*引數是具體數字*/:nth-child(n);/*引數是n,n從0開始計算*/
:nth-child(n*length)/*n的倍數選擇，n從0開始算*/
:nth-child(n+length);/*選擇大於length後面的元素*/
:nth-child(-n+length)/*選擇小於length前面的元素*/
:nth-child(n*length+1);/*表示隔幾選一*/
//上面length為整數
這種不式不能引用負值，也就是說li:nth-child(-3)是不正確的使用方法。:nth-child(2n),這中方式是前一種的變身，我們可以選擇n的2倍數，當然其中「2」可以換成你自己需要的數字.demo li:nth-child(2n)等於.demo li:nth-child(even)
:nth-child(-n+5)這種選擇器這個是選擇第5個前面的
n=0 －－》 -n+5=5 －－》 選擇了第5個lin=1 －－》 -n+5=4 －－》 選擇了第4個li
n=2 －－》 -n+5=3 －－》 選擇了第3個li
n=3 －－》 -n+5=2 －－》 選擇了第2個li
n=4 －－》 -n+5=1 －－》 選擇了第1個li
n=5 －－》 -n+5=0 －－》 沒有選擇任何元素
:nth-of-type類似於:nth-child，不同的是他只計算選擇器中指定的那個元素
6、:nth-last-of-type
這個選擇器不用說大家都能想得到了，他和前面的:nth-last-child一樣使用，只是他指一了元素的型別而以。
7、:first-of-type和:last-of-type
:first-of-type和:last-of-type這兩個選擇器就類似於:first-child和:last-child;不同之處就是指定了元素的型別。
8、:only-child和:only-of-type
":only-child"表示的是乙個元素是它的父元素的唯一乙個子元素。
9、:empty
:empty是用來選擇沒有任何內容的元素，這裡沒有內容指的是一點內容都沒有，哪怕是乙個空格，比如說，你有三個段落，其中乙個段落什麼都沒有，完全是空的，你想這個p不顯示
否定選擇器（:not）
否定選擇器和jq中的:not選擇器一模一樣，就拿form中的元素來說明這個選擇器的用法，比如你想對form中所有input加邊框，但又不想submit也起變化，此時就可以使用:not為實現
css選擇器 CSS選擇器總結
在前不久的專案中，實習小妹妹在乙個全域性的樣式中使用了下面這個css選擇器 content 對應的html結構大致是 實習妹子大致的意思是想要讓content下的子元素div的高度100 但是貌似她沒有真正理解first child的意義，從而導致這個全域性的樣式讓 所有頁面都出現了問題，然後我就只...
CSS選擇器總結
通用選擇器 選擇所有元素 css2 型別選擇器 element 根據型別選擇元素 css1 類選擇器 class 根據全域性屬性class的值選擇元素 css1 id選擇器 id 根據全域性屬性id的值選擇元素 css1 屬性選擇器 attr 基於屬性選擇元素 css2 attr val 選擇定義a...
CSS選擇器總結
今天在做demo的時候偶然發現 自己對css選擇器的使用並不熟練 遂即在w3school上把內容又看了一遍 下面做些整理 1.元素選擇器 直接使用標籤即元素選擇 html h1 h2 h2,p 同時應用在h2和p 2.萬用字元選擇器 使文件中所有元素的 color 屬性值指定為 red 3.類選擇器...