前端入门03 -- CSS选择器

选择器

  • 其主要作用在于选择目标标签
  • CSS选择器的类型:主要分为基础选择器复合选择器
  • 基础选择器是由单个选择器组成的,可分为标签选择器类选择器ID选择器通配符选择器
基础选择器
标签选择器
  • 使用Html标签名称作为选择器;
  • 可将某一类的标签全部选择出来,不能作差异化的设置;
<style>
   p {
      color: red;
      font-size: 13px;
   }
        
   div {
       color: green;
       font-size: 14px;
   }
</style>

<body>
    <p>这是一个段落标签1</p>
    <p>这是一个段落标签2</p>
    <p>这是一个段落标签3</p>
    <div>说分手复合的时刻1</div>
    <div>说分手复合的时刻2</div>
    <div>说分手复合的时刻3</div>
</body>
类选择器
  • 可单独选取一个标签,作差异化设置;
  • 在Html标签中以class属性表示,在CSS中以一个点号+class属性表示;
  • 样式点定义,结构类调用;
  • 类选择器-多类名:一个标签可以指定多个类名,多个类名之间用空格隔开;
  • 可以将标签的相同样式放到一个类里面,然后标签去调用公共的类,再然后调用自己独有的类;
 <style>
    .red {
        color: red;
    }
    .green {
        color: green;
     }
</style>

<body>
    <ul>
        <li class="red">你们</li>
        <li class="green">翻收到</li>
        <li class="red">的撒发</li>
        <li class="green">后宫番</li>
    </ul>
</body>
<style>
    .box {
      width: 100px;
      height: 100px;
   }
        
   .red {
      background-color: red;
    }
        
    .green {
      background-color: green;
    }
</style>
<body>
     <!-- 多个类名 -->
    <div class="box red">王祖贤</div>
    <div class="box green">王祖贤</div>
    <div class="box red">王祖贤</div>
</body>
ID选择器
  • 以HTML标签的id属性作为选择器,在CSS中id选择器以#来定义;
  • 样式通过#定义,结构通过id定义,只能被调用一次;
  • id是唯一的,不能出现重复;
<style>
    #pink {
        color: pink;
    }
</style>

<body>
    <div id="pink">刘德华</div>
</body>
通配符选择器
  • 在CSS中,通配符选择器使用*来定义,它表示选取页面中的所有元素(标签);
  • 通配符选择器不需要调用自动给所有元素设置样式
<style>
    * {
       color: red;
     }
</style>

<body>
    <div id="pink">刘德华</div>
    <span>我的</span>
    <ul>
        <li>还是我的</li>
    </ul>
</body>
image.png
复合选择器
  • 复合选择器是建立在基础选择器之上的,对基础选择器进行组合形成的;
  • 复合选择器可更精准,更高效的选择目标标签;
  • 复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的;
  • 复合选择器包括:后代选择器,子选择器,并集选择器,相邻兄弟选择器,通用兄弟选择器,伪类选择器等等;
后代选择器
  • 后代选择器又称包含选择器,可以选择父元素里面的子元素,其语法就是把外层标签写在前面,内部标签写在后面,中间用空格分隔,当标签发生嵌套时,内层标签就称为外层标签的后代;
  • 语法格式:元素1 元素2 { color: red; }
  • 选取元素1中的所有元素2,设置样式;
  • 元素1与元素2以空格隔开,元素1是父级,元素2是后代,元素2可以是儿子,也可以是孙子,只要是元素1的后代即可;
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
      /* 将ol中li选取出来 */
      ol li {
        color: red;
      }
        
      ol li a {
          color: indigo;
      }
        
      ul li {
          color: green;
      }
      /* 将class=nav的ul中li中a选取出来 */
        
      .nav li a {
          color: yellow;
      }
    </style>
</head>
<body>
    <ol>
        <li>ssssd</li>
        <li>ssssd</li>
        <li>ssssd</li>
        <li>
            <a href="#">我是孙子</a>
        </li>
    </ol>
    <ul>
        <li>中国是多少</li>
        <li>中国是多少</li>
        <li>中国是多少</li>
        <li>中国是多少</li>
    </ul>
    <ul class="nav">
        <li>中国是多少</li>
        <li>中国是多少</li>
        <li>中国是多少</li>
        <li>
            <a href="#">的身份和颠三倒四</a>
        </li>
    </ul>
</body>

</html>
子选择器
  • 只能选择作为某元素的最近一级子元素,简单理解就是选亲儿子元素;
  • 其语法格式如下:元素1>元素2 { color: red; }
  • 元素1与元素2之间用大于号隔开;
  • 元素1是父级 元素2是子级,最终选择的是元素2;
  • 元素2必须是亲儿子,不准是孙子;
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .nav>a {
            color: red;
        }
    </style>

