CSS3中的選擇器

番茄西紅柿發布于2019-04-23 13:45 / 850人閱讀

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

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

通配符選擇器、類選擇器、id選擇器、元素選擇器（又叫標簽選擇器）、屬性選擇器、

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

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

1、通配符選擇器

語法：* {屬性名：屬性值；屬性名：屬性值； ........} 為頁面上的所有元素設置樣式，優先級最低

*{
  margin:0;
  padding:0;  
}

2、類選擇器

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

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


body>

3、id選擇器

語法：#id名{屬性名：屬性值；屬性名：屬性值； .......} 為id屬性值為指定id名的元素設置樣式

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

body>

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

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

4、元素選擇器

又叫標簽選擇器，根據元素名（標簽名）來設置樣式

語法：元素名{屬性名：屬性值；屬性名：屬性值； .......} 為所有指定的元素設置樣式

<style>
   p{

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

body>

5、屬性選擇器

具體分為三種：

①簡單屬性選擇器：選擇具有某個屬性名的元素

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

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

body>

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

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

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

body>

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

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

　　　[元素屬性$="def"]{屬性名：屬性值；屬性名：屬性值； .......} 相應的屬性值以def結尾的元素

　　　[元素屬性*="def"]{屬性名：屬性值；屬性名：屬性值； .......} 相應的屬性值包含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、后代選擇器（又叫包含選擇器）

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

<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、子元素選擇器

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

<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、兄弟選擇器（相鄰兄弟選擇器+、通用兄弟選擇器~）

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

①相鄰兄弟選擇器

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

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

body>

②通用兄弟選擇器

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

<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、偽元素選擇器

語法：selector: pseudo-element/:: pseudo-element{property:value;........} 通過添加一些實際的元素來向匹配selector選擇器的元素添加一些效果

有以下五種：

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

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

③:before/::before 在元素內容之前添加內容，屬于該元素，默認偽元素是行內元素

④:after /::after 在元素內容之后添加內容，屬于該元素，默認偽元素是行內元素

⑤::selection 設置元素在被選擇時的樣式。

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

<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>
    今天，陽光明媚，晴空萬里，非常適合戶外活動，如踏青、遠足之類的。長期 坐在辦公室的同學們要多注意運動。
  p>
div>

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

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

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

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

效果圖為：

附加一個after和before的應用實例

10、偽類選擇器

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

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

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

偽類和偽元素的區別：

偽類選擇元素基于的是當前元素處于的狀態，或者說元素當前所具有的特性，而不是元素的id、class、屬性等靜態的標志。由于狀態是動態變化的，所以一個元素達到一個特定狀態時，它可能得到一個偽類的樣式；當狀態改變時，它又會失去這個樣式。由此可以看出，它的功能和class有些類似，但它是基于文檔之外的抽象，所以叫偽類。

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

11、群組選擇器

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

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

body>

GPU云服務器云服務器選擇器派生選擇器省市選擇器屬性選擇器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/2290.html

常用css3選擇器

摘要：模糊匹配屬性選擇器標題選擇器匹配屬性值以標題指定值開頭的每個元素。選擇器用來匹配父元素中最后一個子元素。和和是可用于匹配下標是奇數或偶數的子元素的關鍵詞選擇器匹配同類型中的倒數第個同級兄弟元素。 1 2 3 4 5 p{ width:40px; margin:8px auto; line-height:40px; border:1px solid...

ytwman 2019-08-29 12:48 評論0 收藏0
常用css3選擇器

摘要：模糊匹配屬性選擇器標題選擇器匹配屬性值以標題指定值開頭的每個元素。選擇器用來匹配父元素中最后一個子元素。和和是可用于匹配下標是奇數或偶數的子元素的關鍵詞選擇器匹配同類型中的倒數第個同級兄弟元素。 1 2 3 4 5 p{ width:40px; margin:8px auto; line-height:40px; border:1px solid...

Cheng_Gang 2019-08-01 17:01 評論0 收藏0
CSS3主要內容

摘要：必須要準確的放置否則聲明無效。倒影設置元素的倒影準確的來說不能算是的東西，但需要知道。默認值不可繼承背景漸變漸變是在中新增加的圖片類型使用漸變可以在兩種顏色間制造出平滑的漸變效果用它代替圖片，可以加快頁面的載入時間減小帶寬占用。 CSS3主要內容一、CSS選擇器 ? CSS3選擇器規范地址： https://www.w3.org/TR/2011/RE...? ...

X_AirDu 2019-08-30 11:15 評論0 收藏0

發表評論

登陸后可評論

0條評論

番茄西紅柿

男|高級講師

我要關注我要私信

TA的文章

tensor

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

閱讀 3921·2021-11-30 14:52
Hadoop 2.6.0 啟動問題 lib/native/libhadoop.so which mi

閱讀 3794·2021-11-30 14:52
VmShell：黑五美國VPS,免費先開通測試,滿意后付款!支持tiktok美區

閱讀 3859·2021-11-29 11:00
百度智能云：云產品特惠福利,1核2G輕量應用服務器僅48元/年

閱讀 3790·2021-11-29 11:00
Linux系統和寶塔面板如何啟用禁ping功能?

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

閱讀 3562·2021-11-29 11:00
wordpress網站重定向次數過多的解決方法

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

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

CSS3中的選擇器

1、通配符選擇器

2、類選擇器

3、id選擇器

4、元素選擇器

5、屬性選擇器

具體分為三種：

①簡單屬性選擇器：選擇具有某個屬性名的元素

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

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

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

7、子元素選擇器

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

①相鄰兄弟選擇器

②通用兄弟選擇器

9、偽元素選擇器

10、偽類選擇器

11、群組選擇器

相關文章

**常用css3選擇器**

**常用css3選擇器**

CSS3主要內容

發表評論

0條評論

番茄西紅柿

男|高級講師

TA的文章

tensor

Windows 下安裝 XGBoost

Hadoop 2.6.0 啟動問題 lib/native/libhadoop.so which mi

VmShell：黑五美國VPS,免費先開通測試,滿意后付款!支持tiktok美區

百度智能云：云產品特惠福利,1核2G輕量應用服務器僅48元/年

Linux系統和寶塔面板如何啟用禁ping功能?

301重定向怎么做?301重定向設置方法有幾種

wordpress網站重定向次數過多的解決方法

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

CSS3中的選擇器

1、通配符選擇器

2、類選擇器

3、id選擇器

4、元素選擇器

5、屬性選擇器

具體分為三種：

①簡單屬性選擇器：選擇具有某個屬性名的元素

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

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

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

7、子元素選擇器

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

①相鄰兄弟選擇器

②通用兄弟選擇器

9、偽元素選擇器

10、偽類選擇器

11、群組選擇器

相關文章

發表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務器低至59元/年，更有多臺、長期優惠，快來選購！

1、通配符選擇器

2、類選擇器

3、id選擇器

4、元素選擇器

5、屬性選擇器

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

7、子元素選擇器

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

9、偽元素選擇器

11、群組選擇器