css 正确认识和使用选择器

css中选择器分为很多个我们该如何正确使用呢？

首先，我们要了解css中都有哪些选择器：标签选择器、class选择器、id选择器、子代选择器、后代选择器、交集选择器、并集选择器......我们在写代码中该如何正确使用这些选择器呢？

1.标签选择器

这是一个很简单的选择器给大家写个列子

这段代码中 div 就是属于一个标签选择器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>标签选择器</title>
    <style>
    
    div{ width: 100px;
        height: 50px;
        background: #f00;
        color: #fff;;
        margin: 100px auto;}
    </style>

</head>
<body>
    
    <div>
        标签选择器
    </div>
</body>
</html>

2.class选择器：是指定类的所有元素的样式。

a 指定的元素是 div 。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>class选择器</title>
    <style>
    .a{ width: 300px;
      height: 200px;
      background: black;
       color: white;}
    
    </style>
</head>
<body>
    <div class="a">
        class选择器
    </div>
    
</body>
</html>

3.id选择器：指定具有ID的元素的样式，是指定的具有id样式的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>id选择器</title>
    <style>
        #a{ width: 1000px;
          height: 300px;
          background:rosybrown;
          color: white;}
    
    </style>
</head>
<body>
    <div id="a">
        id选择器
    </div>
    
</body>
</html>

4.子代选择器：只能选择某元素子元素的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>子代选择器</title>
    <style>
    div>span{
           background:black;
           color: white;
                   }
    </style>
</head>
<body>
    <div>
        <span>子代选择器</span>
    </div>
    <div>
        <p>子代<span>选择器</span></p>
    </div>
</body>
</html>

子元素选择了是用来大>（子结合符）号，子结合符左右是允许有空白的

所以: div > span； div>span； div > span;这些写法都是可行的，不过为了美观，我们一般不留空格的。

5.后代选择器：又称为包含选择器，后代选择器可以选择作为某元素后代的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>后代选择器</title>
    <style>
        div span{display: block;
             width: 300px;
                height: 50px;
                background: black;
                color: white;}
    </style>
</head>
<body>
    <div>
       <span>后代选择器</span>
    </div>
    <div>
        <span>其它元素的后代</span>
    </div>
</body>
</html>

ps：子代选择器和后代选择器；

不同点： 1.后代选择器利用空格作为连接符号,子元素选择器利用>符号作为链接符号

2.后代选择器指定的标签中,所有特定的后代标签,不管是儿子还是孙子... 都会被选中而子元素选择器指定的标签中,

所有特定的直接后代标签,不包括孙子以后的标签,只会将直接后代选中

共同点： 1.都可以使用id,class,标签选择器名称作为选择器

2.都可以在使用空格或>连接符号无限的连接下去

例如:选择器1 选择器2 选择器3 ...{}

选择器1>选择器2>选择器3>...{}

6.交集选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>交集选择器</title>
    <style>
    span.logo {

        }
    </style>
</head>
<body>
    <div class="div" id="div">
        <div>
            <span class="logo"></span>
        </div>
        <span></span>
    </div>
</body>
</html>

7.并集选择器；同等级元素用逗号隔开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>并集选择器</title>
    <style>
     .a,.b{ width: 100px;
             height: 50px;
             background: black;
             color: white;}
    </style>
</head>
<body>
    <div class="a">并集选择器
    </div>
    <div class="b">这是一个并集选择器</div>
    
</body>
</html>

8.属性选择器：指为拥有指定元素的HTML元素设置样式，而不仅限于class和id

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>属性选择器</title>
    <style>
    input[type="text"] { outline: none   }
    
    </style>
</head>
<body>
    <div class="a">
        <span></span>
    </div>
    <input type="text">
</body>
</html>

css 正确认识和使用选择器

猜你喜欢