CSS3中的選擇器

番茄西紅柿發(fā)布于2019-04-23 13:45 / 857人閱讀

通配符選擇器
類選擇器
id選擇器
元素選擇器
屬性選擇器
后代選擇器
子元素選擇器
兄弟選擇器
偽元素選擇器
偽類選擇器
群組選擇器

這里總結(jié)一共有11種選擇器，分別為：

通配符選擇器、類選擇器、id選擇器、元素選擇器（又叫標(biāo)簽選擇器）、屬性選擇器、

偽類選擇器、偽元素選擇器、后代選擇器（又叫包含選擇器）、子元素選擇器、兄弟選擇器（相鄰兄弟選擇器+、通用兄弟選擇器~）、群組選擇器（幾個(gè)共用一個(gè)，用逗號(hào)隔開）

（優(yōu)先級(jí)：！important>行間樣式>id>class=屬性=偽類選擇器>元素=偽元素選擇器>通配符）

1、通配符選擇器

語(yǔ)法：* {屬性名：屬性值；屬性名：屬性值； ........} 為頁(yè)面上的所有元素設(shè)置樣式，優(yōu)先級(jí)最低

*{
  margin:0;
  padding:0;  
}

2、類選擇器

語(yǔ)法：.類名{屬性名：屬性值；屬性名：屬性值； .......} 為含有相同類名的元素設(shè)置樣式

<style>
   .s1{
      color:red;  
    } 
style>
<body>
<p class=s1>aap>
<p class=s2>bbp>
cc


body>

3、id選擇器

語(yǔ)法：#id名{屬性名：屬性值；屬性名：屬性值； .......} 為id屬性值為指定id名的元素設(shè)置樣式

<style>
   #d1{
      color:red;  
    } 
style>
<body>
<p id=d1>aap>
<p id=d2>bbp>

body>

注意：在一個(gè)html文檔中，一個(gè)id名只能使用一次；且不能使用id詞列表

<p id=d1>aap>
<p id=d1>bbp>  
<p id=d2 d3>ccp>

4、元素選擇器

又叫標(biāo)簽選擇器，根據(jù)元素名（標(biāo)簽名）來(lái)設(shè)置樣式

語(yǔ)法：元素名{屬性名：屬性值；屬性名：屬性值； .......} 為所有指定的元素設(shè)置樣式

<style>
   p{

    　　color:red;  
    } 
style>
<body>
    <p>aap>
    <div>
        <p>bbp>
    div>
    <p >ccp>

body>

5、屬性選擇器

具體分為三種：

①簡(jiǎn)單屬性選擇器：選擇具有某個(gè)屬性名的元素

語(yǔ)法：[元素屬性名]{屬性名：屬性值；屬性名：屬性值； .......} 選擇有指定屬性名的元素，而不管元素的該屬性的屬性值是什么

<style>
   [href]{
      color:red;  
    } 
style>
<body>
    <a href=taobao>taobaoa>
    <div>
        <a href=baidu>baidua>
    div>
    <a href=tencent >tencentp>

body>

②具體屬性值選擇器：選擇具有指定屬性鍵值對(duì)（屬性名和屬性值都要匹配）的元素

語(yǔ)法：[元素屬性="屬性值"]{屬性名：屬性值；屬性名：屬性值； .......} 屬性名和屬性值要完全匹配

<style>
   [href=taobao]{
      color:red;  
    } 
style>
<body>
    <a href=taobao>taobaoa>
    <div>
        <a href=baidu>baidua>
    div>
    <a href=tencent >tencentp>

body>

③子串匹配屬性選擇器：可以規(guī)定屬性值包含什么字符串(*)或以什么字符串開頭(^)/結(jié)尾($)

語(yǔ)法：[元素屬性^="def"]{屬性名：屬性值；屬性名：屬性值； .......} 相應(yīng)的屬性值以def開頭的元素

　　　[元素屬性$="def"]{屬性名：屬性值；屬性名：屬性值； .......} 相應(yīng)的屬性值以def結(jié)尾的元素

　　　[元素屬性*="def"]{屬性名：屬性值；屬性名：屬性值； .......} 相應(yīng)的屬性值包含def的元素

<style>
   [href^=t]{
      color:red;  
    } 
    [href$=u]{
        color:yellow;
    }
    [href*=b]{
        font-size:30px;
    }
style>
<body>
    <a href=taobao>taobaoa>
    <div>
        <a href=baidu>baidua>
    div>
    <a href=tencent >tencentp>

body>

6、后代選擇器（又叫包含選擇器）

