CSS三大特性

最新推荐文章于 2024-07-25 15:07:09 发布

weixin_47251857

最新推荐文章于 2024-07-25 15:07:09 发布

阅读量26

点赞数

分类专栏：笔记文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_47251857/article/details/118761798

版权

笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1. 层叠性
2. 继承性
3. 优先级*
层叠性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            color: blue;
            font-size: 12px;

        }
        div {
            color: pink;

        }
    </style>
</head>
<body>
    <!-- 就近原则 -->
    <div>
        你好，朋友
    </div>

</body>
</html>

继承性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS继承性</title>
    <!-- 子标签会继承父标签的某些样式，如文本颜色和字号，text-,font-,line-以及color属性 -->
    <style>
        body {
            /* 1.5即当前文字的1.5倍 */
            font: 12px/1.5 'Microsoft YaHei';
            color: blue;
        }
        div {
            /* 子元素继承了父元素body行高1.5,这个1.5就是当前元素文字大小font-size的1.5倍，所以当前div行高就是21像素 */
            font-size: 14px;
        }
        p {
            font-size: 16px;
        }
    </style>
    <!-- li没有手动指定文字大小，所以会继承父亲的文字大小 -->
</head>
<body>
    <div>孩子</div>
    <p>孙子</p>
    <ul>
        <li>我没有指定文字大小</li>
    </ul>
</body>
</html>

优先级

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优先级</title>
    <style>
        .test {
            color :red;
        }
        div {
            color: pink!important;
        }
        #demo {
            color: green;
        }
    </style>
</head>
<body>
    <div class="test" id="demo" >加油搞钱</div>
</body>
</html>

选择器的权重：
继承或者*（0,0，0,0）<元素选择器（0,0，0,1）<类选择器，伪类选择器（0,0，1,0）<ID选择器<行内样式style=""（1,0，0,0）*<!important（无穷大）
注意点：
权重有4组数字组成，但是不会有进位
类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推
等级判断从左向右，如果某一位数值相同，则判断下一位数值
可以简单记忆为通配符和继承权重为0，标签选择器为1，类（伪类选择器）为10，id选择器为100，行内样式表为1000，!important为无穷大
继承的权重是0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优先级</title>
    <style>
        /* 父亲id的权重是100 */
        #father {
            color: blue;
        }
        /* p继承的权重是0 */
        p {
            color: pink;
        }
        body {
            color: red;
        }
        /* a链接浏览器默认制定了一个样式蓝色有下标线 */
        a { 
            color: green; 
        } 
         /* 复合选择器的权重叠加问题 */
         /*权重叠加不会有进位*/
        li {
            color: red;
        }
       
        /* ul li 权重 0,0,0,1+0,0,0,1=0,0,0,2 */
        ul li {
            color: green;
        }
        /* .nav li 权重 0,0,1,0+0,0,0,1=0,0,1,1 */
        .nav li{
            color: pink;
        }
       
    </style>
</head>
<body>
   <div id="father">
       <p>小明</p>

   </div>
   <a href="#">我是单独的样式</a>
   <ul class="nav">
       <li>番茄</li>
       <li>苹果</li>
       <li>葡萄</li>
   </ul>
</body>
</html>

weixin_47251857

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS三大特性

1. 层叠性2. 继承性3. 优先级*层叠性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0
复制链接

扫一扫