CSS選擇器彙總

時間  2019-11-08
標籤 css 選擇器 彙總 欄目 CSS 简体版
原文   原文鏈接

1、什麼是選擇器

使用HTML搭建好架構以後，怎樣將CSS樣式應用於特定的HTML,這就須要選擇器來用於選擇須要添加樣式的元素，使CSS對HTML頁面中的元素實現一對一，一對多或者多對一的控制。css

每條CSS樣式都是由兩部分組成，形式以下： 選擇器{樣式} 在{}以前的部分就是「選擇器」。 「選擇器」指明瞭{}中的「樣式」的做用對象，也就是「樣式」做用於網頁中的哪些元素。html

2、基礎選擇器

一、標籤選擇器（元素選擇器）

一個完整的HTML頁面是由不少不一樣的標籤組成，而標籤選擇器，指用HTML標籤名稱做爲選擇器，按標籤名稱分類，爲頁面中某一類標籤指定統一的CSS樣式。其基本語法格式以下：css3

標籤名{
      屬性1：屬性值；  屬性2：屬性值；    
      }

例如：apache

p{
text-align:center;
font-size:14px;
font-color:red;
        }

優勢：能快速爲頁面中同一類型的標籤添加樣式，覆蓋範圍較廣。瀏覽器

缺點：覆蓋範圍太廣而不能設計不一樣樣式。若是想要給不一樣的P標籤添加不一樣的字體大小，這時標籤選擇器就心有餘而力不足了。這個時候須要添加類，使用類選擇器。markdown

二、類選擇器

類選擇器使用類名來選擇元素，前提是要在HTML中，給元素定義一個class的屬性，class="類名"，而後使用"."進行標識，後面緊跟類名。語法格式以下：架構

.類名{屬性1：屬性值；屬性2：屬性值；}

例如：佈局

div{
        height: 60px;
        width: 40px;
        background-color: red;   /*使用元素選擇器給兩個div設置  相同的大小和背景顏色 */
            }
.box{
        background-color: blue;  /*藍色會覆蓋上面的紅色背景*/
        border-radius: 0 0 50% 50%;  /*使用類選擇器另外給類名爲  box  的div 設置不一樣的背景色、圓角*/
}

添加類名：字體

<div></div>
<div class="box"></div><!-- 類名爲box -->

優勢：爲元素對象定義單獨或相同的樣式。ui

三、多類名選擇器

給標籤指定多個類名，從而達到更多的選擇目的。CSS中語法格式與類選擇器相同。

1. 樣式顯示效果跟HTML元素中的類名前後順序沒有關係,受CSS樣式書寫的上下順序有關。
2. 各個類名中間用空格隔開。

多類名選擇器在後期佈局比較複雜的狀況下，使用較多。

四、ID選擇器

id選擇器使用「#」進行標識，後面緊跟id名，前提是要在HTML中，給元素定義一個id屬性。

#id名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

id名即爲HTML元素的id屬性值，大多數HTML元素均可以定義id屬性，元素的id值是惟一的，只能對應於文檔中某一個具體的元素。

用法基本和類選擇器相同。

ID選擇器和類選擇器的區別

W3C標準規定，在同一個頁面內，不容許有相同名字的id對象出現，可是容許相同名字的class。

類選擇器（class） 比如人的名字， 是能夠屢次重複使用的， 好比 小明、小花

id選擇器 比如人的身份證號碼， 全中國是惟一的， 不得重複。 只能使用一次。

***id選擇器和類選擇器最大的不一樣在於 使用次數上。

五、通配符選擇器

通配符選擇器用「*」號表示，他是全部選擇器中做用範圍最廣的，能匹配頁面中全部的元素。其基本語法格式以下：

