屬性選擇器可以根據元素特定屬性來選擇元素，這樣就可以不用藉助於類或者ID選擇器
/* 必須是input但是具有value這個屬性 */
input[value] {
color: pink;
}
/* 只選擇type=text文本框的input */
input[type=text] {
color: pink;
}
/* 首先是div 然後具有class屬性 且屬性開頭以icon */
div[class^=icon] {
color: powderblue;
}
section[class$=data] {
color: purple;
}
結構偽類選擇棄主要根據文檔結構來選擇元素，經常用於根據父級選擇器裡面的子元素
nth-child(n) 選擇某個父元素的一個或多個特定的子元素
<style>
/* 選擇ul裡面的第一個li */
ul li:first-child {
background-color: purple;
}
/* 選擇最後一個li */
ul li:last-child {
background-color: red;
}
/* 選擇第3個li */
ul li:nth-child(3) {
background-color: royalblue;
}
/* 把所有偶數的li都選出來 */
ul li:nth-child(even) {
background-color: darkcyan;
}
/* 把所有奇數的li都選出來 */
ul li:nth-child(odd) {
background-color: powderblue;
}
/* nth-child(n) 從0開始 每次+1 往後面計算 這裡面必須是n 不能是其他字母 選擇了所有li*/
ol li:nth-child(n) {
background-color: rosybrown;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ol>
</body>
備註:
::before 在元素的前面插入內容
::after 在元素的後面插入內容
備註:
iThome鐵人賽
看影片追技術