目錄
css選擇符整理
首頁 web前端 css教學 css選擇符號整理及偽類、偽對象

css選擇符號整理及偽類、偽對象

Feb 09, 2017 am 11:17 AM
css css3 css選擇器 偽類

css選擇符整理

  • 一、通配符*

       *{
               margin: 0;
               padding: 0;
           }
    登入後複製
    登入後複製

    作用:將頁面中所有元素的內外補丁設定為0;

       .class * {
           color:#ffffff;
       }
    登入後複製
    登入後複製

    將class下面的所有元素字體設定為白色;

    二、標籤選擇符
  •         p,
            p,
            a,
            span,
            h1 {
                color: #FFFFFF;
            }
    登入後複製
    html有很多標籤,可以直接用標籤選擇符給他們加樣式,但是標籤選擇符和通配符的選擇範圍都很大,建議配合其他選擇符一起使用。

三、類選擇符
      在頁面中,我們可以為標籤加上一個屬性,class-類,自訂一個類名,例如
  • <p class="myClass"></p>

    ,然後我就可以在css中用類別選擇符為這個類別加上我們想要的屬性。

           .myClass{
               color: #FFFFFF;
           }
    登入後複製
    登入後複製
    四、id選擇符
  •   id選擇符與類別選擇符有點相似
  • <p id="myClass"></p>


           #myClass{
               color: #FFFFFF;
           }
    登入後複製
    登入後複製
    前面是一個# 的前綴,與class不同的是,與class不同的是,與class不同的是id在html中只允許出現一次,可能你懂id的唯一性,但你寫了兩個p,相同class、id。卻發現用id添加樣式的時候,兩個id都成功出現了正常樣式且沒有報錯。但是相同id會導致JavaScript等腳本語言判斷錯誤。這麼說可能無法解釋好id選擇符可以給兩個相同p添加樣式,但是看這裡傳送門,簡單點說,這就是個原則,就好像一個國家有它的法率(故意錯字,我怕被系統屏蔽)你不能違反法率,否則就容不下你。 [1]

    五、包含選擇符
  •   包含選擇符也可以稱為派生選擇符或後代選擇器,因為作用是在某元素的子元素上。
  •     .class1 span{
           
       }
    登入後複製
    登入後複製


    六、子選擇符
  •   作用是定義子元素物件的樣式,無法定義子元素以外的物件。 (書上是這麼說的)我想加個詞,定義某元素的直接子元素物件的樣式。打個比方,我有一處房產,但只能給我兒子,不能給我孫子。打個比方哈,我沒有房子。 /淚崩。
  • 父元素子元素直接加個'>'符號。



         .class1 > span{
            
        }
    登入後複製
    登入後複製
七、相鄰選擇符
      匹配同一個父級下某元素的下一個元素。
  • (這裡我想問既然是下一個元素為什麼要叫相鄰選擇符,相鄰不是前後左右相鄰嗎,叫下級選擇符好了,哈哈哈,開個玩笑。)相鄰元素直接用' +'符號連接。



        .myClass + p{
            color: red;
        }
    登入後複製
    登入後複製