</head>

<body>
    <div class="nav">
        <a href="#">我是亲儿子</a>
        <p>
            <a href="#">我是孙子</a>
        </p>
    </div>
</body>

</html>
并集选择器
  • 可以选择多组标签,同时为它们定义相同的样式;
  • 其语法格式如下:元素1,元素2 { color: red; }
  • 元素1与元素2之间以逗号隔开;
  • 同时设置元素1与元素2的样式;
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        div,
        p,
        .pig li {
            color: red;
        }
    </style>

</head>

<body>
    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
        <li>小猪佩奇</li>
        <li>小猪佩奇1</li>
        <li>小猪佩奇2</li>
    </ul>
</body>

</html>
相邻兄弟选择器
  • 相邻兄弟选择器:利用加号(+),将两个选择器相连;
  • 语法格式:a+b { color: red; },表示选择紧跟在a选择器的元素之后的第一个兄弟元素b,a与b是兄弟关系,有共同的父级元素,且b是a的第一个兄弟;
    image.png
通用兄弟选择器
  • 通用兄弟选择器:利用~,将两个选择器相连;
  • 语法格式:a~b { color: red; },表示a之后的所有兄弟选择器b,都会被选中;
伪类选择器
  • 伪类选择器:用于给某些选择器添加特殊效果,常见的有链接(a)伪类选择器foucus伪类选择器等等;
  • 链接(a标签)伪类选择器,主要有以下几种状态:
    • a:link:选择所有未被访问的链接;
    • a:visited:选择所有已被访问的链接;
    • a:hover:选择鼠标指针位于其上的链接;
    • a:active:选择活动链接(鼠标按下未弹起的链接);
  • 为了确保链接伪类能生效,请按照link->visited->hover->active的顺序编写;
  • 链接a标签默认是有样式的,需要单独设置样式;
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /* 未访问的链接*/
        
        a:link {
            color: #333;
            text-decoration: none;
        }
        /* 已被访问的链接*/
        
        a:visited {
            color: yellow;
        }
        /* 鼠标指针位于其上的链接*/
        
        a:hover {
            color: skyblue;
        }
        /* 鼠标按下未弹起的链接*/
        
        a:active {
            color: green;
        }
    </style>

</head>

<body>
    <a href="#">西游记</a>
</body>

</html>
  • foucus伪类选择器:用于选取 获取焦点的表单元素,焦点就是光标,一般情况下<input>类表单元素才能获取,因此这个选择器也主要针对于表格元素来说;
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        input:focus {
            background-color: pink;
        }
    </style>

</head>

<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>

</html>
image.png

CSS3新增的选择器

  • 在CSS3中新增了属性选择器,结构伪类选择器,伪元素选择器,IE9.0+才支持,存在兼容性问题,移动端支持优于PC端;
属性选择器
  • 属性选择器:可以根据元素的特定属性来选择目标元素;
  • 属性选择器的权重为0010,属性选择器的主要类型有如下:
    • a[attr]:有属性attr的所有a标签;
    • a[attr='value']:有属性attr且属性值为value的所有a标签;
    • a[attr^='value']:有属性attr且属性值以value开头的所有a标签;
    • a[attr$='value']:有属性attr且属性值以value结尾的所有a标签;
    • a[attr*='value']:有属性attr且属性值包含value的所有a标签;
    • a[attr~='value']:有属性attr且属性值包含value,value整体要以空格隔开的所有a标签;
    • a[attr|='value']:有属性attr且属性值以value或者value-开头的所有a标签;
<body>
    <div class="test">1</div>
    <div class="test_btn">2</div>
    <div class="test">3</div>
    <div class="best-best_btn">4</div>
    <div class="test">5</div>
    <div class="test-btn best">6</div>
    <div class="best-btn test">7</div>
    <div class="best">8</div>
    <div class="best-btntest">9</div>
    <a href="#1" class="links item first" title="w3cplus" target="_blank" id="first">1</a>
    <a href="http://www.baidu.com" class="links active item " title="test website" target="_blank" lang="zh">2</a>
    <a href="#3" class="links item " title="this is a link" lang="zh-cn">3</a>
    <a href="#4" class="links item " target="_blank" lang="szh-tw">4</a>
    <a href="#5" class="links item " lang="zh-cn">5</a>
