CSS選擇器的詳細說明（有誤之處請指教）

阿新 • • 發佈：2018-12-10

CSS的選擇器可分為以下幾種，個人經歷，其中1~6，8用的最多，7，9用得少：

1.元素選擇器 2.類選擇器（class） 3.id選擇器 4.屬性選擇器 5.後代選擇器和子元素選擇器 6.相鄰兄弟選擇器 7.偽類 8.偽元素

一、元素選擇器元素選擇器最為常見的，其名稱就是html元素，甚至是html自己，如下：

<style type="text/css">
//img標籤，影象標籤
            img{
                padding-top:2.5px ;//定義內邊距
                padding-left 
:15px ;//定義左邊距
                cursor: pointer;//定義滑鼠懸浮時樣式
            }
            h1{
                font-size: 26px;//定義字型大小
                text-align: center;//定義文字居中
            }   
            a{
                color: red;
                text-decoration: none;//定義超連結消除下劃線，預設值是有的
            }
< 
/style>
<body>
//此時，以下標籤則會呈現相應的樣式
 <img src="">.........<img>
 <h1>.........................................</h1>
 <a>.........................</a>
</body>

二、類選擇器類選擇器也很常見，一般你自己命名一個名字（隨你喜歡，翠花，狗蛋，狗剩都可以，講真，不開玩笑）作為你的樣式的名稱，然後，在body中，你想在哪個標籤中用這個樣式，就在那個標籤中用 class=“你樣式的名字”來表示。如下：

//程式碼：
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>實驗一</title>
        <style type="text/css">
            .狗剩{
                width: 580px;
                height: 688px;
                margin:0 auto;
            }
            .border{
                border: gray 5px  double;
            }
            img{
                padding-top:2.5px ;
                padding-left:15px ;
                cursor: pointer;
            }
            h1{
                font-size: 26px;
                text-align: center;
            }
            .font1{
                font-size: 12px;
                color: gray;
                text-align: center;
            }
            .solid{
                border-bottom:1px solid gray;//這裡是設定一個雙實線的外框
            }
            a{
                color: red;
                text-decoration: none;
            }
            .font2{
                font-size: 16px;
                color: black;
                text-indent: 2em;
                text-align:left;
                padding-left:3px ;
            }
        </style>
    </head>
    <body>
         <div class="狗剩 border">

            <h1>傳谷歌祕密開發Fuchsia專案 欲5年內取代Android</h1>
            <p class="font1">2018-07-20 07:00 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;騰訊科技 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="http://www.zhku.edu.cn/">我要評論(0)</a></p>
            <p class="solid"></p>
            <img src="img/exp1.jpg"  title="點我也沒用"/>
            <p class="font2">騰訊科技訊 據外媒報道，知情人士週四透露，在過去兩年多的時間中，谷歌內部一群工程師一直
            在開發一款軟體移動作業系統,希望用它最終來替代目前佔全球移動作業系統市場主導地位的Android。
            </p>
            <p class="font2">不過隨著這個團隊的不斷成長，它將不得不克服一些關於軟體如何工作的激烈內部爭論。</p>

            <p class="font2">這個名為Fuchsia的專案為了克服Android的侷限性從零開始建立，原因是越來越多的個人裝置和其他裝置開始接入網際網路。
                它的設計是為了更好地適應語音互動和頻繁的安全更新,無論是膝上型電腦還是微小的網際網路連線感測器，所有的裝置都
                將使用同一的作業系統。</p>
         </div>
    </body>
</html>

另外,類選擇器也可以結合元素標籤一起使用：

//例如，您可能希望只有段落顯示為紅色文字
<html>
<head>
<style type="text/css">
p.important {color:red;}
</style>
</head>
<body>

<h1 class="important">I never give up.</h1>//不顯示紅色

<p class="important">I never give up.</p>//顯示紅色

</body>
</html>

三、id選擇器 id選擇器和類選擇器類似，不過，類選擇器是這種形式 .XXX而id選擇器是這種形式 #XXX，關於它們倆的區別在這裡也做一下說明吧：我們都知道XHTML/HTML是一種文字語言，我們對一個文本里的內容可以一目瞭然的，但伺服器不會，它是死的，因此，我們需要用一個方法來描述它。一般情況下，html標籤像ul p這些基本的HTML標籤就可以做到了，但是，其他的元素型別或者說佈局選擇，這些該怎麼表示呢，此時id和class就派上用場了。它們就像元素的身份特徵，描述了這個元素該長什麼樣。其中，id就像身份證，class就像衣服，只要你願意，隨時可以借其他人穿，也就是說class樣式可以用在不同的元素標籤中，在w3school可以點選檢視一文中這樣描述： *區別 1：只能在文件中使用一次與類不同，在一個 HTML 文件中，ID 選擇器會使用一次，而且僅一次。我的理解：對於區別一，（經本人實踐，在我的谷歌瀏覽器完全可以顯示，可能有些瀏覽器不可以，但我覺得這句話不是強調這個意思，它應該說的是一種規範，我們平時書寫時就應該注意id應該唯一，為什麼呢？試想一下，在一個大專案中，css樣式絕對是龐大的，此時，但你用js來操控特定的html文字標籤時，你打算選用id還是class？說到這裡大家應該心裡多少有點“bilibili高數”了吧，這也就是id不重複的原因，否則js則操控的不只是特定標籤了。） *區別二：不能使用 ID 詞列表不同於類選擇器，ID 選擇器不能結合使用，因為 ID 屬性不允許有以空格分隔的詞列表。我的理解：對於區別2，我們都知道類選擇器可以寫成一下這個樣子,而id不予許，它是獨一無二的。