八、屬性選擇符
      任何一個HTML標籤都會有屬性存在,且每個屬性都有屬性值;例如:
  • <p class="myClass" id="zz" style="color: #FFFFFF;"></p>
    登入後複製
    登入後複製

    屬性選擇符分為七種模式(4+3)種模式:

    1.E[attr]

       p[class] {
           color: #FFFFFF;
       }
       --具有class属性的p字体颜色白色(忽略attr的值);
    登入後複製
    登入後複製
    2.E[attr="value"]

       p[class="myClass"] {
           color: #FFFFFF;
       }
       --class的值为'myClass'的p字体颜色白色;
    登入後複製
    登入後複製
    3.E[attr~="value"]

       p[class~="myClass"] {
           background-color: #000000;
           color: #fff;
       }--匹配具有'attr'属性且属性值是具有空格符号隔开的字段其中一个字段等于value的E标签元素
       ex:
       <p class="myClass zz"></p>
       <p class="myClass cc"></p>
    登入後複製
    登入後複製
    4.E[attr|="value"]

       p[class|="myClass"] {
           background-color: #000000;
           color: #fff;
       }--匹配具有'attr'属性且属性值是以value值开头及使用连字符'-'分割的E标签元素。
       ex:
       <p class="myClass-zz"></p>
       <p class="myClass-cc"></p>
    登入後複製
    登入後複製
    5.E[attr^="value"]

       p[class^="myClass"] {
           background-color: #000000;
           color: #fff;
       }--匹配具有'attr'属性且属性值是以value值开头的E标签元素。
       ex:
       <p class="myClasszz"></p>
       <p class="myClasscc"></p>
    登入後複製
    登入後複製
    6.E[attr$="value"]

       p[class$="myClass"] {
           background-color: #000000;
           color: #fff;
       }--匹配具有'attr'属性且属性值是以value值结尾的E标签元素。
       ex:
       <p class="zzmyClass"></p>
       <p class="ccmyClass"></p>
    登入後複製
    登入後複製
    7.E[attr*="value"]

       p[class*="myClass"] {
           background-color: #000000;
           color: #fff;
       }--匹配具有'attr'属性且属性值含有value的E标签元素。
       ex:
       <p class="myClass-zz"></p>
       <p class="myClass-cc"></p>
    登入後複製
    登入後複製

    九、選擇符組合
  •   選擇符最大的優點不是可以為某元素或某類元素書寫樣式,而已針對不同的頁面結構組合成各種組合。
  •   不得不提的就是選擇符號組合的嵌套層數,雖然沒有哪裡直接規定嵌套層數不能超過多少,但是,嵌套過多層數容易產生垃圾代碼也不利於收錄會。



    十、css選擇符權重
  •   把特殊性分為4個等級,每個等級代表一類選擇器,每個等級的值為其所代表的選擇器的個數乘以這一等級的權值,最後把所有等級的值相加得出選擇器的特殊值。

  • 4個等級的定義如下:
第一等:代表内联样式,如: style=””,权值为1000。
第二等:代表ID选择器,如:#content,权值为100。
第三等:代表类,伪类和属性选择器,如.content,权值为10。
第四等:代表类型选择器和伪元素选择器,如p p,权值为1。
PS:通用选择符'*'、子选择符'>'、相邻选择符'+'的权值为0。
登入後複製
登入後複製
使用css組合的時候,權值等於每一層的權值相加。

ex:
    .myClass #zz h1 {
        color: #FFFFFF;
    }
权值为: 10 + 100 + 1 = 111 ;
登入後複製
登入後複製

十一、偽類、偽物件選擇子
  • 常見偽類:

       :link:指示为超链接(既有一个href属性),并指向一个未访问地址的所有锚。
       :visited:指示作为已访问地址超链接的所有锚。
       :focus:指示当前拥有输入焦点的元素,也就是说,可以接受键盘输入或者能以某种方式激活的元素。
       :hover:指示鼠标指针停留在哪个元素上,例如,鼠标指针可能停留在一个超链接上
       :active:指示被用户输入激活的元素,例如,鼠标指针停留在一个超链接上时,如果用户点击鼠标,就会激活这个超链接,:active将指示这个超链接。
       :first-letter:设置对象内的第一个字符的样式表属性。 
       :first-line:设置对象内的第一行的样式表属性。 
       :first-child:设置对象(Selector1)的第一个子对象(Selector2)的样式表属性。 
       :first:设置页面容器第一页使用的样式表属性。仅用于@page规则。 
       :left:设置页面容器位于装订线左边的所有页面使用的样式表属性。仅用于@page规则。 
       :right:设置页面容器位于装订线右边的所有页面使用的样式表属性。仅用于@page规则。 
       :lang:设置对象使用特殊语言的内容样式表属性。
    登入後複製
    登入後複製
    結構性偽類:

       E:nth-child(n):匹配父元素中的第n个子元素E。
       E:nth-last-child(n):匹配父元素中的倒数第n个结构子元素E。
       E:nth-of-type(n):匹配同类型中的第n个同级兄弟元素E。
       E:nth-last-of-type(n):匹配同类型中的倒数第n个同级兄弟元素E。
       E:last-child:匹配父元素中最后一个E元素。
       E:first-of-type:匹配同级兄弟元素中的第一个E元素。
       E:only-child:匹配属于父元素中唯一子元素的E。
       E:only-of-type:匹配属于同类型中唯一兄弟元素的E。
       E:empty:匹配没有任何子元素(包括text节点)的元素E。
    登入後複製
    登入後複製
    UI元素狀態偽類:

       E:checked:匹配所有用户界面(form表单)中处于选中状态的元素E
       E:enabled:匹配所有用户界面(form表单)中处于可用状态的E元素
       E:disabled:匹配所有用户界面(form表单)中处于不可用状态的E元素
       E:selection:匹配E元素中被用户选中或处于高亮状态的部分
    登入後複製
    登入後複製
    類別:

        E:not(s):匹配所有不匹配简单选择符s的元素E
    登入後複製
    登入後複製
    通用兄弟元素選擇器:

       E:target:匹配相关URL指向的E元素
    登入後複製
    登入後複製
    偽物件:

       E ~ F:匹配E元素之后的F元素
    登入後複製
    登入後複製

    註:本文參考《css那些事兒》、css2/css3參考手冊。僅代表個人觀點,若有不對或不當處請指正。轉載請註明出處,謝謝合作!