</body>
  • div[class] { background-color: red; }:有class属性的所有div标签,则会选中所有的div标签;
  • div[class="test"] {background-color: red; }:有class属性且属性值为test的所有div标签,则会选中1,3,5 三个div标签;
  • div[class^="best"] { background-color: red; }:有class属性且属性值以best开头的所有div标签,则会选中4,7,8,9 四个div标签;
  • div[class$="btn"] { background-color: red; }:有class属性且属性值以btn结尾的所有div标签,则会选中2,4 两个div标签;
  • a[lang*="zh-"] { background-color: red; }:有lang属性且属性值包含zh-的所有a标签,则会选中3,4,5 三个a标签;
  • div[class~="test"] { background-color: red; }:有class属性且属性值为test且test要以空格隔开的所有div标签,则会选中1,3,5 ,7 四个div标签;
  • div[class|="test"] { background-color: red; }:有class属性且属性值以test或test-开头的所有div标签,则会选中1,3,5,6 四个div标签;
伪类选择器
  • 伪类选择器:主要根据文档结构来选择元素,常用于在父元素中选择子元素
  • 伪类选择器的权重为0010,常见类型有如下:
先将所有子元素进行排序,然后再选择
  • .father a:first-child:在父元素father中选择第一个子元素,若为a类型,则选中,否则未选中;
  • .father :first-child:在父元素father中选择第一个子元素,无类型限制,直接选中;
  • .father a:last-child:在父元素father中选择最后一个子元素,若为a类型,则选中,否则未选中;
  • .father :last-child:在父元素father中选择最后一个子元素,无类型限制,直接选中;
  • .father a:nth-child(n):其中n可以是数字,关键字,表达式;
    • 当n是数字时,表示在父元素father中选择第n个子元素,若为a类型,则选中,否则未选中;
    • 当n是关键字时,即even(偶数)odd(奇数)时,表示在父元素father中,选择奇偶数项的子元素,若为a类型,则选中,否则未选中;
    • 当n是表达式时,注意n从0开始,例如当n=n时,表示在父元素father中,选择所有的a元素,当n=n+5时,表示在父元素father中,从第五个子元素开始,若为a类型,则选中,否则未选中,当n=-n+5时,表示在父元素father中,从前5个子元素中,若为a类型,则选中,否则未选中;
先将指定类型子元素进行排序,然后再选择
  • .father a:first-of-type:将父元素father中的所有a子元素排序,然后选中第一个a子元素;
  • .father :first-of-type:将父元素father中的所有类型子元素排序,由于没有指定子元素类型,则会选择所有类型的 第一个子元素,则可能会选中多个子元素(不同类型);
  • .father a:last-of-type:将父元素father中的所有a子元素排序,然后选中最后一个a子元素;
  • .father :last-of-type:将父元素father中的所有类型子元素排序,由于没有指定子元素类型,则会选择所有类型的 最后一个子元素,则可能会选中多个子元素(不同类型);
  • .father a:nth-of-type(n):其中n可以是数字,关键字,表达式;
    • 当n是数字时,首先将父元素father中的所有a子元素排序,然后选择第n项的a元素;
    • 当n是关键字时,即even(偶数)odd(奇数)时,首先将父元素father中的所有a子元素排序,然后选择奇偶数项的a元素;
    • 当n是表达式时,注意n从0开始,例如当n=n+2时,首先将父元素father中的所有a子元素排序,然后选则从第2开始的所有a元素;
<body>
    <div class="box">
        <div>1</div>
        <span>2</span>
        <div>3</div>
        <span>4</span>
        <div>5</div>
        <span>6</span>
        <div>7</div>
        <span>8</span>
        <div>9</div>
        <span>10</span>
        <div>11</div>
        <span>12</span>
        <div>13</div>
        <span>14</span>
        <div>15</div>
        <span>16</span>
        <div>17</div>
        <span>18</span>
        <div>19</div>
        <span>20</span>
    </div>
