HTML+CSS學習筆記（8）- CSS選擇器

来源:http://www.cnblogs.com/wanglongshuai/archive/2016/03/04/5241447.html
-Advertisement-
Play Games

標簽：HTML+CSS 什麼是選擇器？ 每一條css樣式聲明（定義）由兩部分組成，形式如下： 在{}之前的部分就是“選擇器”，“選擇器”指明瞭{}中的“樣式”的作用對象，也就是“樣式”作用於網頁中的哪些元素 標簽選擇器 標簽選擇器其實就是html代碼中的標簽。如下麵代碼中的 、``、 。例如下麵代碼


標簽：HTML+CSS

什麼是選擇器？

每一條css樣式聲明（定義）由兩部分組成，形式如下：

選擇器{
    樣式;
}

在{}之前的部分就是“選擇器”，“選擇器”指明瞭{}中的“樣式”的作用對象，也就是“樣式”作用於網頁中的哪些元素

標簽選擇器

標簽選擇器其實就是html代碼中的標簽。如下麵代碼中的<html>、<body>、<h1>、<p>、<img>。例如下麵代碼：

p{font-size:12px;line-height:1.6em;}

上面的css樣式代碼的作用：為p標簽設置12px字型大小，行間距設置1.6em的樣式。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>認識html標簽</title>
<style type="text/css">
h1{
    font-weight:normal;
    color:red;
    }
</style>
</head>
<body>
    <h1>勇氣</h1>
    <p>三年級時，我還是一個膽小如鼠的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p>
    <p>到了三年級下學期時，我們班上了一節公開課，老師提出了一個很簡單的問題，班裡很多同學都舉手了，甚至成績比我差很多的，也舉手了，還說著："我來，我來。"我環顧了四周，就我沒有舉手。</p>
    <img src="http://a.hiphotos.baidu.com/zhidao/wh%3D600%2C800/sign=e655190ad2160924dc70aa1de43719c2/bd315c6034a85edfdd19807f4b540923dc5475d0.jpg" >
</body>
</html>

類選擇器

類選擇器在css樣式編碼中是最常用到的，如下邊代碼中的代碼:可以實現為“膽小如鼠”、“勇氣”字體設置為紅色。

語法：

.類選器名稱{css樣式代碼;}

註意：

1、英文圓點開頭

2、其中類選器名稱可以任意起名（但不要起中文）

使用方法：

第一步：使用合適的標簽把要修飾的內容標記起來，如下：

<span>膽小如鼠</span>

第二步：使用class="類選擇器名稱"為標簽設置一個類，如下：

<span class="stress">膽小如鼠</span>

第三步：設置類選器css樣式，如下：

.stress{color:red;}/*類前面要加入一個英文圓點*/

如下代碼

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>認識html標簽</title>
<style type="text/css">
.stress{
    color:red;
}
.setGreen{
    color:green;
}
</style>
</head>
<body>
    <h1>勇氣</h1>
    <p>三年級時，我還是一個<span class="stress">膽小如鼠</span>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個<span class="stress">勇氣</span>來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p>
    <p>到了三年級下學期時，我們班上了一節<span class="setGreen">公開課</span>，老師提出了一個很簡單的問題，班裡很多同學都舉手了，甚至成績比我差很多的，也舉手了，還說著："我來，我來。"我環顧了四周，就我沒有舉手。</p>
    <img src="http://a.hiphotos.baidu.com/zhidao/wh%3D600%2C800/sign=e655190ad2160924dc70aa1de43719c2/bd315c6034a85edfdd19807f4b540923dc5475d0.jpg" >
</body>
</html>

ID選擇器

在很多方面，ID選擇器都類似於類選擇符，但也有一些重要的區別：

1、為標簽設置id="ID名稱"，而不是class="類名稱"。

2、ID選擇符的前面是井號（#）號，而不是英文圓點（.）。

下麵代碼中就是一個ID選擇符的完整實例。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>認識html標簽</title>
<style type="text/css">
#stress{
    color:red;
}
#setGreen{
    color:green;
}

</style>
</head>
<body>
    <h1>勇氣</h1>
    <p>三年級時，我還是一個<span id="stress">膽小如鼠</span>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p>
    <p>到了三年級下學期時，我們班上了一節<span id="setGreen">公開課</span>，老師提出了一個很簡單的問題，班裡很多同學都舉手了，甚至成績比我差很多的，也舉手了，還說著："我來，我來。"我環顧了四周，就我沒有舉手。</p>

</body>
</html>

類和ID選擇器的區別

學習了類選擇器和ID選擇器，我們會發現他們之間有很多的相似處，是不是兩者可以通用呢？我們不要著急先來總結一下他們的相同點和不同點：

相同點：可以應用於任何元素
不同點：

