什麼是css選擇器？ css基本選擇器的總結（九種）
什麼是css選擇器？ css選擇器就是指定CSS要作用的標籤，那個標籤的名稱就是選擇器。意味：選擇哪個容器。 HTML頁面中的元素就是透過CSS選擇器來控制的。那麼，css選擇器有哪些呢？下面我們來看一看css常用的選擇器
1 : css通配符選擇器
通配符選擇器用星號(*)來表示,例如:
*{
font-size : 12px;
}表示所有的元素的字體大小都是12px;
2 : css分組選擇器
當幾個元素樣式屬性一樣時，可以共同呼叫一個聲明，元素之間用逗號分隔。例如：
p, li {
line-height:20px;
color:#c00;
}
#main p, #sider span {
color:#000;
line-height:26px;
}使用分組選擇器，將會大大的簡化CSS程式碼，將具有多個相同屬性的元素，合併分組進行選擇，定義同樣的CSS屬性，這大大的提高了編碼效率，同時也減少了CSS檔案的體積。
3 : css標籤選擇器
一個完整的HTML頁面是有很多不同的標籤組成，而標籤選擇器，則是決定哪些標籤採用對應的CSS樣式,例如:
p{
color: red;
}這段程式碼會讓所有的p標籤都變成紅色
4 : css類選擇器
類選擇器以class屬性中有指定類別名稱的任何元素為目標,類別選擇器以一個"."符號開頭例如:
.info {
color:black;
}這樣會讓所有類別名為info的類別的元素顏色都變為黑色
5 :css ID選擇器
ID 選擇器可以為標有特定ID 的HTML 元素指定特定的樣式;ID選擇符以一個「# ”符號開頭。例如:
#demop{
color:#000;
}這裡代表id為demop的元素的設定它的字體顏色為黑色。
6 : css偽類選擇器
有時候還會需要用文件以外的其他條件來套用元素的樣式，例如滑鼠懸停等。這時候我們就需要用到偽類了。以下是連結應用程式的偽類定義。例如:
a:link{
color:green ;
font-size: 50px
}
a:hover{
color:pink;
font-size: 50px
}
a:active{
color:yellow;
font-size: 50px
}
a:visited{
color:red;
font-size: 50px
}效果:
打開網頁時標籤為綠色
將滑鼠放在標籤上時標籤為粉紅色
點擊標籤是標籤為黃色
點擊後標籤為紅色.
7 : css後位選擇器
後位選擇器用來選擇特定元素或元素組的後代，將對父元素的選擇放在前面，對子元素的選擇放在後面，中間加一個空格分開。後代選擇器中的元素不僅只能有兩個，對於多層祖先後代關係，可以有多個空格加以分開，如id為a、b、c的三個元素，則後代選擇器可以寫成#a #b #c{}的形式，只要祖先元素的選擇在後代元素之前、中間以空格分開即可。例如:
#people em{
color: red;
}這個規則把ID值為「people」的元素中包含任何em元素的顏色設為紅色。
8 : css組合選擇器
可以把兩種或多種類型的選擇組合式使用;例如:
p.info {
color:blue;
}它只選擇屬於info類別的段落，屬於該類別的別種元素和其他不屬於info類別的段落將被忽略。
9 : css屬性選擇器
格式：基本選擇器[屬性= '屬性值']{ },也可以只寫屬性,例如:
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style type="text/css">
input[type = 'text'] {background-color: red}
input[type = 'password'] {background-color: pink}
</style>
</head>
<body>
<form>
name:<input type = "text"><br/>
pass:<input type = "password">
</form>
</body>
</html>運行結果： 
css選擇器優先權大小:
!important >行間樣式>ID選擇器> 類別|屬性選擇器> 標籤> 通配符> 繼承> 瀏覽器預設屬性
當有一些複雜選擇器不能透過優先權的大小比出,那麼我們就要用到權重進行計算
css選擇器權重計算:
|
| 無窮大|
| 1000 | |
| ##100 | |
|
#10 |
|
|
| #1
0 |
將每一行上的所有選擇器轉換為這些數值進行相加得的結果越大則優先權越高!
相關文章推薦：
相關課程推薦：以上是什麼是css選擇器？ css基本選擇器的總結（九種）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undress AI Tool
免費脫衣圖片
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Stock Market GPT
人工智慧支援投資研究，做出更明智的決策
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
如何調整HTML文字方塊的大小
Feb 20, 2024 am 10:03 AM
HTML文字方塊大小的設定在前端開發中是非常常見的操作。本文將介紹如何設定文字方塊的尺寸，並提供具體的程式碼範例。在HTML中，可以使用CSS來設定文字方塊的尺寸。具體的程式碼如下：input[type="text"
H5頁面製作究竟指什麼
Apr 06, 2025 am 07:18 AM
H5 頁面製作是指使用 HTML5、CSS3 和 JavaScript 等技術，創建跨平台兼容的網頁。其核心在於瀏覽器解析代碼，渲染結構、樣式和交互功能。常見技術包括動畫效果、響應式設計和數據交互。為避免錯誤，應使用開發者工具調試；而性能優化和最佳實踐則包括圖像格式優化、減少請求和代碼規範等，以提高加載速度和代碼質量。
如何調整WordPress主題避免錯位顯示
Mar 05, 2024 pm 02:03 PM
如何調整WordPress主題避免錯位顯示，需要具體程式碼範例WordPress作為一個功能強大的CMS系統，受到了許多網站開發者和站長的喜愛。然而，在使用WordPress建立網站時，經常會遇到主題錯位顯示的問題，這對於使用者體驗和頁面美觀都會造成影響。因此，合理調整WordPress主題以避免錯位顯示是非常重要的。本文將介紹如何透過具體的程式碼範例來進行主題調
H5頁面製作的流程
Apr 06, 2025 am 09:03 AM
H5頁面製作流程：設計：規劃頁面佈局、風格和內容；HTML結構搭建：使用HTML標籤構建頁面框架；CSS樣式編寫：用CSS控制頁面外觀和佈局；JavaScript交互實現：編寫代碼實現頁面動效和交互；性能優化：壓縮圖片、代碼和減少HTTP請求，提升頁面加載速度。
為什麼Edge瀏覽器中的特定div元素無法顯示？如何解決這個問題？
Apr 05, 2025 pm 08:21 PM
如何解決用戶代理樣式表導致的顯示問題？在使用Edge瀏覽器時，項目中的一個div元素無法顯示。經過查看，發�...
Angular應用中：如何通過鼠標懸停改變圖標顏色？
Apr 05, 2025 pm 02:15 PM
在Angular應用中，如何實現鼠標懸停在圖標上時改變圖標的顏色？許多開發者在使用Angular構建應用時，會遇到需�...
動態網頁元素XPath和Class名變化頻繁，如何穩定抓取目標a標籤？
Apr 01, 2025 pm 04:12 PM
動態網頁元素抓取難題：應對XPath和Class名變化很多爬蟲開發者在抓取動態網頁時會遇到一個棘手的問題：目標�...
Bootstrap如何調試
Apr 07, 2025 am 10:00 AM
調試 Bootstrap 涉及理解其 CSS 和 JS 工作機制以及掌握以下技巧：使用開發者工具檢查樣式衝突，調整優先級或使用更具體的 CSS 選擇器。設置斷點並使用 Sources 面板跟踪 JS 組件的問題。仔細閱讀 Bootstrap 文檔以了解正確使用方法。使用 autoprefixer 等工具確保瀏覽器兼容性。寫乾淨的代碼，使用有意義的類名和添加註釋，以提高調試效率。