語(yǔ)法：祖先元素后代元素 {屬性名：屬性值；屬性名：屬性值； .......} 為具有指定祖先元素的所有后代元素設(shè)置樣式，這兩個(gè)元素之間的層次間隔可以是無(wú)限的

<style>
  .s1 p{
      color:red;  
    } 
style>
<body>
    <p>aap>
    <div class=s1>
        <p>bbp>
        <div>
            <p>ccp>
        div>
        <p>ddp>
    div>
    <p >eep>

body>

7、子元素選擇器

語(yǔ)法：父元素>子元素 {屬性名：屬性值；屬性名：屬性值； .......} 為具有指定父元素的所有子元素設(shè)置樣式，其中子元素為父元素的直接子元素（注意和后代子元素的區(qū)別）

<style>
  .s1>p{
      color:red;  
    } 
style>
<body>
    <p>aap>
    <div class=s1>
        <p>bbp>
        <div>
            <p>ccp>
        div>
        <p>ddp>
    div>
    <p >eep>

body>

8、兄弟選擇器（相鄰兄弟選擇器+、通用兄弟選擇器~）

分為兩種：相鄰兄弟選擇器（+）和通用兄弟選擇器（~）

①相鄰兄弟選擇器

語(yǔ)法：元素E+元素F {屬性名：屬性值；屬性名：屬性值； .......} 為緊接著E元素后的F元素設(shè)置樣式，且E元素和F元素具有相同的父元素（兩者為兄弟元素）

<style>
  .s1+p{
      color:red;  
    } 
style>
<body>
    <div>
        <p>aap>
        <p  class=s1>bbp>      
        <p>ccp>
    div>
    <p >ddp>

body>

②通用兄弟選擇器

語(yǔ)法：E~F {屬性名：屬性值；屬性名：屬性值； .......} 為E后面的所有能夠匹配F的其兄弟元素F設(shè)置樣式

<style>
  .s1~p{
      color:red;  
    } 
style>
<body>
    <div>
        <p>aap>
        <p  class=s1>bbp> 
        <div>
          <p>ccp>
        div>
        <p>ddp>        
    　　<p>eep>            
    div>
    <p >ffp>

body>

9、偽元素選擇器

語(yǔ)法：selector: pseudo-element/:: pseudo-element{property:value;........} 通過(guò)添加一些實(shí)際的元素來(lái)向匹配selector選擇器的元素添加一些效果

有以下五種：

①:first-line/::first-line偽元素用于向文本的首行設(shè)置特殊樣式,只能用于塊級(jí)元素

②:first-letter/::first-letter偽元素用于向文本的首字母設(shè)置樣式，只能用于塊級(jí)元素

③:before/::before 在元素內(nèi)容之前添加內(nèi)容，屬于該元素，默認(rèn)偽元素是行內(nèi)元素

④:after /::after 在元素內(nèi)容之后添加內(nèi)容，屬于該元素，默認(rèn)偽元素是行內(nèi)元素

⑤::selection 設(shè)置元素在被選擇時(shí)的樣式。

說(shuō)明：CSS3之前，偽元素只有1~4四種（::selection為新增），且均為單冒號(hào)（：），為了和偽類選擇器進(jìn)行區(qū)分，CSS3中規(guī)定，偽元素一律使用雙冒號(hào)（::）,但單冒號(hào)依然可以使用，且兼容性更好

