CSS核心语法和使用（上）

最新推荐文章于 2023-01-24 17:05:59 发布

iheyu

最新推荐文章于 2023-01-24 17:05:59 发布

阅读量112

点赞数

分类专栏： html 文章标签：优先原则同一类型的选择器不同类型的选择器先外部样式在内部样式

本文链接：https://blog.csdn.net/iheyu/article/details/102496142

版权

html 专栏收录该内容

54 篇文章 2 订阅

订阅专栏

CSS有两个重要原则：

1.优先原则：——>后解析的内容——>会覆盖掉之前解析的内容

2.继承原则：——>嵌套里面的标签——>还拥有外在标签某样式——>子元素可以继承父元素某些属性

一.什么是优先原则：

优先原则：-》选择器

1.同一个选择器文件执行：从上往下执行，（上面的先执行，下面的后执行，后执行性会覆盖掉先执行）

<!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">
    <link rel="stylesheet" href="1.css">
    <title>css生效得原理</title>
</head>
<body>
    <div>div1</div>
</body>
</html>

div 
{
    color: red; 
    <!--字体先执行是红色-->
    color:green;
    <!--后来字体又执行，在执行时变成绿色-->
}

2.同一类型的选择器：从上往下

html文件里的代码不变：

div 
{
    background-color: red; 
    <!--背景颜色先执行红色的-->
}
div{
    background-color:green;
    <!--背景颜色先执行红色的、在执行绿色的-->
    <!--下面在执行绿色背景颜色时，把前面先执行的红色背景覆盖掉了-->
}

html文件里的代码
<!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">
    <link rel="stylesheet" href="1.css">
    <title>css生效得原理</title>
</head>
<body>
    <div class="bg2 bg1">div1</div>
</body>
</html>

.bg1 {
    background-color: yellow;
}
.bg2 {
    background-color: blue;
}
div1背景颜色为blue(蓝色)；

3.不同类型的选择器：选择器的优先级——>决定优先次序；

先解析低优先级选择器——>在解析高优先级的选择器；

目前我们学过的选择器中——>*——>div ——>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">
    <link rel="stylesheet" href="1.css">
    <title>css生效得原理</title>
</head>
<body>
    <div class="bg1">div1</div>
</body>
</html>

.bg1 {
    background-color: green;
}
div {
    background-color: red;
}

***div的背景颜色时绿色、而不是红色，不同类型的选择器，是按着选择器的优先级次序进行执行——不是按着从上到下的顺序来执行的！

四. 外部样式、内部样式，合并之后一起解析的顺序：

先外部样式——>在内部样式

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">
    <link rel="stylesheet" href="1.css">
    <title>css生效得原理</title>
   <style>
      div {
          background-color: red;
      }
      
   </style>
</head>
<body>
    <div class="bg1">div1</div>
</body>
</html>

div {
    background-color: green;
    font-size: 30px;
}

***字体颜色是红色的，大小是30；

iheyu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录