CSS3選擇器

基礎(chǔ)

屬性選擇器(CSS2)

  • [attr=val]
  • attr代表屬性值，val代表變量值
<style>
        [id="test1"]{
            background-color: yellow;
            height: 200px;
            width:400px;
        }
    </style>

屬性選擇器的擴(kuò)展(CSS3)

  • 在css3中增加了三個(gè)屬性選擇器，使屬性選擇器有了通配符的概念。
    • [attr^=val]
    • [attr$=val]
    • [attr*=val]
  • ^代表屬性值以某字符串作為開頭
<style>
        [id^="te"]{
            background-color: yellow;
            height: 200px;
            width:400px;
        }
    </style>
<div id="test"> 
</div>
  • $代表屬性值以某字符串作為結(jié)尾
<style>
        [id$="st"]{
            background-color: yellow;
            height: 200px;
            width:400px;
        }
    </style>
<div id="test"> 
</div>
  • *代表屬性值內(nèi)包含某字符串
<style>
        [id*="es"]{
            background-color: yellow;
            height: 200px;
            width:400px;
        }
    </style>
<div id="test"> 
</div>

偽類選擇器

  • 在css中，我們知道我們可以通過(guò)類選擇器定義不同的樣式如p.yellow={background-color:yellow},此處.yellow為類選擇器，yellow為類名，在偽類選擇器中我們使用css中預(yù)先定義好的類名對(duì)元素樣式進(jìn)行修改，最常用的為對(duì)a元素不同狀態(tài)的修改。
  <style>
        a:link{
            color: #FF0000;
            text-decoration: none;
        }
        /*鼠標(biāo)點(diǎn)擊之前*/
        a:hover{
            color: #00FF00;
            text-decoration: none;
        }
        /*鼠標(biāo)挪動(dòng)到鏈接上*/
        a:visited{
            color: #FF00FF;
            text-decoration: underline;
        }
        /*鼠標(biāo)點(diǎn)擊之后*/
        a:active{
            color:#0000ff;
            text-decoration: underline;
        }
        /*鼠標(biāo)點(diǎn)擊之時(shí)*/
    </style>

偽元素選擇器

  • 所謂偽元素選擇器并不是要對(duì)真正的元素使用樣式，而是對(duì)css中已經(jīng)定義好的偽元素使用樣式
  • first-line用于對(duì)某個(gè)元素中的第一行文字使用樣式
<style>
        p:first-line{
            color: #00ccff;
        }
    </style>
<p>云泥豈知鯤鵬志，<br>扶搖直上九萬(wàn)里</p>
  • first-letter用于對(duì)某個(gè)元素中的第一個(gè)文字或第一個(gè)字母設(shè)置樣式
<style>
        p:first-letter{
            color: #00ccff;
        }
    </style>
<p>云泥豈知鯤鵬志，<br>扶搖直上九萬(wàn)里</p>
  • before用于在某個(gè)元素之前插入一些元素
p:before{
            content: '待到秋來(lái)九月八，';
            color: #00ccff;
        }
/*插入文字*/
p:before{
            content: url(1.png);
            color: #00ccff;
        }
/*插入圖片*/
  • after偽元素選擇器
    • 無(wú)fuck說(shuō)

結(jié)構(gòu)性偽類選擇器

  • 結(jié)構(gòu)性偽類選擇器最主要的的特征是允許開發(fā)者根據(jù)文檔的結(jié)構(gòu)對(duì)元素進(jìn)行操作。

root,not,empty,target

  • root選擇器
    • root選擇器將樣式綁定到頁(yè)面的根元素，所謂根元素元素，就是指包著整個(gè)頁(yè)面的HTML元素
:root{
    background-color: yellow;
}
body{
    background-color: limegreen;
}
  • 在使用body元素與root元素指定元素背景時(shí)，根據(jù)不同的顯示條件，顯示范圍會(huì)有所變化，如上面這個(gè)示例，在刪除root選擇器后整個(gè)頁(yè)面都將變?yōu)榫G色
  • not選擇器，如果你想對(duì)某個(gè)元素設(shè)置樣式，卻不想對(duì)他的某個(gè)子元素設(shè)置，可以使用not選擇器。
