MENU

CSS选择器使用方法

CSS选择器

1. ID选择器

<style>
    #elem{}
</style>
<div id="elem"></div>

注:

  1. 在一个页面中,ID值是唯一的
  2. 命名规范(不能以数字开头)

    • 字母
    • 数字
    • _
    • -
  3. 命名方式

    • 驼峰式 searchButton | SearchButton
    • 下划线式 search_button
    • 短线式 search-button

2. CLASS选择器

<style>
    .elem{}
</style>
<div class="elem"></div>

注:

  1. class选择器可以复用

    <div class="content"></div>
    <div class="content"></div>
  2. 可以添加多个class样式

    <div class="content container"></div>
  3. 多个样式的时候,优先的样式根据CSS决定,而不是class属性中的顺序

    <style>
        .content{background:red;}
        .container{background:blue;}
    </style>
    <div class="container content"></div>
    
    <!-- 因container类的样式在后,因此div标签的颜色为蓝色 -->
  4. 标签+类的写法

    <style>
        p.content{background:red;}
    </style>
    <div class="content"></div>
    <p cless="content"></p>
    
    <!-- 只会针对属于content类的p标签添加红色背景  -->

3. 标签选择器

<style>
    div{}
</style>
<div></div>

使用场景:

  1. 去掉某些标签的默认样式时
  2. 复杂的选择器中,如层次选择器

4. 群组选择器

<style>
    div,.title,#text{}
</style>
<div></div>
<h2 class="title"></h2>
<p id="text"></p>

5. 通配选择器

*{}

注:尽量避免使用通配选择器

6. 层次选择器

  1. 后代:M N{}

    <style>
    ul li{border:1px red solid;}
    </style>
    <ul>
    <li><!-- 会获得1像素宽、红线、实线边框 -->
     <ul>
         <li></li><!-- 会获得1像素宽、红线、实线边框 -->
         <li></li><!-- 会获得1像素宽、红线、实线边框 -->
         <li></li><!-- 会获得1像素宽、红线、实线边框 -->
     </ul>
    </li>
    <li></li><!-- 会获得1像素宽、红线、实线边框 -->
    <li></li><!-- 会获得1像素宽、红线、实线边框 -->
    </ul>
    <ol>
    <li></li>
    <li></li>
    <li></li>
    </ol>
  2. 父子:M>N{}

    <style>
    ul>li{border:1px red solid;}
    </style>
    <ul>
    <li><!-- 会获得1像素宽、红线、实线边框 -->
     <ul>
         <li></li><!-- 不会获得样式 -->
         <li></li><!-- 不会获得样式 -->
         <li></li><!-- 不会获得样式 -->
     </ul>
    </li>
    <li></li><!-- 会获得1像素宽、红线、实线边框 -->
    <li></li><!-- 会获得1像素宽、红线、实线边框 -->
    </ul>
    <ol>
    <li></li>
    <li></li>
    <li></li>
    </ol>
  3. 兄弟:M~N{}

    <!-- 当前M下的所有兄弟N标签 -->
    <style>
    div~h2{background:red;}
    </style>
    <h2></h2>        <!-- 不会获得样式 -->
    <div></div>
    <p></p>
    <h2></h2>        <!-- 获得红色背景 -->
    <h2></h2>        <!-- 获得红色背景 -->
    <h2></h2>        <!-- 获得红色背景 -->
  4. 相邻:M+N{}

    <!-- 当前M下面相邻的N标签 -->
    <style>
    div~h2{background:red;}
    </style>
    <h2></h2>        <!-- 不会获得样式 -->
    <div></div>
    <h2></h2>        <!-- 获得红色背景 -->
    <p></p>
    <h2></h2>        <!-- 不会获得样式 -->
    <h2></h2>        <!-- 不会获得样式 -->
    <h2></h2>        <!-- 不会获得样式 -->