1、ID選擇器只能在文檔中使用一次。與類選擇器不同，在一個HTML文檔中，ID選擇器只能使用一次，而且僅一次。而類選擇器可以使用多次。

下麵代碼是正確的：

 <p>三年級時，我還是一個<span class="stress">膽小如鼠</span>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個<span class="stress">勇氣</span>來回答老師提出的問題。</p>

而下麵代碼是錯誤的：

 <p>三年級時，我還是一個<span id="stress">膽小如鼠</span>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個<span id="stress">勇氣</span>來回答老師提出的問題。</p>

2、可以使用類選擇器詞列表方法為一個元素同時設置多個樣式。我們可以為一個元素同時設多個樣式，但只可以用類選擇器的方法實現，ID選擇器是不可以的（不能使用 ID 詞列表）。

下麵的代碼是正確的(完整代碼見下麵代碼)

.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}
<p>到了<span class="stress bigsize">三年級</span>下學期時，我們班上了一節公開課...</p>

上面代碼的作用是為“三年級”三個文字設置文本顏色為紅色並且字型大小為25px。

下麵的代碼是不正確的(完整代碼見下麵代碼)

#stressid{
    color:red;
}
#bigsizeid{
    font-size:25px;
}
<p>到了<span id="stressid bigsizeid">三年級</span>下學期時，我們班上了一節公開課...</p>

上面代碼不可以實現為“三年級”三個文字設置文本顏色為紅色並且字型大小為25px的作用。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>類和ID選擇器的區別</title>
<style type="text/css">
.stress{
    color:red;
}
.bigsize{
    font-size:25px;
}
#stressid{
    color:red;
}
#bigsizeid{
    font-size:25px;
}
</style>
</head>
<body>
    <h1>勇氣</h1>
    <p>三年級時，我還是一個<span class="stress">膽小如鼠</span>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個<span class="stress">勇氣</span>來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p>
    <p>到了<span class="stress bigsize">三年級</span>下學期時，我們班上了一節公開課，老師提出了一個很簡單的問題，班裡很多同學都舉手了，甚至成績比我差很多的，也舉手了，還說著："我來，我來。"我環顧了四周，就我沒有舉手。</p>
     <p>到了<span id="stressid bigsizeid">三年級</span>下學期時，我們班上了一節公開課，老師提出了一個很簡單的問題，班裡很多同學都舉手了，甚至成績比我差很多的，也舉手了，還說著："我來，我來。"我環顧了四周，就我沒有舉手。</p>
    
</body>
</html>

子選擇器

還有一個比較有用的選擇器子選擇器，即大於符號(>),用於選擇指定標簽元素的第一代子元素。如右側代碼編輯器中的代碼：

.food>li{border:1px solid red;}

這行代碼會使class名為food下的子元素li（水果、蔬菜）加入紅色實線邊框。
如下：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>子選擇符</title>
<style type="text/css">
.food>li{border:1px solid red;}/*添加邊框樣式（粗細為1px， 顏色為紅色的實線）*/
.first>span{border:1px solid red;}
</style>
</head>
<body>
<p class="first">三年級時，<span>我還是一個<span>膽小如鼠</span>的小女孩</span>，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p>
<h1>食物</h1>
<ul class="food">
    <li>水果
        <ul class="food">
            <li>香蕉</li>
            <li>蘋果</li>
            <li>梨</li>
        </ul>
    </li>
    <li>蔬菜
        <ul>
            <li>白菜</li>
            <li>油菜</li>
            <li>捲心菜</li>
        </ul>
    </li>
</ul>
</body>
</html>

包含(後代)選擇器

包含選擇器，即加入空格,用於選擇指定標簽元素下的後輩元素。如xia：

.first  span{color:red;}

這行代碼會使第一段文字內容中的“膽小如鼠”字體顏色變為紅色。

請註意這個選擇器與子選擇器的區別，子選擇器（child selector）僅是指它的直接後代，或者你可以理解為作用於子元素的第一代後代。而後代選擇器是作用於所有子後代元素。後代選擇器通過空格來進行選擇，而子選擇器是通過“>”進行選擇。

總結：>作用於元素的第一代後代，空格作用於元素的所有後代。
如下：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>後代選擇器</title>
<style type="text/css">
.first span{color:red;}

.food li{
    border:1px solid red;/*添加邊框樣式（粗細為1px， 顏色為紅色的實線）*/   
}
</style>
</head>
<body>
 <p class="first">三年級時，我還是一個<span>膽小如鼠</span>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p>
<!--下麵是本小節任務代碼-->
<ul class="food">
    <li>水果
        <ul>
            <li>香蕉</li>
            <li>蘋果</li>
            <li>梨</li>
        </ul>
    </li>
    <li>蔬菜
        <ul>
            <li>白菜</li>
            <li>油菜</li>
            <li>捲心菜</li>
        </ul>
    </li>