<style>
        #test *:not(h1){
            background-color: yellow;
        }
    </style>
  • empty選擇器用于元素內(nèi)容為空時(shí)指定樣式，換行符與空格符被認(rèn)為元素內(nèi)有內(nèi)容
div:empty{
            height: 100px;
            width: 100px;
            background-color: yellow;
        }
  • target選擇器是對(duì)頁(yè)面中的target元素（當(dāng)他們的id被當(dāng)做超鏈接來(lái)使用時(shí)）指定樣式的，當(dāng)用戶點(diǎn)擊了超鏈接對(duì)指定元素進(jìn)行樣式修改。
<style type="text/css">
:target{
    background-color: yellow;
}
</style>
</head>
<body>
<p id="menu">
<a href="#text1">示例文字1</a> | 
<a href="#text2">示例文字2</a> | 
<a href="#text3">示例文字3</a> | 
<a href="#text4">示例文字4</a> | 
<a href="#text5">示例文字5</a> 
</p>
<div id="text1">
<h2>示例文字1</h2>
<p>...此處略去</p>
</div>
<div id="text2">
<h2>示例文字2</h2>
<p>...此處略去</p>
</div>
<div id="text3">
<h2>示例文字3</h2>
<p>...此處略去</p>
</div>
<div id="text4">
<h2>示例文字4</h2>
<p>...此處略去</p>
</div>
<div id="text5">
<h2>示例文字5</h2>
<p>...此處略去</p>
</body>

first-child、last-child、nth-child、nth-last-child

  • first-child與last-child選擇器可以選擇當(dāng)前元素第一次和最后一次出現(xiàn)的地方(一般用于列表表格)
li:first-child{
            background-color: yellow;
        }
        li:last-child{
            background-color: black;
        }
  • nth-child和nth-last-child選擇器是之前倆個(gè)的擴(kuò)展，分別可加入?yún)?shù)表示序號(hào)對(duì)元素進(jìn)行操作，nth-last-child表示倒序。
<style>
        li:nth-child(3){
            background-color: yellow;
        }
    </style>

<style>
        li:nth-last-child(2){
            background-color: yellow;
        }
    </style>

<style>
        ul li:nth-child(even){
            background-color: yellow;
        }
    </style>
所有偶數(shù)序列的元素

<style>
        ul li:nth-child(odd){
            background-color: yellow;
        }
    </style>
所有奇數(shù)序列的元素
  • nth-child計(jì)算序號(hào)的方法是取當(dāng)前元素的父元素所有的子元素進(jìn)行排序，因此很多時(shí)候會(huì)帶來(lái)一些不可預(yù)知的問(wèn)題

nth-of-type與nth-last-of-type

  • 由于上述問(wèn)題的存在，css3新增了這兩個(gè)選擇器解決問(wèn)題，nth-of-type可以只匹配相同類型的元素進(jìn)行選取。
<style type="text/css">
        h2:nth-of-type(odd){
        background-color:yellow;
}
</style>

循環(huán)使用樣式

  • 我們可以采用nth-child與簡(jiǎn)單表達(dá)式的方法對(duì)樣式進(jìn)行循環(huán)
    <style>
        li:nth-child(3n){
            background-color: yellow;
        }
        li:nth-child(3n+1){
            background-color: red;
        }
        li:nth-child(3n+2){
            background-color: green;
        }
    </style>

UI元素狀態(tài)偽類選擇器

  • UI元素狀態(tài)偽類選擇器的主要特征是只有在元素處于某種狀態(tài)時(shí)樣式表才起作用，默認(rèn)情況下沒有作用
  • 在css3中共有11種UI元素狀態(tài)偽類選擇器
    E:hover、E:active、E:focus、E：enabled、E:disabled、E:read-only、E:read-write、E:checked、E:default、E:indeterminate、E::selection.

E:hover、E:active、E:focus

  • E:hover選擇器用于鼠標(biāo)挪動(dòng)指定元素上時(shí)指定樣式
  • E:active選擇器用于指定元素被激活時(shí)
  • E:focus用于指定元素獲得焦點(diǎn)時(shí)，主要用于表單

