首頁 > 開發者 > JavaScript
CSS 筆記之 CSS 選取器，css筆記選取器
閱讀目錄
代碼：
<!DOCTYPE html><html><head><title>這是網頁標題</title><style type="text/css">/*<style> 元素裡面的是 CSS 代碼*/p{color: red;}</style></head><body><p>段落是紅色的。</p></body></html>
運行結果為：
段落是紅色的。
注意：
返回頂部基礎選取器分為：
代碼：
<!DOCTYPE html><html><head><title>這是網頁標題</title><style type="text/css">/*<style> 元素裡面的是 CSS 代碼*/p{color: red;}</style></head><body><p>這個段落是紅色的。</p><p>這個段落也是紅色的。</p><p>這個段落還是紅色的。</p></body></html>
運行結果為：
這個段落是紅色的。
這個段落也是紅色的。
這個段落還是紅色的。
注意：
返回 基礎選取器目錄代碼：
<!DOCTYPE html><html><head><title>這是網頁標題</title><style type="text/css">/*<style> 元素裡面的是 CSS 代碼*/.example{background-color: yellow;}</style></head><body><p class="example">這個段落的背景顏色是黃色的。</p><p>這個段落沒有設定背景顏色。</p></body></html>
運行結果為：
這個段落的背景顏色是黃色的。
這個段落沒有設定背景顏色。
注意：
返回 基礎選取器目錄代碼：
<!DOCTYPE html><html><head><title>這是網頁標題</title><style type="text/css">/*<style> 元素裡面的是 CSS 代碼*/#example{font-size: 50px;}</style></head><body><!--最好在同一個 HTML 文檔中所有的 id 名稱都不相同--><p id="example">這個段落的字型變大了。</p><p>這個段落沒有設定字型的大小。</p></body></html>
運行結果為：
這個段落的字型變大了。
這個段落沒有設定字型的大小。
注意：
返回 基礎選取器目錄代碼：
<!DOCTYPE html><html><head><title>這是網頁標題</title><style type="text/css">/*<style> 元素裡面的是 CSS 代碼*/*{color: red;}</style></head><body><h1>我是紅色的。</h1><h3>我是紅色的。</h3><p>我也是紅色的。</p><a href="http://www.baidu.com">我還是紅色的</a></body></html>
運行結果為：
我是紅色的。我是紅色的。我也是紅色的。
我還是紅色的注意：
返回 基礎選取器目錄代碼1：
<!DOCTYPE html><html><head><title>這是網頁標題</title><style type="text/css">/*<style> 元素裡面的是 CSS 代碼*/[href]{color: red;}</style></head><body><p>匹配屬性為 href 的元素：</p><a href="http://www.baidu.com">百度</a></body></html>
運行結果為：
匹配屬性為 href 的元素：
百度注意：
代碼2：
<!DOCTYPE html><html><head><title>這是網頁標題</title><style type="text/css">/*<style> 元素裡面的是 CSS 代碼*/[href="#top"]{color: red;}[href="#top1"]{color: gray;}</style></head><body><p>完全符合，只匹配屬性和值都相同的元素：</p><a href="#top">返回頂部</a><br /><a href="#top1">返回 基礎選取器目錄</a></body></html>
運行結果為：
完全符合，只匹配屬性和值都相同的元素：
返回頂部注意：
代碼3：
<!DOCTYPE html><html><head><title>這是網頁標題</title><style type="text/css">/*<style> 元素裡面的是 CSS 代碼*/[href*=baidu]{color: orange;}</style></head><body><p>通過屬性和屬性值中的字串進行匹配：</p><a href="http://www.baidu.com">百度</a><br /><a href="https://www.tieba.baidu.com/">百度貼吧</a></body></html>
運行結果為：
通過屬性和屬性值中的字串進行匹配：
百度注意：
屬性選取器還有很多，這裡只列舉了其中的三種
其他的屬性選取器可以參考 https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
組合選取器：
代碼：
<!DOCTYPE html><html><head><title>這是網頁標題</title><style type="text/css">/*<style> 元素裡面的是 CSS 代碼*/p + span{background-color: orange;}</style></head><body><p>這是一個段落。</p><span>這是一段測試文字</span><p>這是另外一個段落。</p><br /><span>這是另外一段測試文字</span></body></html>
運行結果為：
這是一個段落。
這是一段測試文字這是另外一個段落。
注意：
返回 組合選取器目錄代碼：
<!DOCTYPE html><html><head><title>這是網頁標題</title><style type="text/css">/*<style> 元素裡面的是 CSS 代碼*/p ~ span{background-color: orange;}</style></head><body><p>這是一個段落。</p><span>這是一段測試文字</span><p>這是另外一個段落。</p><br /><span>這是另外一段測試文字</span></body></html>
運行結果為：
這是一個段落。
這是一段測試文字這是另外一個段落。
注意：
返回 組合選取器目錄代碼：
<!DOCTYPE html><html><head><title>這是網頁標題</title><style type="text/css">/*<style> 元素裡面的是 CSS 代碼*/div > span{background-color: yellow;}</style></head><body><div><span>測試文字1</span><p><span>測試文字2</span></p><span>測試文字3</span></div></body></html>
運行結果為：
測試文字1測試文字2
測試文字3注意：
返回 組合選取器目錄代碼：
<!DOCTYPE html><html><head><title>這是網頁標題</title><style type="text/css">/*<style> 元素裡面的是 CSS 代碼*/div span{background-color: yellow;}</style></head><body><div><span>測試文字1</span><p><span>測試文字2</span></p><span>測試文字3</span></div></body></html>
運行結果為：
測試文字1測試文字2
測試文字3注意：
返回 組合選取器目錄偽選取器：
代碼1：
<!DOCTYPE html><html><head><title>這是網頁標題</title><style type="text/css">/*<style> 元素裡面的是 CSS 代碼*/a:hover{color: red;}</style></head><body><p>滑鼠懸浮在下面這個連結上的時候，連結會變成紅色：</p><a href="http://www.baidu.com">百度</a></body></html>
運行結果為：
滑鼠懸浮在下面這個連結上的時候，連結會變成紅色：
百度注意：
代碼2：
<!DOCTYPE html><html><head><title>這是網頁標題</title><style type="text/css">/*<style> 元素裡面的是 CSS 代碼*/p:first-child{background-color: yellow;}</style></head><body><p>這是 body 的第一個子項目</p><div id="1"><p>這是 id="1" 的 div 的第一個子項目</p><p>這是 id="1" 的 div 的第二個子項目</p></div id="2"><div><span>這是 id="2" 的 div 的第一個子項目</span><p>這是 id="2" 的 div 的第二個子項目</p></div></body></html>
運行結果為：
這是 body 的第一個子項目
這是 id="1" 的 div 的第一個子項目
這是 id="1" 的 div 的第二個子項目
這是 id="2" 的 div 的第一個子項目這是 id="2" 的 div 的第二個子項目
注意：
代碼3：
<!DOCTYPE html><html><head><title>這是網頁標題</title><style type="text/css">/*<style> 元素裡面的是 CSS 代碼*/p:nth-child(1){background-color: yellow;}p:nth-child(2){background-color: gray;}</style></head><body><p>這是 body 的第一個子項目</p><div id="1"><p>這是 id="1" 的 div 的第一個子項目</p><p>這是 id="1" 的 div 的第二個子項目</p></div id="2"><div><span>這是 id="2" 的 div 的第一個子項目</span><p>這是 id="2" 的 div 的第二個子項目</p></div></body></html>
運行結果為：
這是 body 的第一個子項目
這是 id="1" 的 div 的第一個子項目
這是 id="1" 的 div 的第二個子項目
這是 id="2" 的 div 的第一個子項目這是 id="2" 的 div 的第二個子項目
注意：
返回 偽選取器目錄虛擬元素選取器是 CSS3 中的用法
例如：/* CSS3 syntax */::after/* CSS2 syntax */:after
具體用法參考 https://developer.mozilla.org/en-US/docs/Web/CSS/::after
返回 偽選取器目錄CSS 的選取器大概可以分為三大類：基礎選取器、組合選取器、偽選取器
這三大類可以單獨使用，也可以混合使用
例如：
<!DOCTYPE html><html><head><title>這是網頁標題</title><style type="text/css">/*<style> 元素裡面的是 CSS 代碼*/p#test{color: red;}</style></head><body><p id="test">這是一個段落。</p><p>這也是一個段落。</p></body></html>
運行結果為：
這是一個段落。
這也是一個段落。
注意：
CSS 參考文檔 https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
返回頂部Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
