当前位置：首页 > article >正文

CSS(二)——选择器

article 2025/1/27 12:04:13

1.基础选择器

（1）类选择器：用点（.）来查找，可以有多个属性值，用空格分开即可
注意：多个属性值是指定义class名字的时候可以定义多个属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
        .zs{
            color: brown;
            font-size: 25px;
        }
        .zs1{
            color: aqua;
            font-size: 25px;
        }
    </style>
</head>
<body>
    <p class="zs">周深的歌</p>
    <ol>
        <li class="zs zs1">《大鱼》</li>
        <li>《我的答案》</li>
        <li>《好风起》</li>
    </ol>
</body>
</html>

在这里插入图片描述
（2）唯一选择器（id选择器）：用#来查找

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
        .zs{
            background-color: brown;
            font-size: 25px;
        }
        .zs1{
            color: aqua;
            font-size: 25px;
        }
        #answer{
            color: red;
            font-size: 25px;
        }
    </style>
</head>
<body>
    <p class="zs">周深的歌</p>
    <ol>
        <li class="zs zs1">《大鱼》</li>
        <li id="answer">《我的答案》</li>
        <li>《好风起》</li>
    </ol>
</body>
</html>在这里插入代码片

在这里插入图片描述
（3）通配符选择器（*）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
        *{
            background-color: pink;
            color: blue;
            font-size: 45px;
        }
    </style>
</head>
<body>
    <p class="zs">周深的歌</p>
    <ol>
        <li class="zs zs1">《大鱼》</li>
        <li id="answer">《我的答案》</li>
        <li>《好风起》</li>
    </ol>
</body>
</html>