E：enabled、E:disabled

  • E:enabled用于元素可用時(shí)的樣式
  • E:disabled用于元素不可用時(shí)的樣式（主要用于表單）
<script>
function radio_onchange()
{    
    var radio=document.getElementById("radio1");
    var text=document.getElementById("text1");
    if(radio.checked)
        text.disabled="";
    else
    {
        text.value="";
        text.disabled="disabled";
    }
}
</script>
<style>
input[type="text"]:enabled{
    background-color:yellow; 
}
input[type="text"]:disabled{
    background-color:purple;
}
</style>
<form>
<input type="radio" id="radio1" name="radio" 
 onchange="radio_onchange();">可用</radio>
<input type="radio" id="radio2" name="radio" 
onchange="radio_onchange();">不可用</radio><br/>
<input type=text id="text1" disabled />
</form>

E:read-only、E:read-write

  • E:read-only:當(dāng)元素處于只讀狀態(tài)時(shí)
  • E:read-write:當(dāng)元素處于非只讀狀態(tài)時(shí)
<style type="text/css">
input[type="text"]:read-only{
        background-color: gray;
}
input[type="text"]:read-write{
        background-color: greenyellow;
}
//firefox
input[type="text"]:-moz-read-only{
        background-color: gray;
}
input[type="text"]:-moz-read-write{
        background-color: greenyellow;
}
</style>

E:checked、E:default、E:indeterminate、

  • 這三個(gè)選擇器主要用于radio和CheckBox
  • E:checked用于指定單選框（或復(fù)選框）被選定時(shí)的樣式
  • E:default用于指定頁(yè)面初始化時(shí)就被指定默認(rèn)選取的元素，值得注意的時(shí)該樣式即使是后來(lái)選取狀態(tài)被取消，也依然有效。
  • E:indeterminate用于對(duì)元素指定樣式，一旦單選框被選定，則樣式失效
input[type="radio"]:indeterminate{
        outline: solid 1px blue;
}
  • 該選擇器各瀏覽器的兼容性不高

E::selection

  • 該元素指定元素被選定時(shí)的樣式
<style type="text/css">
p::selection{
    background:red;
    color:#FFF;
}
p::-moz-selection{
    background:red;
    color:#FFF;
}
input[type="text"]::selection{
    background:gray;
    color:#FFF;
}
input[type="text"]::-moz-selection{
    background:gray;
    color:#FFF;
}
td::selection{
    background:green;
    color:#FFF;
}
td::-moz-selection{
    background:green;
    color:#FFF;
}
</style>

通用兄弟元素選擇器

  • 指定某元素之后所有同級(jí)兄弟元素的樣式
div ~ p {background-color:#00FF00;}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 一，CSS3 選擇器分類 二，選擇器語(yǔ)法 1，基本選擇器語(yǔ)法 選擇器 類型 功能描述 * 通配選擇器 選擇文檔中所...
    newSpring666閱讀 353評(píng)論 0贊 0
  • 第6章 征服CSS3選擇器 屬性選擇器 在HTML中，通過(guò)各種各樣的屬性可以給元素增加很多附加的信息。例如，通過(guò)i...
    阿振_sc閱讀 509評(píng)論 0贊 1
  • 屬性選擇器 屬性選擇器早在CSS2中就被引入了，其主要作用就是對(duì)帶有指定屬性的HTML 元素設(shè)置樣式，而CSS3在...
    櫻桃小丸子兒閱讀 871評(píng)論 0贊 19
  • 2.6 語(yǔ)言偽類選擇器 使用語(yǔ)言偽類選擇器來(lái)匹配使用語(yǔ)言的元素是非常有用的，特別是用于多語(yǔ)言版本的網(wǎng)站，其作用更是...
    白小蟲閱讀 324評(píng)論 0贊 1
  • 一、屬性選擇器 Element[attr]只使用屬性名，但沒有確定任何屬性值p[cxy]{background: ...
    EndEvent閱讀 470評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容