选择器学习_选择器学习-CSDN博客

本文链接：https://blog.csdn.net/weixin_45607985/article/details/103656416

继续选择器的学习

前言：上一篇博客我说了关于CSS文本样式的一些操作，顺便也讲了关于标签选择器，里面包含了一点 id选择器和类选择器.
我们简单回顾一下：id和class的区别？

1:id相当于人的身份证不可以重复，但是class相当于人的名称可以重复的。

2：一个html标签只能绑定一个id标签，而一个html标签可以绑定多个class名称。

id选择器和class选择器的区别？

1：id选择器是以**#**开头的，而class是以 . 开头的。

在企业中到底是使用id选择器还是class选择器呢？
id一般是给js使用的，除非特殊情况，否则不要使用id去设置样式

今天我们继续选择器的学习，下面看一下后代选择器，要学习后代选择器，我们要了解什么是后代？
后代就是从你这条血脉延续下去的都是你的后代。
格式：

标签名称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">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选择器的学习</title>
    <style>
        div p{
            color: red;
        }
    </style>
</head>
<body>
    <p>我是段落1</p>
    <div>
        <p>我是段落2</p>
        <p>我是段落3</p>
        <ul>
            <li>
                <p>我是段落4</p>
            </li>
        </ul>
    </div>
    <p>我是段落5</p>
</body>
</html>

下面是效果：
在这里插入图片描述 注意点：1：后代选择器必须用空格隔开
2：后代不仅仅是儿子，也包括孙子/重孙子，只要是最终放到指定标签中的都是后代。
3：后代选择器不仅仅可以使用标签名称，而且还可以使用id名称和类名称。

以上面为例，如果我们只想要我是段落4变红的话，那么我们该怎么操作呢？
我们可以借助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>
        .cs .ss{
            color: red;
        }

    </style>
</head>
<body>
    <p>我是段落1</p>
    <div class="cs">
        <p>我是段落2</p>
        <p>我是段落3</p>
        <ul>
            <li>
                <p class="ss">我是段落4</p>
            </li>
        </ul>
    </div>
    <p class=>我是段落5</p>
</body>
</html>

下面是效果：
在这里插入图片描述
这是使用了类名称来实现，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>选择器的学习</title>
    <style>
        div ul li p{
            color: blue;
        }

    </style>
</head>
<body>
    <p>我是段落1</p>
    <div class="cs">
        <p>我是段落2</p>
        <p>我是段落3</p>
        <ul>
            <li>
                <p class="ss">我是段落4</p>
            </li>
        </ul>
    </div>
    <p class=>我是段落5</p>
</body>
</html>

下面是效果：
在这里插入图片描述下面说一下子元素选择器
子元素选择器就是找到指定标签中所有特定的直接子元素，然后设置属性。
格式：

标签名称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">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>选择器的学习</title>
    <style>
        div ul li p{
            color: blue;
        }
        div>p{
            color: red;
        }

    </style>
</head>
<body>
    <p>我是段落1</p>
    <div class="cs">
        <p>我是段落2</p>
        <p>我是段落3</p>
        <ul>
            <li>
                <p class="ss">我是段落4</p>
            </li>
        </ul>
    </div>
    <p class=>我是段落5</p>
</body>
</html>

下面是效果：
在这里插入图片描述 子元素选择器的注意点:
1: 子元素选择器只会查找儿子，不会查找其他被嵌套的标签
2：子元素选择器之间需要用>符号链接，并且不能有空格
3：子元素选择器不仅仅可以使用标签名称，还可以使用其他选择器，刚后代选择器已经演示过了，这里就不演示了。

下面说一下后代选择器和子元素选择器的区别和以后如何选择去使用？
不同点：
1：后代选择器使用空格作为连接符号
子元素选择器使用>作为连接符号
2：后代选择器会选中指定标签中，所有的特定后代标签，也就是会选中儿子/孙子…只要是被放到指定标签中的特定标签都会被选中
子元素选择器只会选中指定标签中，所有的特定的直接标签，也就是只会选中特定的儿子标签。
相同点：
1;后代选择器和子元素选择器都可以使用标签名称/id名称/class名称来作为选择器
2：后代选择器和子元素选择器都可以通过各自的连接符号一直延续下去
如何选择？
如果想选中指定标签中的所有特定的标签，那么就使用后代选择器，如果只想选中指定标签中的所有特定儿子标签，那么就使用子元素选择器。

好的，今天就说到这里，下一次还是继续选择器的学习，，哈哈哈，枯燥并快乐着。