前端入门03 -- CSS选择器

2022-09-27  本文已影响0人  YanZi_33

选择器

基础选择器
标签选择器
<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>
类选择器
 <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选择器
<style>
    #pink {
        color: pink;
    }
</style>

<body>
    <div id="pink">刘德华</div>
</body>
通配符选择器
<style>
    * {
       color: red;
     }
</style>

<body>
    <div id="pink">刘德华</div>
    <span>我的</span>
    <ul>
        <li>还是我的</li>
    </ul>
</body>
image.png
复合选择器
后代选择器
<!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>
子选择器
<!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>
并集选择器
<!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>
相邻兄弟选择器
通用兄弟选择器
伪类选择器
<!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>

<!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新增的选择器

属性选择器
<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>
伪类选择器
先将所有子元素进行排序，然后再选择
先将指定类型子元素进行排序，然后再选择
<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>
伪元素选择器
image.png 
<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>
上一篇 下一篇

猜你喜欢

热点阅读