css選擇器總結

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

本文轉載於:猿2048網站css選擇器總結php

　　最近有點忙，因此沒有發表博文，如今時間空閒下來了，好好的整理一下知識，今天總結一下css裏面的一些選擇器。css

　　css裏的選擇器有好多種，下面我就把我瞭解到的寫一寫，若是有不全的或者有誤的歡迎留言指正，萬分感謝。css3

　　1、選擇器瀏覽器

　　一、* 通配符選擇器 字體

　　　這個選擇器是匹配頁面中全部的元素，通常用來清除瀏覽器的默認樣式.網站

*{margin:0; padding:0}

　　二、元素選擇器 spa

　　　　經過標籤名來選擇元素。blog

div{width:100px; height:100px;}

　　三、class選擇器get

　　　　　class選擇器 / 類選擇器 / 用class屬性給元素命名，在頁面中能夠出現不少次，至關於人的名字。input

.box{width:100px; height:100px;}

<div class="box"></div>
<p class="box"></p>

　　四、 id選擇器

　　　　以id屬性來命名，在頁面中只能出現一次，具備惟一性，而且權重值最高，至關於一我的的身份證。

#box{width:100px; height:100px;}

<div id="box"></div>

　2、高級選擇器 一　

　　一、 E F  後代選擇器

　　　　匹配到E元素下面的全部的F元素（包括子、孫），空格隔開。

div ul li {width:100px; height:100px;}
//匹配到div下面的全部ul，且ul的全部後代li

<div>
　　<ul>
　　　　<li></li>
　　　　<li></li>
    </ul>
</div>

　　二、 E,F  多元素選擇器

  　　　　同時匹配到E元素和F元素，用逗號隔開。

div,#box{width:100px; height:100px; background:#000;}//同時匹配到下文中的div標籤和id爲box的p標籤

<div></div>
<p id="box"></p>

　　三、E>F 子元素選擇器

　　　　選擇到E元素的直接子代F，只選擇子代。

ul>li{width:100px; height:100px;}

<ul>
　　<li>
 　</li>
</ul>

　　四、E+F（毗鄰選擇器） 相鄰兄弟選擇器

　　緊接在E元素後面的同級元素F，相鄰兄弟選擇器，有相同的父級。

　　

div+.box{width:100px; height:100px; background:pink;}//這個只能選擇到下面第二行的那個p元素  最後一個不知足緊接在div元素後面這個條件

　　<div></div>
    <p class="box"></p> 
    <p class="box"></p>
    <div></div>
    <p></p>
    <p class="box"></p>

　　　

div p + p{
    width:100px;
    height:100px;
    margin-top:2px;
    background:pink;
}
　　//這個能夠選擇到下面除了第一個p元素外其餘全部的元素。
　　<div>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>

　　3、高級選擇器 二       屬性選擇器

　　一、 E[attr] 匹配具備attr屬性的E元素 　　　

div[title]{
    width:100px;
    height:100px;
    margin-top:2px;
    background:pink;
}　　//匹配到下文中的第一個和第三個div元素 由於他們含有title屬性
    <div title="width"></div>
    <div></div>
    <div title="height"></div>

　　二、E[attr=val]

　　　　匹配具備attr屬性且值只爲val的的E元素（注意   屬性值要用引號引發來，我本身試了試好像不用括號也能夠。）

div[title="height"]{
    width:100px;
    height:100px;
    margin-top:2px;
    background:pink;
}  //匹配到下文中的第三個div元素
    <div title="width"></div>
    <div></div>
    <div title="height"></div>

　　三、E[attr~=val]

　　　　匹配屬性值爲attr，幷包含這個值的E元素，用於選取屬性值中包含指定詞彙的元素。

div[class~="c1"]{
    width:100px;
    height:100px;
    margin-top:2px;
    background:pink;
} //選擇到下方第一個和第二個div元素