* { 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

例以下面的代碼，使用通配符選擇器定義CSS樣式，清除全部HTML標記的默認邊距，通常寫在CSS樣式的最前面用於清除元素的一些自帶樣式。

* {
  margin: 0;                    /* 定義外邊距*/
  padding: 0;                   /* 定義內邊距*/
}

六、僞類選擇器

僞類選擇器通常用於向某些元素添加特殊效果。

僞類 用 2個點 就是 冒號  好比  :link{}

好比最經常使用的給連接添加狀態特殊效果

  • :link /* 未訪問的連接 */

  • :visited /* 已訪問的連接 */

  • :hover /* 鼠標移動到連接上 */

  • :active /* 選定的連接 */

    注意寫的時候，他們的順序儘可能不要顛倒 按照 lvha 的順序。 love hate 愛上了討厭 記憶法 或者 lv 包包 很是 hao

a {   /* a是標籤選擇器  全部的連接 */      
    font-weight: 700;     
    font-size: 16px;      
    color: gray;      
}
a:link{
    font-size:16px;
    color:green;
    font-weight: 700;
}
a:visited{
    font-size:20px;
    color:orange;
    font-weight:bold;
}
a:hover{
    color:red;
}
a:active{
    color:blue;
    font-weight:900;
}

結構僞類選擇器

  • :first-child :選取屬於其父元素的首個子元素的指定選擇器
  • :last-child :選取屬於其父元素的最後一個子元素的指定選擇器
  • :nth-child(n) ： 匹配屬於其父元素的第 N 個子元素，不論元素的類型
  • :nth-last-child(n) ：選擇器匹配屬於其元素的第 N 個子元素的每一個元素，不論元素的類型，從最後一個子元素開始計數。
    n 能夠是數字、關鍵詞或公式
div{
        height: 60px;
        width: 40px;
        background-color: red;   /*使用元素選擇器給全部div設置  相同的大小和紅色 */
        text-align: center;
        font-size: 20px;
        float: left;
        }
div:first-child{
        background-color: pink;   /*第一個div是設置粉色*/
       }
div:nth-child(3){
        background-color: skyblue;/*第三個div是設置天藍色*/
       }
div:last-child{
        background-color: purple;/*最後一個div是設置紫色*/
       }

目標僞類選擇器(CSS3)

:target目標僞類選擇器 :選擇器可用於選取當前活動的目標元素

:target {
        color: red;
        font-size: 30px;
}

3、複合選擇器

複合選擇器是由兩個或多個基礎選擇器，經過不一樣的方式組合而成的,目的是爲了能夠選擇更準確更精細的目標元素標籤。

一、交集選擇器

交集選擇器由兩個選擇器構成，其中第一個爲標籤選擇器，第二個爲class選擇器，兩個選擇器之間不能有空格，如h3.special。

交集選擇器 是 而且的意思。 即…又…的意思

好比：   p.one   選擇的是： 類名爲 .one  的 段落標籤。  

二、並集選擇器

並集選擇器（CSS選擇器分組）是各個選擇器經過逗號鏈接而成的，任何形式的選擇器（包括標籤選擇器、class類選擇器id選擇器等），均可以做爲並集選擇器的一部分。若是某些選擇器定義的樣式徹底相同，或部分相同，就能夠利用並集選擇器爲它們定義相同的CSS樣式。

.foot_l,
.foot_r{
    height: 60px;
    width: 40px;
    background-color: #000;
}

並集選擇器 和 的意思， 就是說，只要逗號隔開的，全部選擇器都會執行後面樣式。

好比  .one, p , #test {color: #F00;}  表示   .one 和 p  和 #test 這三個選擇器都會執行顏色爲紅色。  一般用於集體聲明。

三、後代選擇器

後代選擇器也稱爲包含選擇器，用來選擇特定元素或元素組的後代，將對父元素的選擇放在前面，對子元素的選擇放在後面，中間加一個空格分開。後代選擇器中的元素不只僅只能有兩個，對於多層祖前後代關係，能夠有多個空格加以分開：例如.banner_content ul span表示選擇類名爲.banner_conntent的父元素中的子元素ul中的span標籤，這裏有三層關係。

.private img{
            margin:10px 10px 0 30px;
            float: right;
        }
.qq img{
            margin:5px 0 5px 20px;
            float: right;
        }
.banner_content ul span{
            float:right;
        }

它能選擇任何包含在內 的標籤

四、子元素選擇器

子元素選擇器只能選擇做爲某元素子元素的元素。其寫法就是把父級標籤寫在前面，子級標籤寫在後面，中間跟一個 > 進行鏈接。

好比：h1 > strong{
    color:red;
} /* strong 必定是h1 親兒子。 只有下方第一個h1中的strong 會有顏色變化*/

白話： 這裏的子 指的是 親兒子 不包含孫子 重孫子之類

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

與後代選擇器相比子元素選擇器不但願選擇任意的後代元素，而是但願縮小範圍，只選擇某個元素的子元素，層級關係爲一級。

五、屬性選擇器

選取標籤帶有某些特殊屬性的選擇器，咱們稱之爲屬性選擇器。

選擇器（E是標籤名，attr是屬性命名，val是屬性值字符） 含義
E[attr] 存在attr屬性便可
E[attr=val] 屬性值等於val
E[attr^=val] 屬性值 開頭包含 val 字符
E[attr 屬性值 結尾包含 val字符
E[attr*=val] 屬性值任意位置包含 val字符

選擇器(E是標籤名，attr是屬性名,val是 屬性值字符 ) 實例 含義 E[attr] 存在attr屬性便可 E[attr=val] 屬性值等於val E[attr^=val] 屬性值 開頭包含 val 字符 E[attr=val]∣屬性值結尾包含val字符∣∣E[attr∗=val]∣屬性值任意位置包含val字符∣選擇器(E是標籤名，attr是屬性名,val是屬性值字符)實例含義E[attr]存在attr屬性即可E[attr=val]屬性值等於valE[attr=val]屬性值開頭包含val字符E[attr=val] 屬性值 結尾包含 val字符 E[attr*=val] 屬性值任意位置包含 val字符

    li[type]{      /*獲取到  擁有  該屬性type  的元素*/
        border:1px solid gray;
    }
    li[type="vegetable"]{    /*獲取  type屬性等於vegetable  的元素屬性*/
        color:pink;
        font-size:16px;
    }
    li[color^="green"]{   /*獲取color屬性以green開頭的*/
        background-color:orange;
    }   
   li[type~="hot"] {    /* 使用空格分隔的 多個屬性 其中有hot字符便可獲取 */
           font-size: 20px;
    }
    li[type$="t"]{   /*獲取type屬性 的屬性值以 t 結尾的語法*/
         color: hotpink;
           background-color: blue;
    }
    li[type*="ea"]{    /*獲取type屬性的屬性值中  任意位置  含有ea字符的屬性值的語法*/
        font-size: 10px;   
    }
    li[price|=very]{   /*若是屬性的值只有very,也能獲取；用來  獲取多個屬性  而且  使用-連接*/
        background-color: darkred;
    }

如下爲結構樣式

<ul>
  <li type='fruit' color='green'>西瓜</li>
  <li type='vegetable' color='greenyellow'>西蘭花</li>
  <li type='meat'>牛肉</li>
  <li type='meat hot'>豬肉</li>
  <li type='drink hot'>可樂</li>
  <li type='drink hot'>雪碧</li>
  <li price='very-cheap'>紅酒</li>
  <li price='very'>白酒</li>
</ul>

六、僞元素選擇器

僞元素選擇器（使用雙冒號） ::first-child

  1. E::first-letter 文本的第一個字母或文字。
  2. E::first-line 文本的第一行。
  3. E::selection 可改變選中文本的樣式。
.second::first-line{
        color:red;       /*選中類名爲second 的第一行*/
        text-decoration: underline;

        }
.second::first-letter{    /*選中類名爲second 的第一個字符*/
        font-size: 25px;
        }
.second：：selection{
        color:blue;  /*選中文本爲藍色*/

        }

四、E::before和E::after

在E元素內部的開始位置和結束位建立一個元素，該元素爲行內元素，且必需要結合content屬性使用。

div::befor {
  content:"開始";
}
div::after {
  content:"結束";
}

E:after、E:before 在舊版本里是僞元素，CSS3的規範裏「:」用來表示僞類，「::」用來表示僞元素，可是在高版本瀏覽器下E:after、E:before會被自動識別爲E::after、E::before，這樣作的目的是用來作兼容處理。

":" 與 "::" 區別在於區分僞類和僞元素

.hand_l:after,
.hand_r:after{
    content: ""; /*必需要有content屬性*/
    width: 50px;
    height: 20px;
    display: block;   /*給僞元素加了display轉換成塊元素纔能有寬高*/
    background-color: #000;
    border-radius: 10px;
    position: absolute;
    top:25px;
            }

CSS書寫規範

  • 選擇器與花括號之間必需要有空格；
  • 冒號以後，屬性值以前必需要有空格；
  • 並集選擇器之間獨佔一行；
  • 屬性定義之間另起一行；
  • 屬性定義後必須分號結尾；

4、總結

看起來選擇器不少，可是隻要理解了就很容易，並且在工做當中通常一個頁面須要設置的CSS樣式超多，選擇器多了更能適應工做的須要，複合選擇器的合理使用的使得元素定位更加精準、設置特別樣式更加方便。總之，都是實際須要而產生的。

此時又有另一個疑惑：就是選擇器這麼多，同一個標籤可能使用不一樣的選擇器設置了不一樣的樣式，那這個標籤到底應該根據哪一個設定來呈現效果呢？這個時候就須要選擇器的權重的解決問題了，下一篇選擇器的權重。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程