7. 属性选择器

  1. M[attr] M元素选择指定为attr属性的集合

    <style>
        /* 选择所有div标签下有class类的标签 */
        div[clsaa]{background:red;} 
    </style>
    <div>aaaaa</div>                    <!-- 不满足条件 -->
    <div class="content">bbbbb</div>    <!-- 满足条件,获得红色背景样式 -->
    <div clsaa="container">ccccc</div>    <!-- 满足条件,获得红色背景样式 -->
  2. M[attr=value] M元素选择指定为attr属性和value值的集合

    <style>
        /* 选择所有div标签下所有class类名为container的标签 */
        div[clsaa="container"]{background:red;} 
    </style>
    <div>aaaaa</div>                    <!-- 不满足条件 -->
    <div class="content">bbbbb</div>    <!-- 不满足条件 -->
    <div clsaa="container">ccccc</div>    <!-- 满足条件,获得红色背景样式 -->
  3. M[attr*=value] M元素选择指定为attr属性并且包含值为value的集合

    <style>
        /* 选择所有div标签下所有class类名包含container的标签 */
        div[clsaa*="container"]{background:red;} 
    </style>
    <div>aaaaa</div>                            <!-- 不满足条件 -->
    <div class="content">bbbbb</div>            <!-- 不满足条件 -->
    <div clsaa="container">ccccc</div>            <!-- 满足条件,获得红色背景样式 -->
    <div class="container-button">ddddd</div>    <!-- 满足条件,获得红色背景样式 -->
    <div class="body-container">ddddd</div>        <!-- 满足条件,获得红色背景样式 -->
  4. M[attr^=value] M元素选择指定为attr属性并且起始值为value的集合

    <style>
        /* 选择所有div标签下所有class类名以container开头的标签 */
        div[clsaa^="container"]{background:red;} 
    </style>
    <div>aaaaa</div>                            <!-- 不满足条件 -->
    <div class="content">bbbbb</div>            <!-- 不满足条件 -->
    <div clsaa="container">ccccc</div>            <!-- 满足条件,获得红色背景样式 -->
    <div class="container-button">ddddd</div>    <!-- 满足条件,获得红色背景样式 -->
    <div class="body-container">ddddd</div>        <!-- 不满足条件 -->
  5. M[attr$=value] M元素选择指定为attr属性并且结束值为value的集合

    <style>
        /* 选择所有div标签下所有class类名以container结尾的标签 */
        div[clsaa$="container"]{background:red;} 
    </style>
    <div>aaaaa</div>                            <!-- 不满足条件 -->
    <div class="content">bbbbb</div>            <!-- 不满足条件 -->
    <div clsaa="container">ccccc</div>            <!-- 满足条件,获得红色背景样式 -->
    <div class="container-button">ddddd</div>    <!-- 不满足条件 -->
    <div class="body-container">ddddd</div>        <!-- 满足条件,获得红色背景样式 -->
  6. M\[attr1][attr2] M元素选择满足多个属性的集合

    <style>
        /* 选择所有div标签下有class类和id名的标签 */
        div[clsaa][id]{background:red;} 
    </style>
    <div>aaaaa</div>                                <!-- 不满足条件 -->
    <div class="content" id="content">bbbbb</div>    <!-- 满足条件,获得红色背景样式 -->
    <div clsaa="container">ccccc</div>                <!-- 不满足条件 -->
    <div class="container-button">ddddd</div>        <!-- 不满足条件 -->
    <div class="body-container">ddddd</div>            <!-- 不满足条件 -->

8. 伪类选择器

CSS伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候,用伪类来添加

8.1 :link、:visited、:hover、:active

  1. :link 访问前的样式 (只针对a标签)

    <style>
        a:link{color:red;} /* 访问前链接为红色 */
    </style>
    <a href="#">点击访问</a>
  2. :visited 访问后的样式(只针对a标签)

    <style>
        a:visited{color:blue;} /* 访问后链接为蓝色 */
    </style>
    <a href="#">点击访问</a>
  3. :hover 鼠标移入时的样式(针对所有标签)

    <style>
        div{width:200px; height:200px; background:red;}
        div:hover{background:blue;} /* 鼠标移入div标签后,标签背景变为蓝色 */
    </style>
    <div></div>
  4. :active 鼠标按下时的样式(针对所有标签)

    <style>
        div{width:200px; height:200px; background:red;}
        div:active{background:green;} /* 鼠标移入div标签后,标签背景变为绿色 */
    </style>
    <div></div>

注:如果四个伪类都生效,一定注意顺序:L V H A

<style>
    a:link{color:red;}        /* 访问前链接为红色 */
    a:visited{color:blue;}    /* 访问后链接为蓝色 */
    a:hover{color:green;}    /* 访问后链接为绿色 */
    a:active{color:yellow}    /* 访问后链接为黄色 */
</style>
<a href="#">点击访问</a>

