MENU

CSS选择器使用方法

  • LeeYD •
  • • 阅读: 3592
  • • 笔记
【阿里云】爆款云产品，新客特惠全年最低价，云服务器低至0.4折起，11.1开售
【腾讯云】爆款1核2G云服务器首年48元，还有iPad Pro、Bose耳机、京东卡等你来抽！
【华为云】上云特惠巨划算，免单抽奖享豪礼
【七牛云】爆款云产品全年最低价，热门产品 0 元秒杀，参与抽奖赢新款 iPhone

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 许可协议
若转载本文，请标明出处并告知本人
【阿里云】爆款云产品，新客特惠全年最低价，云服务器低至0.4折起，11.1开售
【腾讯云】爆款1核2G云服务器首年48元，还有iPad Pro、Bose耳机、京东卡等你来抽！
【华为云】上云特惠巨划算，免单抽奖享豪礼
【七牛云】爆款云产品全年最低价，热门产品 0 元秒杀，参与抽奖赢新款 iPhone

CSSCSS选择器ID选择器CLASS选择器CSS标签选择器CSS群组选择器CSS通配选择器CSS层次选择器CSS属性选择器CSS伪类选择器CSS结构型伪类选择器
返回文章列表 文章二维码 打赏
本页链接的二维码
打赏二维码
添加新评论

打卡

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

    少了hover选择器