3.SRE.操作手冊：基礎篇
阿新 • • 發佈：2022-04-13
一、屬性選擇器
類選擇器、屬性選擇器、偽類選擇器，權重為 10
<style> button[disabled] { background: pink; } input[type="search"] { background: skyblue; } </style> <body> <div> <button>普通按鈕</button> <button disabled>禁用按鈕</button> <input type="text" placeholder="文字框"> <input type="search" placeholder="搜尋框"> </div> </body>
二、結構偽類選擇器
類選擇器、屬性選擇器、偽類選擇器，權重為 10
nth-child（n）
1、n可以是數字，關鍵字和公式
2、n如果是數字，就是選擇第n個
3、常見的關鍵詞 even 偶數 odd 奇數
4、常見的公式如下 ( 如果n是公式，則從0開始計算）
5、但是 第0個元素或者超出了元素的個數會被忽略 )
nth-child() 與nth-of-type()的區別
相同點：兩者都表示父元素下面的某個子元素
//都表示div下面的第一個元素 div :nth-child(1) { background: pink; } div :nth-of-type(1) { background-color:yellow; }
不同點：主要體現在冒號前面有指定某種標籤時的區別
//表示div下面的第一個元素並且是span標籤 div span:nth-child(1) { background: pink; } //表示div下面的第一個span標籤 div span:nth-of-type(1) { background-color:yellow; } <div> <p>我是p標籤</p> <span>我是span1</span> <span>我是span2</span> <span>我的span3</span> </div>
以上程式碼結果如下：
我們發現 nth-child 屬性沒有生效，原因是，div span:nth-child(1) 表示div下面的第一個元素，並且是span標籤，而這裡第一個元素顯然是p，所以不生效。