css選擇符整理

一、通配符*

   :before用来和content属性一起使用,设置在对象前(依据对象树的逻辑结构)发生的内容。
   :after用来和content属性一起使用,设置在对象后(依据对象树的逻辑结构)发生的内容。
登入後複製
登入後複製

作用:將頁面中所有元素的內外補丁設置為0;
       *{
               margin: 0;
               padding: 0;
           }
    登入後複製
    登入後複製
  • 將class類下面的所有元素字體顏色設置為白色;

    二、標籤選擇符

  •    .class * {
           color:#ffffff;
       }
    登入後複製
    登入後複製
  • html有很多標籤,可以直接用標籤選擇符給他們加樣式,但是標籤選擇符和通配符的選擇範圍都很大,建議配合其他選擇符一起使用。
    • 三、类选择符
        在页面中,我们可以给标签加上一个属性,class-类,自定义一个类名,比如<p class="myClass"></p>,然后我就可以在css中用类选择符给这个类加上我们想要的属性。

             .myClass{
                 color: #FFFFFF;
             }
      登入後複製
      登入後複製
    • 四、id选择符
        id选择符与类选择符有点相似<p id="myClass"></p>

             #myClass{
                 color: #FFFFFF;
             }
      登入後複製
      登入後複製

      前面是一个 # 的前缀,与class不同的是,id在html中只允许出现一次,可能你明白id的唯一性,但是你写了两个p,相同class、id。却发现用id添加样式的时候,两个id都成功出现了正常样式且没有报错。但是相同id会导致JavaScript等脚本语言判断错误。这么说可能无法解释好id选择符可以给两个相同p添加样式,但是看这里传送门,简单点说,这就是个原则,就好像一个国家有它的法率(故意错别字,我怕被系统屏蔽)你不能违反法率,否则就容不下你。[1]

    • 五、包含选择符
        包含选择符也可以叫派生选择符或后代选择器,因为作用是在某元素的子元素上。

          .class1 span{
             
         }
      登入後複製
      登入後複製
    • 六、子选择符
        作用是定义子元素对象的样式,无法定义子元素以外的对象。(书上是这么说的)我想加个词,定义某元素的直接子元素对象的样式。打个比方,我有一处房产,但是只能给我儿子,不能给我孙子。打个比方哈,我没有房子。/泪崩。
      父元素子元素直接加个'>'符号。

         .class1 > span{
            
        }
    登入後複製
    登入後複製
    • 七、相邻选择符
        匹配同一个父级下某元素的下一个元素。
      (这里我想问问既然是下一个元素为什么要叫相邻选择符,相邻不是前后左右相邻吗,叫下级选择符好了,哈哈哈,开个玩笑。)相邻元素直接用'+'符号连接。

        .myClass + p{
            color: red;
        }
    登入後複製
    登入後複製
    • 八、属性选择符
        任何一个HTML标签都会有属性存在,且每个属性都具有属性值;比如:

      <p class="myClass" id="zz" style="color: #FFFFFF;"></p>
      登入後複製
      登入後複製

      属性选择符分为七(4+3)种模式:

      1.E[attr]

         p[class] {
             color: #FFFFFF;
         }
         --具有class属性的p字体颜色白色(忽略attr的值);
      登入後複製
      登入後複製

      2.E[attr="value"]

         p[class="myClass"] {
             color: #FFFFFF;
         }
         --class的值为'myClass'的p字体颜色白色;
      登入後複製
      登入後複製

      3.E[attr~="value"]

         p[class~="myClass"] {
             background-color: #000000;
             color: #fff;
         }--匹配具有'attr'属性且属性值是具有空格符号隔开的字段其中一个字段等于value的E标签元素
         ex:
         <p class="myClass zz"></p>
         <p class="myClass cc"></p>
      登入後複製
      登入後複製

      4.E[attr|="value"]

         p[class|="myClass"] {
             background-color: #000000;
             color: #fff;
         }--匹配具有'attr'属性且属性值是以value值开头及使用连字符'-'分割的E标签元素。
         ex:
         <p class="myClass-zz"></p>
         <p class="myClass-cc"></p>
      登入後複製
      登入後複製

      5.E[attr^="value"]

         p[class^="myClass"] {
             background-color: #000000;
             color: #fff;
         }--匹配具有'attr'属性且属性值是以value值开头的E标签元素。
         ex:
         <p class="myClasszz"></p>
         <p class="myClasscc"></p>
      登入後複製
      登入後複製

      6.E[attr$="value"]

         p[class$="myClass"] {
             background-color: #000000;
             color: #fff;
         }--匹配具有'attr'属性且属性值是以value值结尾的E标签元素。
         ex:
         <p class="zzmyClass"></p>
         <p class="ccmyClass"></p>
      登入後複製
      登入後複製

      7.E[attr*="value"]

         p[class*="myClass"] {
             background-color: #000000;
             color: #fff;
         }--匹配具有'attr'属性且属性值含有value的E标签元素。
         ex:
         <p class="myClass-zz"></p>
         <p class="myClass-cc"></p>
      登入後複製
      登入後複製
    • 九、选择符组合
        选择符最大的优势不是可以给某元素或某类元素书写样式,而已针对不同的页面结构组合成各种组合。
        不得不提的就是选择符组合的嵌套层数,虽然没有哪里直接规定嵌套层数不能超过多少,但是,嵌套过多层数容易产生垃圾代码也不利于收录会。

    • 十、css选择符权重
        把特殊性分为4个等级,每个等级代表一类选择器,每个等级的值为其所代表的选择器的个数乘以这一等级的权值,最后把所有等级的值相加得出选择器的特殊值。

    4个等级的定义如下:

    第一等:代表内联样式,如: style=””,权值为1000。
    第二等:代表ID选择器,如:#content,权值为100。
    第三等:代表类,伪类和属性选择器,如.content,权值为10。
    第四等:代表类型选择器和伪元素选择器,如p p,权值为1。
    PS:通用选择符'*'、子选择符'>'、相邻选择符'+'的权值为0。
    登入後複製
    登入後複製

    使用css组合的时候,权值等于每一层的权值相加。

    ex:
        .myClass #zz h1 {
            color: #FFFFFF;
        }
    权值为: 10 + 100 + 1 = 111 ;
    登入後複製
    登入後複製
    • 十一、伪类、伪对象选择符

      常见伪类:

         :link:指示为超链接(既有一个href属性),并指向一个未访问地址的所有锚。
         :visited:指示作为已访问地址超链接的所有锚。
         :focus:指示当前拥有输入焦点的元素,也就是说,可以接受键盘输入或者能以某种方式激活的元素。
         :hover:指示鼠标指针停留在哪个元素上,例如,鼠标指针可能停留在一个超链接上
         :active:指示被用户输入激活的元素,例如,鼠标指针停留在一个超链接上时,如果用户点击鼠标,就会激活这个超链接,:active将指示这个超链接。
         :first-letter:设置对象内的第一个字符的样式表属性。 
         :first-line:设置对象内的第一行的样式表属性。 
         :first-child:设置对象(Selector1)的第一个子对象(Selector2)的样式表属性。 
         :first:设置页面容器第一页使用的样式表属性。仅用于@page规则。 
         :left:设置页面容器位于装订线左边的所有页面使用的样式表属性。仅用于@page规则。 
         :right:设置页面容器位于装订线右边的所有页面使用的样式表属性。仅用于@page规则。 
         :lang:设置对象使用特殊语言的内容样式表属性。
      登入後複製
      登入後複製

      结构性伪类:

         E:nth-child(n):匹配父元素中的第n个子元素E。
         E:nth-last-child(n):匹配父元素中的倒数第n个结构子元素E。
         E:nth-of-type(n):匹配同类型中的第n个同级兄弟元素E。
         E:nth-last-of-type(n):匹配同类型中的倒数第n个同级兄弟元素E。
         E:last-child:匹配父元素中最后一个E元素。
         E:first-of-type:匹配同级兄弟元素中的第一个E元素。
         E:only-child:匹配属于父元素中唯一子元素的E。
         E:only-of-type:匹配属于同类型中唯一兄弟元素的E。
         E:empty:匹配没有任何子元素(包括text节点)的元素E。
      登入後複製
      登入後複製

      UI元素状态伪类:

         E:checked:匹配所有用户界面(form表单)中处于选中状态的元素E
         E:enabled:匹配所有用户界面(form表单)中处于可用状态的E元素
         E:disabled:匹配所有用户界面(form表单)中处于不可用状态的E元素
         E:selection:匹配E元素中被用户选中或处于高亮状态的部分
      登入後複製
      登入後複製

      否定伪类:

          E:not(s):匹配所有不匹配简单选择符s的元素E
      登入後複製
      登入後複製

      目标伪类:

         E:target:匹配相关URL指向的E元素
      登入後複製
      登入後複製

      通用兄弟元素选择器:

         E ~ F:匹配E元素之后的F元素
      登入後複製
      登入後複製

      伪对象:

         :before用来和content属性一起使用,设置在对象前(依据对象树的逻辑结构)发生的内容。
         :after用来和content属性一起使用,设置在对象后(依据对象树的逻辑结构)发生的内容。
      登入後複製
      登入後複製

    更多css选择符整理及伪类、伪对象 相关文章请关注PHP中文网!

    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

    熱AI工具

    Undresser.AI Undress

    Undresser.AI Undress

    人工智慧驅動的應用程序,用於創建逼真的裸體照片

    AI Clothes Remover

    AI Clothes Remover

    用於從照片中去除衣服的線上人工智慧工具。

    Undress AI Tool

    Undress AI Tool

    免費脫衣圖片

    Clothoff.io

    Clothoff.io

    AI脫衣器

    Video Face Swap

    Video Face Swap

    使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

    熱工具

    記事本++7.3.1

    記事本++7.3.1

    好用且免費的程式碼編輯器

    SublimeText3漢化版

    SublimeText3漢化版

    中文版,非常好用

    禪工作室 13.0.1

    禪工作室 13.0.1

    強大的PHP整合開發環境

    Dreamweaver CS6

    Dreamweaver CS6

    視覺化網頁開發工具

    SublimeText3 Mac版

    SublimeText3 Mac版

    神級程式碼編輯軟體(SublimeText3)

    熱門話題

    Java教學
    1657
    14
    CakePHP 教程
    1415
    52
    Laravel 教程
    1309
    25
    PHP教程
    1257
    29
    C# 教程
    1230
    24
    vue中怎麼用bootstrap vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

    在 Vue.js 中使用 Bootstrap 分為五個步驟:安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選:自定義樣式。可選:使用插件。

    了解HTML,CSS和JavaScript:初學者指南 了解HTML,CSS和JavaScript:初學者指南 Apr 12, 2025 am 12:02 AM

    WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

    HTML,CSS和JavaScript的角色:核心職責 HTML,CSS和JavaScript的角色:核心職責 Apr 08, 2025 pm 07:05 PM

    HTML定義網頁結構,CSS負責樣式和佈局,JavaScript賦予動態交互。三者在網頁開發中各司其職,共同構建豐富多彩的網站。

    bootstrap怎麼寫分割線 bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

    創建 Bootstrap 分割線有兩種方法:使用 標籤,可創建水平分割線。使用 CSS border 屬性,可創建自定義樣式的分割線。

    bootstrap怎麼插入圖片 bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

    在 Bootstrap 中插入圖片有以下幾種方法:直接插入圖片,使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件,可以提供響應式圖片和更多樣式。設置圖片大小,使用 img-fluid 類可以使圖片自適應。設置邊框,使用 img-bordered 類。設置圓角,使用 img-rounded 類。設置陰影,使用 shadow 類。調整圖片大小和位置,使用 CSS 樣式。使用背景圖片,使用 background-image CSS 屬性。

    bootstrap怎麼設置框架 bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

    要設置 Bootstrap 框架,需要按照以下步驟:1. 通過 CDN 引用 Bootstrap 文件;2. 下載文件並將其託管在自己的服務器上;3. 在 HTML 中包含 Bootstrap 文件;4. 根據需要編譯 Sass/Less;5. 導入定製文件(可選)。設置完成後,即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。

    bootstrap按鈕怎麼用 bootstrap按鈕怎麼用 Apr 07, 2025 pm 03:09 PM

    如何使用 Bootstrap 按鈕?引入 Bootstrap CSS創建按鈕元素並添加 Bootstrap 按鈕類添加按鈕文本

    bootstrap怎麼調整大小 bootstrap怎麼調整大小 Apr 07, 2025 pm 03:18 PM

    要調整 Bootstrap 中元素大小,可以使用尺寸類,具體包括:調整寬度:.col-、.w-、.mw-調整高度:.h-、.min-h-、.max-h-

    See all articles