css选择器-CSDN博客

<!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>选择器</title>
    <style type="text/css">
      #one{
         color: red;
      }
      .two{
           color: blue;
      }
      h2{
        color: aqua;
      }
      *{
            color: bisque;
      }
      
    </style>
</head>
<body>
    <h1 id="one" >这是id选择器</h1>
    <h1 class="two">这是类选择器</h1>
    <h1>这是通用选择器</h1>
    <h2>这是标签选择器</h2>
</body>
</html>

运行结果如下：

注意：id属性是唯一的，class不唯一。

它们的优先级是：id选择器>类选择器>标签选择器>通用选择器

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 type="text/css">
      div.list>ul{
        border: 1px solid red;
     }
       .list li{
        border: 1px solid blue;
       }
   .one,.two,#first{
        color: aqua;
        width: 100px;
        height: 100px;
        background-color: brown;
        border: 1px solid green;
   }

    </style>
     
</head>
<body>
    <div class="one">我用的是分组选择</div>
    <p id="first">我用的是分组选择</p>
    <div class="list">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
    </div>
</body>
</html>

运行结果如下：

1.3 属性选择器

顾名思义通过属性进行选择在此介绍以下几种：

（1）选择选中的额标签中存在的某个属性标签[属性]

（2）确切的等于某个值 [type="值"]

（3）属性值以某个值开头 [[type ^="值"]

（4）属性值以某个值结尾 [type $="值"

(5) +表示下一个标签* +标签名

(6)属性等于某个属性值 [title="值"]

代码如下：

<!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>选择器</title>
    <style type="text/css">
        /**/
        div[title]{
            border:1px solid red;
        }
        /*确切的等于某个值*/
         input[type="text"]{
            background:red;
        }
        /*属性值以某个开头值*/
        input[type ^="e"]{
            background:blue;
        }
        /*属性包含某个值*/
        input[type *="e"]{
            background:gold;
        }
        /*属性以某个值结尾*/
        input[type $="rl"]{
            background:red;
        }
        /*+表示下一个标签*/
        .msg +p{
            background:red;
        }
        /*属性值等于某个属性值*/
        [title="这是一个标题"]
        {
            color: aqua;
        }
    </style>
</head>
<body>
    <div class="container">这是一个dic容器</div>
    <div title="这是一个标题">这是第二个div</div>
    <input type="text" name="" id="" value="">
    <input type="emali" name="" id="" value="">
    <input type="url" name="" id="" value="">
    <div class="msg">我喜欢打游戏</div>
    <p id="msg1">这是一个段落</p>
</body>
</html>

1.4 伪类选择器

同一个标签，根据不同的状态，有不同的样式，这就叫做伪类，比如点击前，点击后，鼠标移到上面等等。通过:进行设置不同的样式（实现伪类选择器）

:link ------ 链接点击之前

:visited ----- 链接点击之后

:hover ------"悬停"

:active ------"激活" 鼠标点击的时候但是不松手

代码如下：

<!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 type="texr/css">
           a:link{
              color: red;
           }
           a:visited{
              color: blueviolet;
           }
           a:hover{
              color:blue;
           }
           a:active{
              color:pink;
           }
    </style>
</head>
<body>
    <a href="https://www.baidu.com/">点我</a>
</body>
</html>

运行结果如下：

1.5 伪元素选择器

可以理解为选择一个标签对其前后加东西通过atfer，before实现。

:before

:after ------ CSS2

::before

::after

代码如下：

<!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 type="text/css">
          p::before{
             content:"张三";
             color: red;
          }
          p::after{
             content:"李四";
             color:blue;
          }
    </style>
</head>
<body>
    <p>我的前面加张三后面加李四</p>
</body>
</html>

运行结果如下：