</ul>

</body>
</html>

通用選擇器

通用選擇器是功能最強大的選擇器，它使用一個（*）號指定，它的作用是匹配html中所有標簽元素，如下使用下麵代碼使用html中任意標簽元素字體顏色全部設置為紅色：

* {color:red;}
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>* 選擇符</title>
<style type="text/css">
* {color:red; font-size:20px;}


</style>
</head>
<body>
    <h1>勇氣</h1>
    <p>三年級時，我還是一個膽小如鼠的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p>
    <p>到了三年級下學期時，我們班上了一節公開課，老師提出了一個很簡單的問題，班裡很多同學都舉手了，甚至成績比我差很多的，也舉手了，還說著："我來，我來。"我環顧了四周，就我沒有舉手。</p>
</body>
</html>

偽類選擇符

更有趣的是偽類選擇符，為什麼叫做偽類選擇符，它允許給html不存在的標簽（標簽的某種狀態）設置樣式，比如說我們給html中一個標簽元素的滑鼠滑過的狀態來設置字體顏色：

a:hover{color:red;}

上面一行代碼就是為 a 標簽滑鼠滑過的狀態設置字體顏色變紅。這樣就會使第一段文字內容中的“膽小如鼠”文字加入滑鼠滑過字體顏色變為紅色特效。

關於偽選擇符：
關於偽類選擇符，到目前為止，可以相容所有瀏鑒器的“偽類選擇符”就是 a 標簽上使用 :hover 了（其實偽類選擇符還有很多，尤其是css3中，但是因為不能相容所有瀏覽器，所以只是講了這一種最常用的）。其實:hover 可以放在任意的標簽上，比如說 p:hover，但是它們的相容性也是很不好的，所以現在比較常用的還是a:hover的組合。

 <p class="first">三年級時，我還是一個<a href="http://www.baidu.com">膽小如鼠</a>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p>

分組選擇符

當你想為html中多個標簽元素設置同一個樣式時，可以使用分組選擇符（，），如下代碼為右側代碼編輯器中的h1、span標簽同時設置字體顏色為紅色：

h1,span{color:red;}

它相當於下麵兩行代碼：

h1{color:red;}
span{color:red;}

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Css攻剋Selectors 一
    Selectors (選擇器) ---------------參考MDN中css學習。 首先css選擇器有很多，但總體概括起來的話有兩種： 標簽選擇器（*是特殊情況），可但標簽，也可上下文多標簽； 屬性選擇器（id和class都是屬性，特殊的屬性）； 標簽選擇器~單標簽 指此單個的標簽名字，使用時可
  • 9款免費的跨瀏覽器測試工具
    網站開發人員經常需要檢查網站的相容性，在各種瀏覽器中，以確保網站的作品完美地在所有的瀏覽器。為此，有大量的跨瀏覽器測試工具，可以幫助開發人員檢查他們的網站之前，他們的網站是。 這裡是全集合的一些最好的免費以及高級跨瀏覽器測試工具，將允許開發人員測試一切。我們希望你會喜歡這個集合，併發現這些工具對你有
  • HTML5 基礎
    1、HTML5 簡介 HTML5 是最新的 HTML 標準，他是萬維網的核心語言、標準通用標記語言下的一個應用“超文本標記語言”。 HTML 的上一個標準 HTML4.01 誕生於 1999年，他的第一代標準誕生於 1995年，自此 Web 世界經歷了巨變，在 HTML4.01 中提出了網頁結構與表
  • div盒子模型(一圖勝千言)
    offsetLeft 獲取的是相對於父對象的左邊距 left 獲取或設置相對於 具有定位屬性(position定義為relative)的父對象 的左邊距 如果父div的position定義為relative,子div的position定義為absolute，那麼子div的style.left的值是相
  • TypeScript Generics(泛型)
    軟體工程的一個主要部分就是構建組件，構建的組件不僅需要具有明確的定義和統一的介面，同時也需要組件可復用。支持現有的數據類型和將來添加的數據類型的組件為大型軟體系統的開發過程提供很好的靈活性。 在C#和Java中，可以使用"泛型"來創建可復用的組件，並且組件可支持多種數據類型。這樣便可以讓用戶根據自己
  • HTTP狀態碼的解讀
    1xx這一類型的狀態碼，代表請求已被接受，需要繼續處理。這類響應是臨時響應，只包含狀態行和某些可選的響應頭信息，並以空行結束。由於 HTTP/1.0 協議中沒有定義任何 1xx 狀態碼，所以除非在某些試驗條件下，伺服器禁止向此類客戶端發送 1xx響應。 100 Continue 客戶端應當繼續發送請
  • HTML系列（六）：劃分文檔結構
    常見的網頁結構佈局是醬紫的，真是美美噠^O^： 一、添加基本標題h1~h6（沒什麼好說的）； 二、標題分組hgroup <hgroup>用來將標題和子標題進行分組。如果一篇文章article或一個區塊section里只有一個標題，就不用分組。如果出現多個標題，可以用hgroup將標題框起來。 <se
  • 最鋒利的Visual Studio Web開發工具擴展：Web Essentials詳解(轉)
    Web Essentials是目前為止見過的最好用的VS擴展工具了，具體功能請待我一一道來。 首先，從Extension Manager里安裝：最新版本是19號發佈的2.5版 然後重啟你的VS開發環境，就可以使用它提供的方便功能了。 Web Essentials對CSS、JavaScript和HTM
