前端入门03 -- CSS选择器

作者: YanZi_33 | 来源:发表于2022-09-27 09:18 被阅读0次

选择器

其主要作用在于选择目标标签；
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>

第三种：伪元素清除浮动；

前端入门03 -- CSS选择器

选择器

基础选择器

标签选择器

类选择器

ID选择器

通配符选择器

复合选择器

后代选择器

子选择器

并集选择器

相邻兄弟选择器

通用兄弟选择器

伪类选择器

CSS3新增的选择器

属性选择器

伪类选择器

先将所有子元素进行排序，然后再选择

先将指定类型子元素进行排序，然后再选择

伪元素选择器

伪元素选择器的使用场景

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读