doctype html
>
<
html
lang
="en"
>
<
head
>
<
title
>
結構性偽類選擇器
title
>
<
meta
charset
="utf-8"
>
<
meta
name
="viewport"
content
="width=device-width, initial-scale=1"
>
<
style
>
a:hover
/* first-line偽元素選擇器：用於某個元素的第一行文字使用樣式 */
.p1::first-line
/* first-letter:用於為某個元素的文字的首字母 或第乙個字使用的樣式 */
.p2::first-letter
/* before after */
/* before在元素的開頭插入內容 */
.p1::before
/* before在元素的結尾插入內容 */
.p1::after
/* not選擇器，排除選擇的元素 */
/* body *:not(a) */
:target
/* nth-child nth-last-child */
/* nth-child()從元素的開頭數第幾個元素的樣式 */
ul li:nth-child(3)
ul li:nth-last-child(2)
/* nth-child()設定奇數和偶數樣式時，是針對所有的子元素 */
/* 奇數樣式 */
.s-ul li:nth-child(odd)
/* 偶數行樣式 */
.s-ul li:nth-child(even)
/* 使用nth-of-type() 和 nth-last-of-type() */
.s-div h4:nth-of-type(odd)
.s-div h4:nth-of-type(even)
/* nth-child()使用迴圈樣式 */
.t-ul li:nth-child(
3n+1)
.t-ul li:nth-child(
3n+2)
.t-ul li:nth-child(
3n+3)
/* only-child() 某個父元素只有乙個子元素才使用的選擇器*/
li:only-child
<
/style
>
head
>
<
body
>
<
pclass
="p1"
>
11111111
<
br/>
222222
p>
<
pclass
="p2"
>
hello world
p>
<
p>3p
>
<
p>4p
>
<
p>5p
>
<
a>
hover
a>
>
="menu"
>
<
ahref
="#text1"
>1a
>
<
ahref
="#text2"
>2a
>
<
ahref
="#text3"
>3a
>
<
ahref
="#text4"
>4a
>
<
ahref
="#text5"
>5a
>
p>
<
divid
="text1"
>
text1
div>
<
divid
="text2"
>
text3
div>
<
divid
="text3"
>
text3
div>
<
divid
="text4"
>
text3
div>
<
divid
="text4"
>
text5
div>
>
<
ul>
<
li>
li1li
>
<
li>
li2li
>
<
li>
li3li
>
<
li>
li4li
>
<
li>
li5li
>
ul>
>
<
ulclass
="s-ul"
>
<
li>
li1li
>
<
li>
li2li
>
<
li>
li3li
>
<
li>
li4li
>
<
li>
li5li
>
<
li>
li6li
>
ul>
>
<
divclass
="s-div"
>
<
h4>1h4
>
<
p>1p
>
<
h4>2h4
>
<
p>2p
>
<
h4>3h4
>
<
p>3p
>
<
h4>4h4
>
<
p>4p
>
<
h4>5h4
>
<
p>6p
>
div>
>
<
h3>
nth-child()迴圈樣式
h3>
<
ulclass
="t-ul"
>
<
li>1li
>
<
li>2li
>
<
li>3li
>
<
li>4li
>
<
li>5li
>
<
li>6li
>
<
li>7li
>
<
li>8li
>
<
li>9li
>
<
li>
10li
>
<
li>
11li
>
<
li>
12li
>
ul>
<
ul>
<
li>
111111
li>
ul>
body
>
html
>
結構性偽類選擇器 root
root選擇器，從字面上我們就可以很清楚的理解是根選擇器，他的意思就是匹配元素e所在文件的根元素。在html文件中，根元素始終是。示例演示 通過 root 選擇器設定背景顏色 html root選擇器的演示 css root演示結果 root 選擇器等同於元素，簡單點說 root html 得到的效...
結構性偽類選擇器 nth child n
經驗與技巧 當 nth child n 選擇器中的n為乙個表示式時，其中n是從0開始計算，當表示式的值為0或小於0的時候，不選擇任何匹配的元素。如下表所示 案例演示 通過 nth child n 選擇器，並且引數使用表示式 2n 將偶數行列表背景色設定為橙色。html item1 item2 ite...
CSS3選擇器 結構性偽類選擇器
在學習結構性偽類選擇器之前，先了解2個概念 css中的偽類選擇器和偽元素 1 偽類選擇器 css中已經定義好的選擇器,不能隨便取名 常用的偽類選擇器是使用在a元素上的幾種，如a link a visited a hover a active 2 偽元素選擇器 並不是針對真正的元素使用的選擇器，而是針...