<style type="text/css">
            .font1.font2{ //注意兩個類名之間不能有空格
                font-size:20px;
                color: green;
            }
        </style>
        <body>
        <p class="font1 font2">never give up</p>//注意兩個都要寫上，不然沒效果（感覺其實有點雞肋）
    </body>

*區別 3：ID 能包含更多含義類似於類選擇器，可以獨立於元素來選擇 ID。有些情況下，您知道文件中會出現某個特定 ID 值，但是並不知道它會出現在哪個元素上，所以您想宣告獨立的 ID 選擇器。例如，您可能知道在一個給定的文件中會有一個 ID 值為 mostImportant 的元素。您不知道這個最重要的東西是一個段落、一個短語、一個列表項還是一個小節標題。您只知道每個文件都會有這麼一個最重要的內容，它可能在任何元素中，而且只能出現一個。在這種情況下，可以編寫如下規則：

#mostImportant {color:red; background:yellow;}
//這個規則會與以下各個元素匹配（這些元素不能在同一個文件中同時出現，因為它們都有相同的 ID 值）：
<h1 id="mostImportant">This is important!</h1>
<em id="mostImportant">This is important!</em>
<ul id="mostImportant">This is important!</ul>

我的理解：對於區別三，額呃呃呃，可能語文不好，我覺得它的描述有點沒意義，直到我偶然看到一篇國外的文章時點選這裡才覺得“ ID 能包含更多含義”應該是體現在這個方面：當我們想實現這樣的一個功能，使用者開啟一個頁面時，自動定位到我們想讓使用者最先看到的地方時，我們可以這樣做設定網址為http://XXXXXXXXXXXX#id名，此時開啟後，會定位到id標籤處。經過本人實現，確實如此，不過你實驗時，為了確切體驗到，你需要足夠多的內容來填充瀏覽器，這樣得到的效果更明顯。在很多專案中為了規範其實id 和 class都會該出，像這樣： <p id="XXX" class="VVVV"></p> //class是規定樣式，id便於js操控。

四、屬性選擇器屬性選擇器的設定同樣是為了我們方便修改某個標籤的樣式，這個很好用，特別在一個大專案中，為一個標籤新增樣式時，它的寫法如下：

//形如：E[attribute] 選擇器，表示選擇擁有屬性 attribute 的E元素，不考慮屬性的值
a[rel] {
   color: red;
}

//還可以根據多個屬性進行選擇，只需將屬性選擇器連結在一起即可。例如，為了將同時有
// href 和 title 屬性的 HTML 超連結的文字設定為紅色，可以這樣寫：
a[href][title] {
   color:red;
}

關於它其他格式的詳細說明:可以參考這位博主，他寫得很詳細，每個樣式都有例子，通俗易懂。五、後代選擇器和子元素選擇器對於後代選擇器，如果您希望只對 A 元素中的 B元素應用樣式，可以這樣寫A B{…………}，這樣其他標籤，即使有B也不會呈現相應的顏色，如：

h1 strong {color:red;}

<h1>I <em>never<strong>give</strong></em> up</h1>//這裡strong雖是em的兒子，h1的孫子也會顯示紅色，
                                                  //注意這裡區分下面的子元素選擇器

對於子元素選擇器，寫法是這樣的：A>B，如：

 h1>strong {color:red;}//選擇h1的親兒子紅色，例如：

<h1>I<strong>never</strong> <strong>give</strong> up.</h1>//這裡 never give 會顯示紅色

<h1>I <em>never<strong>give</strong></em> up</h1>//這裡沒顯示紅色，因為strong是em的兒子，h1的孫子

另外，子元素選擇器也可以結合後代選擇器，例如：

table.company td > p

//它表示，選擇這樣的P標籤，它是td的親兒子，且屬於這樣的一個表格，表格帶有company屬性
//例如：
!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .company{
                width: 280px;
            }
            table.company td > p{
                font-size: 18px;
                color:gray;
            }
        </style>
    </head>
    <body>
        <table class="company">
            <td><p>這是真的</p></td> //它會顯示相應樣式
        </table>

        <table>
            <td><p>這是真的</p></td>//它不會
        </table>
    </body>
</html>