　　 <div class="c1"></div>
    <div class="c1 c2"></div>
    <div class="c2c1"></div>

　　四、E[attr|=val]

　　　　匹配全部屬性爲attr，值爲val或者以 var- 開頭的E元素

div[class|="c1"]{
    width:100px;
    height:100px;
    margin-top:2px;
    background:pink;
}//選擇到下面當中的第一個和第三個元素

　　 <div class="c1"></div>
    <div class="c1cs"></div>
    <div class="c1-c2"></div>

　　　五、E[attr][attr2=val]匹配全部 有attr1屬性 且有attr2屬性，且attr2的值爲val的E元素，這個就是寫出幾個屬性選擇器，而且都要同時知足他們的條件。　　

div[title="width"][class]{
    width:100px;
    height:100px;
    margin-top:2px;
    background:pink;
}    //選擇到下面的第一個div元素

    <div title="width" class="box"></div>
    <div title="width"></div>

　　4、a僞類選擇器

一、 :link	匹配全部未被點擊的連接
　　a:link{ color: green; }
二、：hover	匹配鼠標懸停在其上的元素
　　a:hover{ color: gold; }
三、：active	匹配鼠標按下尚未釋放的元素
　　a:active{ color: blue; }
四、：visited	匹配全部已經被點擊的連接
a:visited{ color: red; }

　　hover的使用，只是一個選擇器，必定是他的後代。

.box{
    width:100px;
    height: 100px;
    color:#fff;
    background: #000;
}
.box:hover p{
　　color:red;
}//鼠標移動div上，p字體的顏色改變

　　<div class="box">
        <p>個人字體</p>
    </div>

　　2. a僞元素選擇器

　　　　1> ：before  在元素

div:before{
    content: "before插入的元素";
}
//在div全部元素的最前面插入這個

　　<div>
　　　　<p>這個是p</p>
　　　　<ul>
　　　　　　<li></li>
　　　　　　<li></li>
　　　　　　<li></li>
　　　　</ul>
　　</div>

　　　　2>  :after 在元素後面插入內容，插到最後一個子元素的後面。

div:after{content:"";}

<div></div>

　

　　css3新增的選擇器

　　　五. 關聯選擇器

　　　　E1~E2(選擇E1後面的兄弟E2)

div~p{
    width:100px;
    height: 100px;
    margin-top: 2px;
    background: #000;
}
　　//div後面的三個p元素都選擇到了
    <div></div>
    <p></p>
    <p></p>
    <p></p>

　　　6、 屬性選擇器新增

　　　　1. [attr^=" .."] 以....開頭的元素

div[class^="de"]{
    width:100px;
    height: 100px;
    margin-top: 2px;
    background: #000;
}　　//選擇到了前面三個div元素
    <div class="de1"></div>
    <div class="de"></div>
    <div class="dedkjsfkld"></div>
    <div class="1fde"></div>

　　　　2.   [attr$="... "]　以...結束的元素

div[class$="de"]{
    width:100px;
    height: 100px;
    margin-top: 2px;
    background: #000;
}
　　//選擇到了前三個
    <div class="de1de"></div>
    <div class="de"></div>
    <div class="dedkjsfklde"></div>
    <div class="1f"></div>

　　　　3. [attr*=""] 選擇到包含值的元素　

div[class*="de"]{
    width:100px;
    height: 100px;
    margin-top: 2px;
    background: #000;
}
　　//選擇到下面的  1 2 4 都包含de字母
    <div class="de1de"></div>
    <div class="de"></div>
    <div class="dld"></div>
    <div class="1def"></div>

　　7、僞類新增的選擇器  下面都用p來舉例子，其餘的也同樣

　　　下面當中就舉一個例子，其餘的那些本身去實驗一下，能夠用這個例子來實驗

　　　　這裏是有of的是從p元素當中選p

　　　1. :first-of-type