在这里插入图片描述
（4）tagName标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
        p{
            color: red;
            font-size: 40px;
        }
        li{
            color: aqua;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <p class="zs">周深的歌</p>
    <ol>
        <li class="zs zs1">《大鱼》</li>
        <li id="answer">《我的答案》</li>
        <li>《好风起》</li>
    </ol>
</body>
</html>

在这里插入图片描述

2.层级选择器

（1）组合选择器：多个选择器之间用逗号相隔，例如：选择器1，选择器2（如：ol,p）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
        p,li{
            color: red;
            font-size: 50px;
        }
    </style>
</head>
<body>
    <p>周深的歌</p>
    <ol>
        <li>《大鱼》</li>
        <li>《我的答案》</li>
        <li>《好风起》</li>
    </ol>
</body>
</html>

在这里插入图片描述
（2）包含选择器：选择器1 选择器2（选择器2被选择器1包含）用空格相隔

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
        div p{
            color: red;
            font-size: 40px;
        }
        ol li{
            color:aquamarine;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div>
         <p class="zs">周深的歌</p>
    </div>
   
    <ol>
        <li>《大鱼》</li>
        <li>《我的答案》</li>
        <li>《好风起》</li>
    </ol>
</body>
</html>

在这里插入图片描述
（3）子选择器：子选择器1>子选择器2（1是2的父亲），只有父子关系才可以

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
        div>p{
            color: red;
            font-size: 40px;
        }
        /* li相当于div孙子，所以不起作用；把div改为ol即可   */
        div>li{
            color:aquamarine;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div>
         <p class="zs">周深的歌</p>
    </div>
    <p>周深参加的综艺</p>
    <div>
        <ol>
            <li>《大鱼》</li>
            <li>《我的答案》</li>
            <li>《好风起》</li>
        </ol>
    </div>
    
</body>
</html>

在这里插入图片描述
（4）相邻选择器：选择器1+选择器2（两选择器要紧挨着）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
  
        div+p{
            color: red;
            font-size: 40px;
        }
        div+li{
            color:aquamarine;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div>
         <span>周深的歌</span>
    </div>
    <p>周深参加的综艺</p>
    <div>
        <ol>
            <li>《大鱼》</li>
            <li>《我的答案》</li>
            <li>《好风起》</li>
        </ol>
    </div>
    
</body>
</html>

在这里插入图片描述
（5）兄弟选择器：选择器1~选择器2（选择器1后面所有的兄弟选择器2，选择器之间是并列关系）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
       
        div~p{
            color: red;
            font-size: 40px;
        }
        ol~li{
            color:aquamarine;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div>
         <p>周深的歌</p>
         <!-- <span>周深</span> -->
    </div>
    <p>周深巡回演唱会</p>
    <div>---------------</div>
    <p>周深参加的综艺</p>
    <div>
        <ol>
            <li class="zs zs1">《大鱼》</li>
            <li id="answer">《我的答案》</li>
            <li>《好风起》</li>
        </ol>
    </div>
    
</body>
</html>

在这里插入图片描述

3.属性选择器

根据属性名或者属性值来查找某个元素
E（element 元素标签） ATT（attribute 属性） VAL（value值）
（1）标签[属性]
① E[ATT]匹配所有具有ATT属性的元素，不考虑属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
         [title]{
            color:aqua;
            font-size: 55px;
         }
    </style>
</head>
<body>
    <span>周深好歌分享：</span>
    <p title="This is me">《小美满》</p>
    <p title="This is sunshine">《光亮》</p>
    <p title="Floating light">《浮光》</p>
</body>
</html>

在这里插入图片描述
（2）E[ATT = VAL]匹配所有ATT属性等于VAL的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
         p[title = "Floating light"]{
            color:aqua;
            font-size: 55px;
         }
    </style>
</head>
<body>
    <span>周深好歌分享：</span>
    <p title="This is me">《小美满》</p>
    <p title="This is sunshine">《光亮》</p>
    <p title="Floating light">《浮光》</p>
</body>
</html>

在这里插入图片描述
（3）E[ATT ~= VAL ]匹配所有ATT属性具有多个空格分隔的值，其中一个值等于VAL的E元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
         p[title ~= "This"]{
            color:aqua;
           font-size: 55px;
         }
    </style>
</head>
<body>
    <span>周深好歌分享：</span>
    <p title="This is me">《小美满》</p>
    <p title="This is sunshine">《光亮》</p>
    <p title="Floating light">《浮光》</p>
</body>
</html>

在这里插入图片描述
（4）E[ATT |= VAL]匹配所有的ATT属性具有多个连接分隔符的值，其中一个值以val-开头的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
         p[title |= "great"]{
            color:aqua;
            font-size: 55px;
         }
    </style>
</head>
<body>
    <span>周深好歌分享：</span>
    <p title="This is me">《小美满》</p>
    <p title="This is sunshine">《光亮》</p>
    <p title="Floating light">《浮光》</p>
    <p title="great-life-mod">《好好生活就是美好生活》</p>
    <p title="great">《化身孤岛的鲸》</p>
</body>
</html>

在这里插入图片描述

（5）E[ATT ^= VAL]属性ATT的值以VAL开头的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
         p[title ^= "This"]{
            color:aqua;
            font-size: 55px;
         }
    </style>
</head>
<body>
    <span>周深好歌分享：</span>
    <p title="This is me">《小美满》</p>
    <p title="This is sunshine">《光亮》</p>
    <p title="Floating light">《浮光》</p>
    <p title="great-life-mod">《好好生活就是美好生活》</p>
    <p title="great">《化身孤岛的鲸》</p>
</body>
</html>

在这里插入图片描述
（6）E[ATT $= VAL]属性ATT的值以val结尾的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
         p[title $= "t"]{
            color:aqua;
            font-size: 55px;
         }
    </style>
</head>
<body>
    <span>周深好歌分享：</span>
    <p title="This is me">《小美满》</p>
    <p title="This is sunshine">《光亮》</p>
    <p title="Floating light">《浮光》</p>
    <p title="great-life-mod">《好好生活就是美好生活》</p>
    <p title="great">《化身孤岛的鲸》</p>
</body>
</html>

在这里插入图片描述
（7）E[ATT *= VAL]属性ATT的值中有val存在的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
         p[title *= "i"]{
            color:aqua;
            font-size: 55px;
         }
    </style>
</head>
<body>
    <span>周深好歌分享：</span>
    <p title="This is me">《小美满》</p>
    <p title="This is sunshine">《光亮》</p>
    <p title="Floating light">《浮光》</p>
    <p title="great-life-mod">《好好生活就是美好生活》</p>
    <p title="great">《化身孤岛的鲸》</p>
</body>
</html>

在这里插入图片描述

4.结构性伪类选择器

（1）伪元素选择器（不是对真正的元素选择）
① E：first-line（作用于元素的第一行）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
    /*  作用于p标签的第一行，尽管有多行  */
        p:first-line{
            color: red;
            font-size: 35px;
        }

    </style>
</head>
<body>
    <div>
        <p>《白月梵星》主演：<br>白鹿<br>敖瑞鹏</p>
        <span>《白月梵星》主演：</span>
        <span>白鹿</span>
        <span>敖瑞鹏</span>
    </div>

</body>
</html>

在这里插入图片描述
② E:first-letter(E的第一个字母)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
    /*  作用于p标签的第一个字  */
        p:first-letter{
            color: red;
            font-size: 35px;
        }

    </style>
</head>
<body>
    <div>
        <p>《白月梵星》主演：<br>白鹿<br>敖瑞鹏</p>
        <span>《白月梵星》主演：</span>
        <span>白鹿</span>
        <span>敖瑞鹏</span>
    </div>

</body>
</html>

在这里插入图片描述
③ E:before(该标签之前内容，需要配合content使用)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
    /*  作用于p标签之前定义的内容  */
        p:before{
            content: "好看的电视剧：";
            color: green;
            font-size: 50px;
        }

    </style>
</head>
<body>
    <div>
        <p>《白月梵星》主演：<br>白鹿<br>敖瑞鹏</p>
    </div>

</body>
</html>

在这里插入图片描述
④ E:after(与上面before用法类似)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
    /*  作用于p标签之后定义的内容  */
        p:before{
            content: "这是一部好看的电视剧！";
            color: green;
            font-size: 20px;
        }

    </style>
</head>
<body>
    <div>
        <p>《白月梵星》主演：<br>白鹿<br>敖瑞鹏<br></p>
    </div>

</body>
</html>

在这里插入图片描述

（2）4个基本的伪类选择器
① :root（将样式绑定到页面的根元素）针对一些变量去使用，可以直接在定义的地方进行修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
        :root{
        //定义变量
            --fontColor:red;
        }
        p{
            color:var(--fontColor)   //使用变量
        }

    </style>
</head>
<body>
    <p>选择器</p>
</body>
</html>

在这里插入图片描述

② E:not() (除去这个元素之外的)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
       li:not(.three){
            color:aqua;
            font-size:35px;
        }

    </style>
</head>
<body>
    <ol>
        <li class="one">床前明月光</li>
        <li class="two">疑是地上霜</li>
        <li class="three">举头望明月</li>
        <li class="four">低头思故乡</li>
    </ol>
</body>
</html>

在这里插入图片描述

③ E:empty（匹配所有为空的元素）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
       li:empty{
            background-color: pink;
        }

    </style>
</head>
<body>
   <ol>
        <li class="one">床前明月光</li>
        <li></li>
        <li class="two">疑是地上霜</li>
        <li></li>
        <li class="three">举头望明月</li>
        <li></li>
        <li class="four">低头思故乡</li>
    </ol>
</body>
</html>

在这里插入图片描述
④ :target （代表链接到目标）针对a标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
      a:target{
            font-weight: bold;
            color: green;
            font-size: 50px;
         }

    </style>
</head>
<body>
   <a href="#fish">周深的歌</a>
    <a href="#play">周深的综艺</a>
    <a id="fish">《大鱼》</a>
    <a id="play">《奔跑吧》</a>
</body>
</html>

在这里插入图片描述

5.其他结构伪类选择器

（1）E:first/last child（对一个父元素中的第一个/最后一个子元素E设置样式）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
        li:first-child{
            color:red;
            font-size:40px;
        }
        li:last-child{
            color:pink;
            font-size: 40px;
        }
    </style>
</head>
<body>
 
    <ol>
        <li class="one">床前明月光</li>
        
        <li class="two">疑是地上霜</li>
       
        <li class="three">举头望明月</li>
   
        <li class="four">低头思故乡</li>
    </ol>

</body>
</html>

在这里插入图片描述

（2）E:nth-child()/E:nth-last-child() 对指定元素进行设置样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
        li:nth-child(1){
            color:red;
            font-size:40px;
        }
        li:nth-last-child(2){
            color:pink;
            font-size: 50px;
        }
    </style>
</head>
<body>
 
    <ol>
        <li class="one">床前明月光</li>
        
        <li class="two">疑是地上霜</li>
       
        <li class="three">举头望明月</li>
   
        <li class="four">低头思故乡</li>
    </ol>

</body>
</html>

在这里插入图片描述

（3）E:nth-of-child()与E:nth-child()作用类似，但仅匹配使用的同种标签
E:nth-last-of-type()与E:nth-last-child()作用类似，但仅匹配使用的同种标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
        li:nth-child(1){
            color:red;
            font-size:40px;
        }
        /*匹配同标签，则第二行的p标签样式不会改变*/
        li:nth-of-type(2){
            color:blue;
            font-size:40px;
        }
        li:nth-last-child(2){
            color:pink;
            font-size: 40px;
        }
        li:nth-last-of-type(1){
            color:purple;
            font-size: 40px;
        }
    </style>
</head>
<body>
 
        <li class="one">床前明月光</li>
        <p>《静夜思》</p>
        <li class="two">疑是地上霜</li>
       <span>李白</span>
        <li class="three">举头望明月</li>
   
        <li class="four">低头思故乡</li>
    </ol>

</body>
</html>

在这里插入图片描述
（4）E:nth-child(an+b)
a:表示每次循环中间隔几个改变样式
b:表示指定循环中开始的位置
E:nth-of-type(an+b)类似

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
        li:nth-child(2n+1){
            color:red;
            font-size:40px;
        }
        li:nth-of-type(2n+2)
        {
            color:purple;
            font-size: 45px;
        }
    </style>
</head>
<body>
 
    <ol>
        <li class="one">床前明月光</li>
        
        <li class="two">疑是地上霜</li>
       
        <li class="three">举头望明月</li>
   
        <li class="four">低头思故乡</li>
    </ol>

</body>
</html>

在这里插入图片描述
(5)E:only-child 父亲只有一个孩子的，并且该孩子是E元素
E:only-of-type类似

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
        p:only-child{
            color:red;
         }
    </style>
</head>
<body>
 
   <div>
        <p>床前明月光</p>
    </div>
    <div>
        <p>疑是地上霜</p>
        <p>举头望明月</p>
        <p>低头思故乡</p>
    </div>

</body>
</html>