css 選擇器之子元素

2022-04-09 06:16:52 字數 952 閱讀 9958

/*html*/12


34/*css*/


.wrap


.wrap span



//選擇父元素下的第二個子元素，且為span


.wrap span:nth-child(2)
但是如果子元素是混亂的，比如：

1p2


34
nth-child(2)會選擇第2個子元素，而且子元素必須是span，但是沒找到（第二個子元素為p）

.wrap span:nth-child(3)
nth-child(3)會選擇第3個子元素，而且子元素必須是span

相關

//選擇父元素下的第二個span


.wrap span:nth-of-type(2)
同樣的html，nth-of-type(2) 會找到子元素的第2個span，不管有沒有其他元素阻礙

相關

1


/*css*/


.wrap span:only-child
只有父元素下有乙個子元素時，才會生效

當有其他任意標籤時，不生效

only-child應用比較少

相關

對比於only-child，only-of-type允許父元素下有其他類的子元素

// 這時會選中唯一的span元素12


.wrap span:only-of-type
相關

jQuery選擇器之子元素篩選選擇器

子元素篩選選擇器不常使用，其篩選規則比起其它的選擇器稍微要複雜點 子元素篩選選擇器描述表 注意事項 first只匹配乙個單獨的元素，但是 first child選擇器可以匹配多個 即為每個父級元素匹配第乙個子元素。這相當於 nth child 1 last 只匹配乙個單獨的元素，last child...

jQuery選擇器之子元素篩選選擇器

子元素篩選選擇器不常使用，其篩選規則比起其它的選擇器稍微要複雜點 子元素篩選選擇器描述表 注意事項 first只匹配乙個單獨的元素，但是 first child選擇器可以匹配多個 即為每個父級元素匹配第乙個子元素。這相當於 nth child 1 last 只匹配乙個單獨的元素，last child...

CSS 元素選擇器

最常見的 css 選擇器是元素選擇器。換句話說，文件的元素就是最基本的選擇器。如果設定 html 的樣式，選擇器通常將是某個 html 元素，比如 p h1 em a，甚至可以是 html 本身 html h1 h2親自試一試 可以將某個樣式從乙個元素切換到另乙個元素。假設您決定將上面的段落文字 而...