p:first-of-type{
    width:100px;
    height:100px;
    background: #000;
}//父級下面全部p元素的第一個 

    <div>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>

　　2. :last-of-type 

　　p:last-of-type   父級下面全部p元素的最後一個

　　3. only-of-type

　　p:only-of-type  父級下面只有一個p元素，其餘的元素不能是p，若是有其餘元素那麼會選不中。

　　4. ：nth-of-type

　　p:nth-child(n)   選中父級元素中第n個p

　　5. ：nth-last-of-type(n)

　　　　選擇p，父級元素中倒數第n個p元素

 

下面是沒有of的是在子元素中選擇

　　6. :only-child   

　　　p:only-child  選擇p，p必須爲他們各自父級的惟一一個子元素

　　

p:only-child{
    width:100px;
    height: 100px;
    background: #000;
}
　　//下面的這個只能選擇到第一個div當中的p

    <div>
        <p></p>
    </div>
    <div>
        <p></p>
        <span></span>
    </div>
    <div>
        <p></p>
        <p></p>
        <p></p>
    </div>

　　7. :last-child

　　　p:last-child   選擇p，p必須爲父級的最後一個子元素

　　8. nth-child（n）

　　p:nth-child(n)   父元素的第n個元素，叫p元素

　　9  nth-last-child(n)

　　　p：nth-last-child(n)　選擇p，也就是父級的倒數第n個元素，叫p。

 

後面的僞類沒有什麼規律了，彆着急，一個一個慢慢來。

　　只是舉例子，不要覺得括號裏面的內容是固定的。

　　1.  ：not（.c1）   選擇到class除了c1的p 括號裏面的內容還能夠是id等

p:not(.c1){
    width:100px;
    height: 100px;
    margin-top: 2px;
    background: #000;
}//下面的元素當中除了第一個class爲c1的p元素其餘的都被選中了。
　　
    <div>
       <p class="c1"></p>
       <p class="c2"></p>
       <p id="box"></p>
       <p></p>
       <p></p>
   </div>

　　　2.  :empty　 選擇倒標籤內容爲空的規定元素 

p:empty{
    width:100px;
    height: 100px;
    margin-top: 2px;
    background: #000;
}//會選擇到下面的第二個p元素，由於他沒有內容

    <div>
        <p>11</p>
        <p></p>
        <p>11</p>
        <p>11</p>
        <p>1</p>
    </div>

　　　3.  p:target  選擇倒當前被錨點激活的p

p:target{
    width:100px;
    height: 100px;
    margin-top: 2px;
    color:#fff;
    background: #000;
}  //點擊a的內容，p標籤的樣式會被選中激活

    <a href="#a1">點我</a>
    <div></div>
    <p id="a1">p標籤的內容</p>

　4. 　　：：selection 被用戶選中的p　這句話什麼意思呢，來看下面的截圖效果

p::selection{
    width:100px;
    height: 100px;
    margin-top: 2px;
    color:#fff;
    background: #000;
}

    <p>111</p>
    <p>222</p>
    <p>333</p>
    <p>444</p>
    <p>555</p>

　　

       

 5. input:disable

　　選擇到不能被操做的input框

6. input：enable

　　選擇到能被cao操做的input框

input:enabled{
    background:yellow;
}
input:disabled{
    background:red;
}
　　//通常能夠寫內容的都是能夠被操做的，加上disabled的屬性和disabled的值的是不能夠被操做的
    <input type="text" value="">
    <input type="text">
    <input type="text" disabled="diabled">

7. input:checked 

　　選擇到被選中的input，通常用於js

 

input:checked{
    width:40px;
    height:40px;
}//就是框被打上對勾，被選中的元素會被選中
　　　
    <input type="checkbox" checked="" value="">足球
    <input type="checkbox" value="">籃球

　我瞭解到的知識都分享給你們了，若是有不足的地方歡迎來留言指正，若是你經過這篇文章學到了，我會很是開心。

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