<style>
div{float:left;margin:20px;}
h1{font-size:16px;}
p{width:200px;padding:5px 10px;border:1px solid #ffffd;font:14px/1.5 simsun,serif,sans-serif;}

.s1 p:first-letter {float:left;font-size:40px;font-weight:bold;line-height:1;}
.s1 p::first-letter {float:left;font-size:40px;font-weight:bold;line-height:1;}

.s2 p:first-line {color:#090;}
.s2 p::first-line {color:#090;}

.s3 p::before{content:"haha--";color:red;}

.s4 p::after{content:"--haha";color:red;}

.s5 p::selection{background:#000;color:#f00;}
style>
<body>
<div class="s1">
  <h1>雜志常用的首字下沉效果（first-letter）h1>
  <p>
    今天，陽(yáng)光明媚，晴空萬(wàn)里，非常適合戶外活動(dòng)，如踏青、遠(yuǎn)足之類的。長(zhǎng)期 坐在辦公室的同學(xué)們要多注意運(yùn)動(dòng)。
  p>
div>

<div class="s2">
  <h1>雜志常用的首字下沉效果（first-line）h1>
  <p>
    今天，陽(yáng)光明媚，晴空萬(wàn)里，非常適合戶外活動(dòng)，如踏青、遠(yuǎn)足之類的。長(zhǎng)期 坐在辦公室的同學(xué)們要多注意運(yùn)動(dòng)。
  p>
div>

<div class="s3">
  <h1>在元素前添加內(nèi)容（after）h1>
<p>this is a testp>
div>

<div class="s4">
  <h1>在元素后添加內(nèi)容（after）h1>
<p>this is a testp>
div>

<div class="s5">
  <h1>選中下面的文字，看看它的顏色(selection)h1>
<p>你選中這段文字后，看看它們的文本顏色和背景色，就能明白::selection的作用。p>
div>
body>

效果圖為：

附加一個(gè)after和before的應(yīng)用實(shí)例

10、偽類選擇器

語(yǔ)法：selector: pseudo-classes-selector{property:value;........} 向匹配selector選擇器的元素添加一些效果

偽類較多，在此只羅列，不舉例

E:link	CSS1	設(shè)置超鏈接a在未被訪問前的樣式。
E:visited	CSS1	設(shè)置超鏈接a在其鏈接地址已被訪問過(guò)時(shí)的樣式。
E:hover	CSS1/2	設(shè)置元素在其鼠標(biāo)懸停時(shí)的樣式。
E:active	CSS1/2	設(shè)置元素在被用戶激活（在鼠標(biāo)點(diǎn)擊與釋放之間發(fā)生的事件）時(shí)的樣式。
E:focus	CSS1/2	設(shè)置元素在成為輸入焦點(diǎn)（該元素的onfocus事件發(fā)生）時(shí)的樣式。
E:lang(fr)	CSS2	匹配使用特殊語(yǔ)言的E元素。
E:not(s)	CSS3	匹配不含有s選擇符的元素E。
E:root	CSS3	匹配E元素在文檔的根元素。
E:first-child	CSS2	匹配父元素的第一個(gè)子元素E。
E:last-child	CSS3	匹配父元素的最后一個(gè)子元素E。
E:only-child	CSS3	匹配父元素僅有的一個(gè)子元素E。
E:nth-child(n)	CSS3	匹配父元素的第n個(gè)子元素E。
E:nth-last-child(n)	CSS3	匹配父元素的倒數(shù)第n個(gè)子元素E。
E:first-of-type	CSS3	匹配同類型中的第一個(gè)同級(jí)兄弟元素E。
E:last-of-type	CSS3	匹配同類型中的最后一個(gè)同級(jí)兄弟元素E。
E:only-of-type	CSS3	匹配同類型中的唯一的一個(gè)同級(jí)兄弟元素E。
E:nth-of-type(n)	CSS3	匹配同類型中的第n個(gè)同級(jí)兄弟元素E。
E:nth-last-of-type(n)	CSS3	匹配同類型中的倒數(shù)第n個(gè)同級(jí)兄弟元素E。
E:empty	CSS3	匹配沒有任何子元素（包括text節(jié)點(diǎn)）的元素E。
E:checked	CSS3	匹配用戶界面上處于選中狀態(tài)的元素E。(用于input type為radio與checkbox時(shí))
E:enabled	CSS3	匹配用戶界面上處于可用狀態(tài)的元素E。
E:disabled	CSS3	匹配用戶界面上處于禁用狀態(tài)的元素E。
E:target	CSS3	匹配相關(guān)URL指向的E元素。

偽類和偽元素的區(qū)別：

偽類選擇元素基于的是當(dāng)前元素處于的狀態(tài)，或者說(shuō)元素當(dāng)前所具有的特性，而不是元素的id、class、屬性等靜態(tài)的標(biāo)志。由于狀態(tài)是動(dòng)態(tài)變化的，所以一個(gè)元素達(dá)到一個(gè)特定狀態(tài)時(shí)，它可能得到一個(gè)偽類的樣式；當(dāng)狀態(tài)改變時(shí)，它又會(huì)失去這個(gè)樣式。由此可以看出，它的功能和class有些類似，但它是基于文檔之外的抽象，所以叫偽類。

偽元素是對(duì)元素中的特定內(nèi)容進(jìn)行操作，它所操作的層次比偽類更深了一層，也因此它的動(dòng)態(tài)性比偽類要低得多。實(shí)際上，設(shè)計(jì)偽元素的目的就是去選取諸如元素內(nèi)容第一個(gè)字（母）、第一行，在某些元素的前面或后面添加內(nèi)容這種普通的選擇器無(wú)法完成的工作。它控制的內(nèi)容實(shí)際上和元素是相同的。其中first-letter就是將首字符作為元素的假想子元素。，first-line將首行作為假想的子元素；after和before是在元素的末尾/首部添加子元素

11、群組選擇器

語(yǔ)法：selector1,selector2,selector3,....{property:value;........} 幾種選擇器共用一種樣式，選擇器之間用逗號(hào)隔開

<style>
  .s1,p{
      color:red;  
    } 
style>
<body>
        <p>aap>
    <span  class=s1>bbspan>    
        <a>cca>

body>

云服務(wù)器 GPU云服務(wù)器選擇器派生選擇器省市選擇器屬性選擇器

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/2290.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

番茄西紅柿

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensor

閱讀 735·2023-04-25 19:43
Windows 下安裝 XGBoost

閱讀 3981·2021-11-30 14:52
Hadoop 2.6.0 啟動(dòng)問題 lib/native/libhadoop.so which mi

閱讀 3807·2021-11-30 14:52
VmShell：黑五美國(guó)VPS,免費(fèi)先開通測(cè)試,滿意后付款!支持tiktok美區(qū)

閱讀 3871·2021-11-29 11:00
百度智能云：云產(chǎn)品特惠福利,1核2G輕量應(yīng)用服務(wù)器僅48元/年

閱讀 3802·2021-11-29 11:00
Linux系統(tǒng)和寶塔面板如何啟用禁ping功能?

閱讀 3904·2021-11-29 11:00
301重定向怎么做?301重定向設(shè)置方法有幾種

閱讀 3580·2021-11-29 11:00
wordpress網(wǎng)站重定向次數(shù)過(guò)多的解決方法

閱讀 6182·2021-11-29 11:00

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

CSS3中的選擇器

1、通配符選擇器

2、類選擇器

3、id選擇器

4、元素選擇器

5、屬性選擇器

具體分為三種：

①簡(jiǎn)單屬性選擇器：選擇具有某個(gè)屬性名的元素

②具體屬性值選擇器：選擇具有指定屬性鍵值對(duì)（屬性名和屬性值都要匹配）的元素

③子串匹配屬性選擇器：可以規(guī)定屬性值包含什么字符串(*)或以什么字符串開頭(^)/結(jié)尾($)

6、后代選擇器（又叫包含選擇器）

7、子元素選擇器

8、兄弟選擇器（相鄰兄弟選擇器+、通用兄弟選擇器~）

①相鄰兄弟選擇器

②通用兄弟選擇器

9、偽元素選擇器

10、偽類選擇器

11、群組選擇器

相關(guān)文章

**常用css3選擇器**

**常用css3選擇器**

CSS3主要內(nèi)容

發(fā)表評(píng)論

0條評(píng)論

番茄西紅柿

男|高級(jí)講師

TA的文章

tensor

Windows 下安裝 XGBoost

Hadoop 2.6.0 啟動(dòng)問題 lib/native/libhadoop.so which mi

VmShell：黑五美國(guó)VPS,免費(fèi)先開通測(cè)試,滿意后付款!支持tiktok美區(qū)

百度智能云：云產(chǎn)品特惠福利,1核2G輕量應(yīng)用服務(wù)器僅48元/年

Linux系統(tǒng)和寶塔面板如何啟用禁ping功能?

301重定向怎么做?301重定向設(shè)置方法有幾種

wordpress網(wǎng)站重定向次數(shù)過(guò)多的解決方法

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

CSS3中的選擇器

1、通配符選擇器

2、類選擇器

3、id選擇器

4、元素選擇器

5、屬性選擇器

具體分為三種：

①簡(jiǎn)單屬性選擇器：選擇具有某個(gè)屬性名的元素

②具體屬性值選擇器：選擇具有指定屬性鍵值對(duì)（屬性名和屬性值都要匹配）的元素

③子串匹配屬性選擇器：可以規(guī)定屬性值包含什么字符串(*)或以什么字符串開頭(^)/結(jié)尾($)

6、后代選擇器（又叫包含選擇器）

7、子元素選擇器

8、兄弟選擇器（相鄰兄弟選擇器+、通用兄弟選擇器~）

①相鄰兄弟選擇器

②通用兄弟選擇器

9、偽元素選擇器

10、偽類選擇器

11、群組選擇器

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

1、通配符選擇器

2、類選擇器

3、id選擇器

4、元素選擇器

6、后代選擇器（又叫包含選擇器）

7、子元素選擇器

8、兄弟選擇器（相鄰兄弟選擇器+、通用兄弟選擇器~）

10、偽類選擇器

11、群組選擇器