css选择器与权重问题——二、css的四种引入方式与复合选择器

最新推荐文章于 2024-03-02 20:19:18 发布

my__road

最新推荐文章于 2024-03-02 20:19:18 发布

阅读量231

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/my__road/article/details/107541750

版权

上一篇忘记写css的四种引入方法了，在这里补充出来。

css的四种引入方式

1、外联

<link rel="stylesheet" href="day4-1.css">

2、内联

<h1 style="color: blue">我是h1</h1>

3、内嵌

<style>
    h1{
        color: brown;
    }
</style>

4、导入

<style>
    @import "day4-1.css";
</style>

css的四种导入方法有优先级之分，我在这里就先只比较前三种导入方法了

内联对比外联

//这是内联的
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>
    <link rel="stylesheet" href="text.css">
</head>
<body>
   <h1 style="color: red">我是第一个h1标签</h1>
   <h1>我是第二个h1标签</h1>
</body>
</html>

//这是外联的样式
h1{
    color: rebeccapurple;
}

结果如下：
在这里插入图片描述
由此我们可以得出内联的优先级比外联高
2. 内联对比内嵌

这是内嵌的
 <style>
        h1{
            color: blue;
        }
    </style>

效果展示
在这里插入图片描述
对比的结果依旧是内联的优先级比较高
3. 外联与内嵌对比

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>
    <link rel="stylesheet" href="text.css">
    <style>
        h1{
            color: blue;
        }
    </style>
</head>
<body>
   <h1>我是第一个h1标签</h1>
   <h1>我是第二个h1标签</h1>
</body>
</html>

在这里插入图片描述

结果展示：
在这里插入图片描述
看到这里我们是不是就得出外联比内嵌优先级高的结论了？但是如果我们把他们的顺序换一换再来看看效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>
    
    <style>
        h1{
            color: blue;
        }
    </style>
    <link rel="stylesheet" href="text.css">
</head>
<body>
   <h1>我是第一个h1标签</h1>
   <h1>我是第二个h1标签</h1>
</body>
</html>

效果：
在这里插入图片描述
你看结果又变了，由此我们可以得出最终的结论这四种方法的优先级：内联的优先级是最高的，外联和内嵌是一样的他们会被执行顺序所影响

接下来就进入今天的正题复合选择器，这里就先只展示四种常见的选择器，更多的选择器我们下篇继续

复合选择器

后代选择器

后代选择器也称为包含选择器，以空格隔开。在CSS中，后代是根据HTML文档中的DOM上下文来决定的。当元素发生嵌套时，内层的元素就成为外层元素的后代。如元素B嵌在元素A内部，B就是A的后代。而且，B的后代也是A的后代，就像家族关系。
定义后代选择器时，外层的元素写在前面，内层的元素写在后面，中间用空格分隔。后代选择器会影响到它的各级后代，没有层级限制。
列子：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>

    <style>
        div p{
            color: red;
        }
    </style>
</head>
<body>
<div>
    <p>我是第一个p标签</p>
    <p>我是第二个p标签</p>
    <nav>
        <p>我是第三个p标签</p>
        <p>我是第四个p标签</p>
    </nav>
</div>
</body>
</html>

效果：
在这里插入图片描述

可以看到第二个span标签虽然是div标签的孙子代标签但是也是同样被选中了，这就是后代选择器，不论后面有多少代，只要是父元素的后代都会被选中。

子代选择器

子代选择器，见名知意，子代选择器选择的就是父元素的“儿子”。定义子代选择器时，父元素在前，子元素在后用“>”这个符号隔开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>

    <style>
        div>p{
            color: red;
        }
    </style>
</head>
<body>
<div>
    <p>我是第一个p标签</p>
    <p>我是第二个p标签</p>
    <nav>
        <p>我是第三个p标签</p>
        <p>我是第四个p标签</p>
    </nav>
</div>
</body>
</html>

效果
在这里插入图片描述
第三个第四个不再是div的子代而是他的孙子代，因此子代选择器并没有把他们选择出来

并集选择器

并集选择器由名字我们也可以知道是取元素的并集，并集什么意思相信大家都知道我就不多说了。定义并集选择器的时候，用逗号隔开。下面是例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>

    <style>
       
    </style>
</head>
<body>
<div>
    <h1>我是h1</h1>
    <h2>我是h2</h2>
    <h3>我是h3</h3>
    <h4>我是h4</h4>
</div>
</body>
</html>

这个时候我如果想把h1h2h3h4这四个元素都变成字号为12px，字体都为绿色的，如果我们不知道并集选择器的话，我们就会这样写：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>

    <style>
    h1{
        font-size: 12px;
        color: green;
    }
    h2{
        font-size: 12px;
        color: green;
    }
    h3{
        font-size: 12px;
        color: green;
    }
    h4{
        font-size: 12px;
        color: green;
    }
    </style>
</head>
<body>
<div>
    <h1>我是h1</h1>
    <h2>我是h2</h2>
    <h3>我是h3</h3>
    <h4>我是h4</h4>
</div>
</body>
</html>

但是我们可以发现除了标签不同外，其余的内容都是一样的。这样写就会造成我们代码的冗余，因此为了减少我们代码的冗余我们可以使用并集选择器，也就是这么写：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>

    <style>
    h1,h2,h3,h4{
        font-size: 12px;
        color: green;
    }
    </style>
</head>
<body>
<div>
    <h1>我是h1</h1>
    <h2>我是h2</h2>
    <h3>我是h3</h3>
    <h4>我是h4</h4>
</div>
</body>
</html>

他们两个的效果都是一样的：
在这里插入图片描述

交集选择器

终于来到我们今天的最后一个选择器了，交集选择器。顾名思义，取几个元素的交集。定义交集选择器元素之间什么都不加挨在一起。
列子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>

    <style>
        .purple{
            color: purple;
        }
    </style>
</head>
<body>
<div>
    <p>我是第一个p标签</p>
    <p class="purple">我是第二个p标签</p>
    <p>我是第三个p标签</p>
    <h2 class="purple">我是个h2标签</h2>
    <p>我是第五个p标签</p>
</div>
</body>
</html>

效果
在这里插入图片描述

我们可以看到这里如果我们只用类选择器来选择的话我们就会把第二个p标签和第四个h2标签都变成紫色，但是如果我们只想要第二个p标签变成紫色我们怎么办呢？当然我们也可以为它重新加个类，但是有没有不加类的办法呢？这就用到我们的交集选择器了


```bash
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>

    <style>
        p.purple{
            color: purple;
        }
    </style>
</head>
<body>
<div>
    <p>我是第一个p标签</p>
    <p class="purple">我是第二个p标签</p>
    <p>我是第三个p标签</p>
    <h2 class="purple">我是个h2标签</h2>
    <p>我是第五个p标签</p>
</div>
</body>
</html>

效果：
在这里插入图片描述
好嘞，今天的内容到此结束

my__road

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css选择器与权重问题——二、css的四种引入方式与复合选择器

上一篇忘记写css的四种引入方法了，在这里补充出来。css的四种引入方式1、外联<link rel="stylesheet" href="day4-1.css">2、内联<h1 style="color: blue">我是h1</h1>3、内嵌<style> h1{ color: brown; }</style>4、导入<style> @import "day4-1.cs
复制链接

扫一扫