8.2 :after、:before、:checked、:disabled、:focus

  1. :after 在元素后添加一段文本内容

    <style>
        div:after{content:" World!"}
    </style>
    <div>
        Hello
    </div>
    <!-- 显示效果为Hello World! -->
  2. :before 在元素前添加一段文本内容

    <style>
        div:before{content:"Hello "}
    </style>
    <div>
        World!
    </div>
    <!-- 显示效果为Hello World! -->
  3. :checked 为被选中表单元素添加样式

    <style>
        :checked{width:50px; height:100px;}
    </style>
    <input type="checkbox" checked>
    <input type="checkbox" disabled>
    <input type="checkbox">
  4. :disabled

    <style>
        :disabled{width:50px; height:100px;}
    </style>
    <input type="checkbox" checked>
    <input type="checkbox" disabled>
    <input type="checkbox">
  5. focus 表单元素获取光标后获得样式

    <style>
        :focus{background:red;}
    </style>
    <input type="text">

9. 结构型伪类选择器

  1. :nth-of-type()

    <style>
        li:nth-of-type(3){background:red;}
    </style>
    <ul>
        <li></li>
        <li></li>
        <li></li>    <!-- 获得红色背景色样式 -->
        <li></li>
        <li></li>
    </ul>
    
    <!-------------------------------------------------------------------->
    
    <style>
        li:nth-of-type(n){background:red;}
    </style>
    <ul>
        <li></li>    <!-- 获得红色背景色样式 -->
        <li></li>    <!-- 获得红色背景色样式 -->
        <li></li>     <!-- 获得红色背景色样式 -->
        <li></li>    <!-- 获得红色背景色样式 -->
        <li></li>    <!-- 获得红色背景色样式 -->
    </ul>
    
    <!--------------------------------------------------------------------->
    
    <style>
        li:nth-of-type(2n){background:red;}
    </style>
    <ul>
        <li></li>
        <li></li>    <!-- 获得红色背景色样式 -->
        <li></li>
        <li></li>    <!-- 获得红色背景色样式 -->
        <li></li>
    </ul>
  2. :first-of-type

    <style>
        li:first-of-type{background:red;}
    </style>
    <ul>
        <li></li> <!-- 获得红色背景色样式 -->
        <li></li>
        <li></li> 
        <li></li>
        <li></li>
    </ul>
  3. :last-of-type

    <style>
        li:last-of-type{background:red;}
    </style>
    <ul>
        <li></li> 
        <li></li>
        <li></li> 
        <li></li>
        <li></li> <!-- 获得红色背景色样式 -->
    </ul>
  4. :only-of-type

    <style>
        li:only-of-type{background:red;}
    </style>
    <ul>
        <li></li> 
        <li></li>
        <li></li> 
        <li></li>
        <li></li>
    </ul>
    <!-- 因<li>标签数大于1,所以都无法获得样式,当有且仅有一个<li>标签时,该标签获得红色背景样式 -->
  5. :nth-child()

    <style>
        li:nth-child(2){background:red;}
    </style>
    <ul>
        <li></li>
        <div>aaaa</div>
        <li></li>
        <li></li> 
        <li></li>
        <li></li>
    </ul>
    <!-- 因<div>标签位于第2顺序上,但指定为<li>标签,所以样式不生效 -->
  6. :first-child

    <style>
        li:first-child{background:red;}
    </style>
    <ul>
        <li></li>        <!-- 获得红色背景样式 -->
        <div>aaaa</div>
        <li></li>
        <li></li> 
        <li></li>
        <li></li>
    </ul>
  7. :last-child

    <style>
        li:last-child{background:red;}
    </style>
    <ul>
        <li></li>        
        <div>aaaa</div>
        <li></li>
        <li></li> 
        <li></li>
        <li></li>        <!-- 获得红色背景样式 -->
    </ul>
  8. :only-child

    <style>
            li:only-child{background-color: red;}
            div:only-child{background-color: blue;}
    </style>
    <ul>
        <li></li>        
        <div>aaaa</div>
        <li></li>
        <li></li> 
        <li></li>
        <li></li>        
    </ul>
    <!-- <li>标签数大于1,所以不会获得样式,<div>标签虽个数为1,但与<li>属于同级标签,故也不会获得样式 -->

版权属于:LeeYD · Blog
本文标题:CSS选择器使用方法
本文链接:https://www.leeyiding.com/archives/40/
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 4.0 许可协议
若转载本文,请标明出处并告知本人

返回文章列表 文章二维码 打赏
本页链接的二维码
打赏二维码
添加新评论

打卡

已有 1 条评论
  1. nasaiboy nasaiboy     MacOS /   Safari

    少了hover选择器