什么是选择器？选择器都有什么种类？

时间：2021-01-17 19:38:55 阅读：30 评论：0 收藏：0 [点我收藏+]

首先我们要理解什么是选择器？选择器是用来做什么的？我们都知道html它是超文本标记语言，是没有样式的，我们要给html添加样式就要用到css，但是我们怎样去知道要给哪一个元素添加样式呢？这个时候就需要有选择器来去选择需要添加样式的标签、元素等等，这也使得选择器分成了不同的类。

1.标签选择器：通过标签名选择一类元素（标签选择器的结构：标签名{css语句}）

例：div{}、span{}、p{}

<!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>Document</title>
    <style>
        div{
            width: 500px;
            height: 500px;
            background-color: salmon;
            border: 1px solid black;
            text-align: center;
        }
        p{
            font-style: italic;
        }
        span{
            font-size: 60px;
        }
    </style>
</head>
<body>
    <div>
        hello world! <br>
        <p>hello  world!<span>你好呀世界！</span></p>
    </div>
</body>
</html>

2.id选择器：通过id属性选择一个元素（id选择器的结构：#id属性名{css语句}）

#one （id=one）

<!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>Document</title>
    <style>
        #div{
            width: 500px;
            height: 500px;
            background-color: salmon;
            border: 1px solid black;
            text-align: center;
        }
        #p{
            font-size: 60px;
        }
    </style>
</head>
<body>
    <div id="div">
        hello world! <br>
        <p id="p">hello  world!<span id="p">你好呀世界！</span></p>
    </div>
</body>
</html>

3.类选择器：通过class属性选择一类元素（类选择器的结构：.class属性名{css语句}）

.one （class=‘one‘）

<!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>Document</title>
    <style>
        *{
            background-color: lawngreen;
        }
        .one{
            background-color: seagreen;
            font-style: italic;
        }
        .two{
            background-color: slateblue;
            font-size: 70px;
        }
    </style>
</head>
<body>
    <ul class="one">
        <li>aaaaaaaaaa</li>
        <li>bbbbbbbbbb</li>
        <li>cccccccccc</li>
    </ul>
    <ul class="two">
        xixixi
        <li>rrrr</li>
        <li>tttt</li>
        <li>yyyy</li>
    </ul>
    <ul class="one">
        <li>qqqqqqq</li>
        <li>wwwwwww</li>
        <li>bbbbbbb</li>
    </ul>
</body>
</html>

4.普遍选择器：所有元素都会被选中（结构：*{}）

*所有

选中所有一般不会使用，而且选中所有后，若其后还有其他样式将会把它覆盖（就近原则）

（上例中有该用法）

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>Document</title>
    <style>
        table tr{
            background-color: lawngreen;
        }
        div>p{
            background-color: mediumblue;
        }/*改变了所有的<p>而且<p>中的<span>也改变了*/
        div>span{
            background-color: lightpink;
        }/*没有改变<p>里面的<span>改变了<p>外面的<span>  选择的是直接子元素*/
    </style>
</head>
<body>
    <table>
        <div>

            hello <br>
            <p>world  <br>
                <span>喜喜</span>
            </p>
            <p>看看你改变不改变</p>
            <span> 那你呢</span>
        </div>
        <tr>
            <td>dsvfv</td>
            <td>fdsfd</td>
            <td>fdsvd</td>
            <td>sfdsd</td>
        </tr>
        <tr>
            <td>你好</td>
            <td>谢谢</td>
            <td>再见</td>
            <td>抱歉</td>
        </tr>
    </table>

    
</body>
</html>

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>Document</title>
    <style>
        div{
            border: 1px solid red;
        }
        
        div~p{
            border:2px solid green;
        }
        div+p{
            border:1px solid black;
        }
    </style>
</head>
<body>
    <div id="obn">
        <p>hhhhhhhhhhhhhh <span>123</span></p>
        <p>xixixixiixiixiixi</p>
    </div>
    <p>fsgrv;dhajoewdisdkjfocidsjvoiefhkd</p>
    <p>覅绿化我是我欸的女警</p>
</body>
</html>

7.组合选择器(实际开发中不要嵌套太多)

div #one.one

div#one

div.one

<!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>Document</title>
    <style>
        div #one.one{
            background-color: blue;
            font-size: 70px;
        }
    </style>
</head>
<body>
     <table>
        <div>
            hello <br>
            <p id="one" class="one">world  <br>
                <p class="one">svrvsrv</p>
            </p>
            <p id="one" class="two">看看你改变不改变</p>
            <span> 那你呢</span>
        </div>
    </table>
</body>
</html>

8.多选择器（元素、类、属性等等组合在一起选择）

div,p,#one{}

<!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>Document</title>
    <style>
        div,#ds,.o{
            background-color: blue;
        }
    </style>
</head>
<body>
    <table>
        <div>

            hello <br>
            <p>world  <br>
                <span>喜喜</span>
            </p>
            <p>看看你改变不改变</p>
            <span> 那你呢</span>
        </div>
        <tr>
            <td id="ds">dsvfv</td>
            <td>fdsfd</td>
            <td>fdsvd</td>
            <td>sfdsd</td>
        </tr>
        <tr>
            <td class="o">你好</td>
            <td>谢谢</td>
            <td>再见</td>
            <td class="o">抱歉</td>
        </tr>
    </table>

</body>
</html>

9.属性选择器：根据元素的属性选择一类元素

[id]:具有id属性的

[id=‘one‘]:id属性为one的

[class~=‘one‘] //英文波浪线

具有class属性并且属性值之一等于one

[class^=‘one‘]

具有class属性并且属性值以one开头

[class$=‘one‘]

具有class属性并且属性值以one结尾

[class*=‘one‘]

具有class属性并且属性值中包含one

<!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>Document</title>
    <style>
        [id]{
            background-color: blue;
        }
        [class=‘o‘]{
            background-color: red;
        }
        [class*=‘o‘]{
            background-color: yellow;
        }
        [class~=‘o‘]{
            background-color: brown;
        }
    </style>
</head>
<body>
    <table>
        <div>
            hello <br>
            <p>world  <br>
                <span>喜喜</span>
            </p>
            <p>看看你改变不改变</p>
            <span> 那你呢</span>
        </div>
        <tr>
            <td id="ds">dsvfv</td>
            <td class="pq d o">fdsfd</td>
            <td>fdsvd</td>
            <td>sfdsd</td>
        </tr>
        <tr>
            <td class="o">你好</td>
            <td class="pqo">谢谢</td>
            <td>再见</td>
            <td class="o">抱歉</td>
        </tr>
    </table>

</body>
</html>

伪类选择器：（结构：伪类名称{}）像类一样，但是是浏览器规定的一些种类元素

:firt-child

:last-child

:nth-child(num/odd/even)

(以上三个较其他比较常用)

:first-of-type

:last-of-type

元素状态相关的伪类选择器

:link 未被访问的状态

:visited 已访问过的状态

:hover 鼠标悬停的状态

:active 活动的状态（鼠标按下的状态）

（以上4个常用）

：focus 聚焦的状态

：checked 用户选中的单选按钮或者多选按钮

：default 默认选中的单选按钮或者多选按钮

：enabled 、：disabled 可用的表单控件、禁用的表单控件

：valid 、：invalid 验证通过的、不验证通过的

：required 、：optional 必填的和选填的

:in-range 、 :out-of-range 在范围内的、不在范围内的

伪元素选择器（结构：：伪元素名称）

：：first-letter 第一个元素

：：first-line 第一行