</body>
  • .box span:first-child { background-color: pink; }:将box中所有子元素进行排序,然后选择第一个子元素,若为span类型,则选中,所以没有元素被选中;
  • .box :first-child { background-color: pink; }:将box中所有子元素进行排序,然后选择第一个子元素,没有指定类型,则直接选中,所以1被选中;
  • .box span:last-child { background-color: pink; }:将box中所有子元素进行排序,然后选择最后一个子元素,若为span类型,则选中,所以20被选中;
  • .box :last-child { background-color: pink; }:将box中所有子元素进行排序,然后选择最后一个子元素,没有指定类型,则直接选中,所以20被选中;
  • .box div:nth-child(5) { background-color: pink; }:将box中所有子元素进行排序,然后选择第5个子元素,若为div类型,则选中,所以5被选中;
  • .box :nth-child(5) { background-color: pink; }:将box中所有子元素进行排序,然后选择第5个子元素,没有指定类型,则直接选中,所以5被选中;
  • .box div:nth-child(odd) { background-color: pink; }:将box中所有子元素进行排序,然后选择奇数项子元素,若为div类型,则选中,所以1,3,5,7,9,11,13,15,17,19被选中;
  • .box :nth-child(even) { background-color: pink; }:将box中所有子元素进行排序,然后选择偶数项子元素,没有指定类型,则直接选中,所以2,3,4,6,8,10,12,14,16,18,20被选中;
  • .box div:nth-child(n+3) { background-color: pink; }:将box中所有子元素进行排序,然后从第3个子元素开始往后选择,若为div类型,则选中,所以3,5,7,9,11,13,15,17,19被选中;
  • .box :nth-child(n+3) { background-color: pink; }:将box中所有子元素进行排序,然后从第3个子元素开始往后选择,没有指定类型,则直接选中,所以3~20都被选中;
  • .box span:first-of-type { background-color: pink; }:将box中所有span子元素进行排序,然后选择第一个span元素,则2被选中;
  • .box :first-of-type { background-color: pink; }:将box中所有类型子元素分别进行排序,然后选择所有类型的第一个元素,没有指定类型,则直接选中span类型和div类型的第一个元素,则1,2被选中;
  • .box div:last-of-type { background-color: pink; }:将box中所有div子元素进行排序,然后选择最后一个div元素,则19被选中;
  • .box :last-of-type { background-color: pink; }:将box中所有类型子元素分别进行排序,然后选择所有类型的最后一个元素,没有指定类型,则直接选中span类型和div类型的最后一个元素,则19,20被选中;
  • .box div:nth-of-type(5) { background-color: pink; }:将box中所有div子元素进行排序,然后选择第5个div元素,则9被选中;
  • .box :nth-of-type(5) { background-color: pink; }:将box中所有类型子元素分别进行排序,然后选择所有类型的第5个元素,没有指定类型,则直接选中span类型和div类型的第5个元素,则9,10被中;
  • .box div:nth-of-type(odd) { background-color: pink; }:将box中所有div子元素进行排序,然后选择奇数项的div元素,则1,5,9,13,17被选中;
  • .box :nth-of-type(even) { background-color: pink; }:将box中所有类型子元素分别进行排序,然后选择所有类型的偶数项元素,则3,4,7,8,11,12,15,16,19,20被选中;
  • .box div:nth-of-type(n+5) { background-color: pink; }:将box中所有div子元素进行排序,然后从第5项开始往后选择div元素,则9,11,13,15,17,19被选中;
  • .box :nth-of-type(n+5) { background-color: pink; }:将box中所有类型子元素分别进行排序,然后分别从第5项开始往后选择div元素和span元素,则9~20都被选中;
伪元素选择器
  • 伪元素选择器:可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构;
image.png
  • before与after创建一个元素,是属于行内元素,新创建的这个元素在文档中是找不到的,所以我们称之为伪元素;
  • 语法格式:element::before {}
  • before与after必须有content属性
  • 伪元素选择器与标签选择器权重相同,权重为0001
  • before在父元素内容的前面创建元素,after在父元素内容的后面创建元素;
<style>
    div {
       width: 200px;
       height: 200px;
       background-color: pink;
    }
        
    div::before {
       content: '我';
    }
        
    div::after {
       content: '祖宗';
    }
</style>

<body>
    <div>是</div>
</body>
image.png
伪元素选择器的使用场景
  • 第一种:伪元素字体图标
<style>
    div {
        position: relative;
        width: 200px;
        height: 35px;
        border: 1px solid red;
    }
        
    div::after {
        position: absolute;
        //content: '图标';
        content: '\e309'
        right: 10px;
        top: 8px;
    }
</style>

<body>
    <div></div>
</body>
  • 第二种:遮罩效果的实现
<style>
    .box {
        position: relative;
        width: 444px;
        height: 320px;
        background-color: pink;
        margin: 50px auto;
    }
        
    .pic {
        width: 100%;
        height: 100%;
        background-color: green;
    }
    /* .mask {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
    } */
        
    .box::before {
        content: '';
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
    }
        
    .box:hover::before {
        display: block;
     }
 </style>

<body>
    <div class="box">
        <img src="" alt="" class="pic">
        <!-- <div class="mask"></div> -->
    </div>
</body>
  • 第三种:伪元素清除浮动

推荐阅读更多精彩内容