六、相鄰兄弟選擇器如果需要選擇緊接在另一個元素後的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器。這裡注意兩點：1.兩個元素相鄰 2.擁有著共同的父親。3.它影響的是後面的元素即 A+B隻影響B

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
    h1 + p {  
        color:red;
    }
</style>
</head>
<body>
    <h1>This is a heading.</h1>//它沒變
    <p>This is paragraph.</p> //只有它變紅
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
    <p>This is paragraph.</p>
</body>
</html>

//再比如：
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
li + li {font-weight:bold;}
</style>
</head>

<body>
<div>
  <ul>
    <li>List item 1</li>//他不會變紅
    <li>List item 2</li>//他變紅了，因為它是一的兄弟
    <li>List item 3</li>//他也變紅，它是二的兄弟
  </ul>
</div>
</body>
</html>

另外，除了“+”，還有“~”，它的作用是查詢某一個指定元素的後面的所有兄弟結點例如：

<style type="text/css">
    h1 ~ p{
        color:red;
    }
</style>
</head>
<body>
    <p>1</p> //不變紅
    <h1>2</h1>//不變紅
    <p>3</p>//變紅
    <p>4</p>//變紅
    <p>5</p>//變紅
</body>

七、偽類 w3school給出的解釋是CSS 偽類用於向某些選擇器新增特殊的效果。最常見的偽類可以說是超連結了：

//注意這幾個是有順序的，任意顛倒將不會呈現相應的樣式
a:link {color: #FF0000}     /* 未訪問的連結 */
a:visited {color: #00FF00}  /* 已訪問的連結 */
a:hover {color: #FF00FF}    /* 滑鼠移動到連結上 */
a:active {color: #0000FF}   /* 選定的連結 */

除此之外，偽類還有：（1）first-child （2）lang（這個基本沒用過）

//first-child作用:選擇某元素的第一個兒子是A。這個特定偽類很容易遭到誤解，請看下面：
//例如：A:first-child，起作用的是A，不是A的第一個兒子
<html>
<head>
<style type="text/css">
p:first-child {color:red;}
li:first-child {color:red;}
</style>
</head>

<body>
<div>
<p>These are the necessary steps:</p>//顯示紅色，p是div的第一個兒子
<ul>
<li>Intert Key</li>//顯示紅色，這個li為ul的第一個兒子
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
<p>Do <em>notpush the brake at the same time as the accelerator.</em> </p>//不顯示紅色,因為不是選擇
                                                                          //P的第一個兒子。
</div>
</body>

</html>

//對於lang，這樣定義：lang 偽類使你有能力為不同的語言定義特殊的規則。在下面的例子中，lang 類為屬性值為
 //no 的 q 元素定義引號的型別：
 <html>
<head>
<style type="text/css">
q:lang(no)
   {
   quotes: "~" "~"
   }
</style>

</head>
<body>
<p>文字<q lang="no">段落中的引用的文字</q>文字</p>
</body></html>

執行效果：文字~段落中的引用的文字~文字

八、偽元素關於偽元素，因為經驗不足，也是查了很多文章才慢慢理清，首先說一下為什麼叫偽元素？為什麼叫偽類？（1）偽元素可以通過新增相應的元素實現相應的功能個（2）偽類可以通過新增相應的類實現相應的功能偽元素有這幾種： :first-letter 向文字的第一個字母新增特殊樣式。 :first-line 向文字的首行新增特殊樣式。 :before 在元素之前新增內容。 :after 在元素之後新增內容。

h1:before
  {
  content:url(logo.gif); //在每個h1之前加入圖片
  }
 h1:after
  {
  content:url(logo.gif);//在每個h2之後加入圖片
  }

關於它們詳細說明檢視這裡這位大神在裡面闡述了具體的由來，例子也很詳細。

CSS選擇器的詳細說明（有誤之處請指教）

CSS選擇器的詳細說明（有誤之處請指教）

CSS選擇器詳解（一）常用選擇器

CSS選擇器詳解（總結）

網路爬蟲中CSS選擇器的使用（BeautifulSoup）

網路爬蟲css選擇器知識貼（一）

NYOJ 19 擅長排列的小明（STL之next_permutation()的使用）

CSS選擇器之偽類選擇器（偽元素）

CSS選擇器之兄弟選擇器（~和+）

前端之CSS：CSS選擇器前端之css樣式（選擇器）。。。

前端手冊之---CSS 選擇器（包括css1-css3）

Html學習之十（CSS選擇器的使用--偽類選擇器）

HTML學習筆記 CSS塊元素加偽類選擇器第三節（原創）

我的web前端學習之路-CSS-選擇器

css選擇器（基礎）

html之css選擇器語法學習筆記

css編輯檢視之css選擇器

HTML+CSS第六課：初識CSS之CSS選擇器的使用、為HTML文件新增CSS樣式的3種方式

jQuery之CSS選擇器的處理機制

凜冬之翼---css選擇器基礎

web前端（8）—— CSS選擇器

CSS選擇器的詳細說明（有誤之處請指教）

相關推薦