一周排行
    -Advertisement-
    Play Games
  • UOS 開啟 VisualStudio 遠程調試 .NET 應用之旅
    前言 在我們開發過程中基本上不可或缺的用到一些敏感機密數據，比如SQL伺服器的連接串或者是OAuth2的Secret等，這些敏感數據在代碼中是不太安全的，我們不應該在源代碼中存儲密碼和其他的敏感數據，一種推薦的方式是通過Asp.Net Core的機密管理器。 機密管理器 在 ASP.NET Core ...
  • C# - 能否讓 SortedSet.RemoveWhere 內傳入的委托非同步執行
    新改進提供的Taurus Rpc 功能，可以簡化微服務間的調用，同時可以不用再手動輸出模塊名稱，或調用路徑，包括負載均衡，這一切，由框架實現並提供了。新的Taurus Rpc 功能，將使得服務間的調用，更加輕鬆、簡約、高效。 ...
  • 順序棧的介面程式
    順序棧的介面程式 目錄順序棧的介面程式頭文件創建順序棧入棧出棧利用棧將10進位轉16進位數驗證 頭文件 #include <stdio.h> #include <stdbool.h> #include <stdlib.h> 創建順序棧 // 指的是順序棧中的元素的數據類型，用戶可以根據需要進行修改 ...
  • mORMot2 獲取數據集1
    前言 整理這個官方翻譯的系列，原因是網上大部分的 tomcat 版本比較舊，此版本為 v11 最新的版本。 開源項目 從零手寫實現 tomcat minicat 別稱【嗅虎】心有猛虎，輕嗅薔薇。 系列文章 web server apache tomcat11-01-官方文檔入門介紹 web serv ...
  • 萬字長文總結與剖析C語言關鍵字 -- <<C語言深度解剖>>
    C總結與剖析:關鍵字篇 -- <<C語言深度解剖>> 目錄C總結與剖析:關鍵字篇 -- <<C語言深度解剖>>程式的本質:二進位文件變數1.變數:記憶體上的某個位置開闢的空間2.變數的初始化3.為什麼要有變數4.局部變數與全局變數5.變數的大小由類型決定6.任何一個變數,記憶體賦值都是從低地址開始往高地 ...
  • 【Flink入門修煉】2-3 Flink Checkpoint 原理機制
    如果讓你來做一個有狀態流式應用的故障恢復，你會如何來做呢？ 單機和多機會遇到什麼不同的問題？ Flink Checkpoint 是做什麼用的？原理是什麼？ ...
  • C++ 多級繼承與多重繼承：代碼組織與靈活性的平衡
    C++ 多級繼承 多級繼承是一種面向對象編程（OOP）特性，允許一個類從多個基類繼承屬性和方法。它使代碼更易於組織和維護，並促進代碼重用。 多級繼承的語法 在 C++ 中，使用 : 符號來指定繼承關係。多級繼承的語法如下： class DerivedClass : public BaseClass1 ...
  • 圖文結合手把手教你創建SpringCloud項目
    前言 什麼是SpringCloud？ Spring Cloud 是一系列框架的有序集合，它利用 Spring Boot 的開發便利性簡化了分散式系統的開發，比如服務註冊、服務發現、網關、路由、鏈路追蹤等。Spring Cloud 並不是重覆造輪子，而是將市面上開發得比較好的模塊集成進去，進行封裝，從 ...
  • 類模板的常見用法
    class_template 類模板和函數模板的定義和使用類似，我們已經進行了介紹。有時，有兩個或多個類，其功能是相同的，僅僅是數據類型不同。類模板用於實現類所需數據的類型參數化 template<class NameType, class AgeType> class Person { publi ...
  • system-v IPC共用記憶體通信
    目錄system v IPC簡介共用記憶體需要用到的函數介面shmget函數--獲取對象IDshmat函數--獲得映射空間shmctl函數--釋放資源共用記憶體實現思路註意 system v IPC簡介 消息隊列、共用記憶體和信號量統稱為system v IPC(進程間通信機制)，V是羅馬數字5，是UNI ...
所有分類