css详解1

 

1、css的三种引入方式:

1.1、行内引入

<div style="color:red;">魔降风云变</div>

 

<html>
<head>
    <meta charset="UTF-8"></head>
<body>
    <div style="color:red;">魔降风云变</div>
</body>
</html>

用的是行内的

<html>
<head>
    <meta charset="UTF-8"></head>
    <style>
        #box{
            color:gold;
        }
    </style>
<body>
    <div id="box" style="color:red;">魔降风云变</div>
</body>
</html>

没有找到它的样式

1.2内嵌式:

head中写    
<style>
        #box{
            background-color: gold;
        }
    </style>
<head>
    <meta charset="UTF-8"></head>
    <style>
        #box{
            background-color: gold;
        }
    </style>
<body>
    <div id="box" style="color:red;">魔降风云变</div>
</body>

换了就有了,不能覆盖,优先级没它高

 

1.3外接式:

外接式是定义在head标签中,并且不在style中。

<link href="css/index.css" rel="stylesheet" >

 

 index.css文件

#box{
    background-color: black;
}
<html>
<head>
    <meta charset="UTF-8"></head>
    <style>
        #box{
            background-color: gold;
        }
    </style>
    <link rel="stylesheet" href="css/index.css">
<body>
    <div id="box" style="color:red;">魔降风云变</div>
</body>
</html>

1.4、三种样式的优先级

行内样式>内嵌式和外接式
内嵌式和外接要看谁在后面,在后面的优先级高,会覆盖前面的。

 

2、基础选择器

2.1、id选择器

唯一的

#xxx

 id选择器就是在标签里面加个id,可以和class同名  #id名字{css}

<html>
<head>
    <meta charset="UTF-8"></head>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        .active{
            border-radius: 4px;
        }
        #box{
            color:blue;
        }
    </style>

<body>
    <div class="box active" id="box">小马过河</div>
    <hr>
    <div class="box"></div>
    <hr>
    <div class="box"></div>
</body>
</html>

 

2.2、类选择器

可以重复,归类,类也可以设置多个

.xxx
<html>
<head>
    <meta charset="UTF-8"></head>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        .active{
            border-radius: 200px;
        }
    </style>

<body>
    <div class="box active"></div>
    <div class="box"></div>
    <hr>
    <div class="box"></div>
</body>
</html>

border-radius边框圆角,似乎当边框圆角和正方形div的宽高一致的时候就会成圆形
        .active{
            border-radius: 40px; #将200改为40
        }

 2.3标签选择器

标签{css}
div{} p{}

 作用于多个相同标签

<html>
<head>
    <meta charset="UTF-8"></head>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        .active{
            border-radius: 4px;
        }
        #box{
            color:blue;
        }
        div{
            border: 1px solid #000;
        }
    </style>

<body>
    <div class="box active" id="box">小马过河</div>
    <hr>
    <div class="box"></div>
    <hr>
    <div class="box"></div>
</body>
</html>

 

使用场景一(a标签):

取消所有a标签的默认下划线

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        a{
            text-decoration: none;
        }
    </style>
</head>
<body>
    <a href="www.baidu.com">百度</a>
    <a href="www.baidu.com">百度</a>
    <a href="www.baidu.com">百度</a>
    <a href="www.baidu.com">百度</a>
    <a href="www.baidu.com">百度</a>
</body>
</html>

 

使用场景二(重新设置边框):

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    用户名:<input type="text">
</body>
</html>

添加标签选择器,取消边框

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        input{
            border: none;
        }
    </style>
</head>
<body>
    用户名:<input type="text">
</body>
</html>

鼠标放到那个位置点击一下,又出现蓝色框,这个被叫做外线:

去掉外线,这样默认的线都没了,可以重新设置边框:

        input{
            border: none;
            outline: none;
        }

重新设置边框:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        input{
            border: none;
            outline: none;
        }
        #mcw{
            border:9px solid #0000cc ;
        }
    </style>
</head>
<body>
    用户名:<input id="mcw" type="text">
</body>
</html>

 

        #mcw{
            border:9px solid #0000cc ;
            height: 60px;
        }

给边框加个高度,字体的高度还是没有变化   

 将字体设置大点:

        #mcw{
            border:9px solid #0000cc ;
            height: 60px;
            font-size: 30px;
        }

 和别人的框比起来,别人的框文字在左右不能到边,下面设置一下

        #mcw{
            border:9px solid #0000cc ;
            height: 60px;
            font-size: 30px;
            padding: 0 100px; #第一个表示上下,第二个表示左右,内部填充,边框长度也加了,
        }

 

3、盒模型

3.1、

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #box{
            width: 200px;
            height:200px;
            background-color: red;
    </style>
</head>
<body>
    <div id="box" class="box" >魔降风云变</div>
</body>
</html>

盒模型200*200

3.2、pading设置一个值,上下左右。

<style>
#box{
width: 200px;
height:200px;
background-color: red;
padding: 50px;
}
</style>

pading设置上下左右各50px内边距,一个值。盒子大小变成300*300

如果我在div中加些字,如果不设置pading。默认内部子元素都在左上角开始显示,。所以通过pading可以调整内部子元素的位置。一个元素也叫一个标签。

再添加一个边界  border    ,盒子加锁边框大小变成了308*308

    <style>
        #box{
            width: 200px;
            height:200px;
            background-color: red;
            padding: 50px;
            border: 4px solid #000;
            }
    </style>

如果我想保持盒子大小,那么我要调整pading,border,和盒子高度宽度的大小。

302*302

        #box{
            width: 200px;
            height:200px;
            background-color: red;
            padding: 50px;
            border: 1px solid #000;
            }

3.3pading两个值,表示上下和左右

        #box{
            width: 200px;
            height:200px;
            background-color: red;
            padding: 0 20px; #上下0,左右20.0px可以省略px
            border: 1px solid #000;
            }

3.4、pading三个值,表示上 左右 下

        #box{
            width: 200px;
            height:200px;
            background-color: red;
            padding: 0 20px 30px; /* 0上  20左右  30下
            border: 1px solid #000;
            }

 3.5、pading四个值,表示 上 右  下 左 ,

        #box{
            width: 200px;
            height:200px;
            background-color: red;
            padding: 10px 20px 30px 40px;  /*上 右  下 左  顺时针*/
            border: 1px solid #000;
            }

3.6、pading单独设置一个方向 

        #box{
            width: 200px;
            height:200px;
            background-color: red;
            padding-top: 20px;
            border: 1px solid #000;
            }

单独设置pading-top ,文字在盒子里往下挤了。单独左边增加,文字往右走;  此外还有其他

pading

pading-top

pading-bottom

pading-left

pading-right

3.7盒子设置magin

        #box{
            width: 200px;
            height:200px;
            background-color: red;
            padding-top: 20px;
            margin-left: 30px;
            border: 1px solid #000;
            }

 左边加个30的margin,盒子边框整体右移。

盒子body本身还有8px的大小

 

4、标签嵌套关系

4.1标签的嵌套关系之块级标签

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .box{
            width: 200px;
            height:200px;
            background-color: yellow;
            }
    </style>
</head>
<body>
    <div class="box" ></div>
</body>
</html>

块级标签特点:独占一行,可以设置宽高,如果不设置宽,默认是父标签的100%宽度。

块级标签属性:display

p标签的使用这个样式,p标签上下还有16的margin。

 

body 上下左右浏览器默认设置8px的margin

块级标签,比如div。块级标签display的属性值默认是block,浏览器内置的,默认给div设置的。

块级标签可以将display修改掉,将它修改为inline。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .box{
            width: 200px;
            height:200px;
            background-color: yellow;
            display: inline;
            }
    </style>
</head>
<body>
    <div class="box" ></div>
    <p class="box"></p>
</body>
</html>

没有显示东西:

因为么有添加内容呢

<body>
    <div class="box" >魔降风云变</div>
    <p class="box">小马过河</p>
</body>

就像将它们变成了span标签一样,不好使

4.2、标签的嵌套关系之行内标签

行内标签特点:1、在一行内显示 2、不可以设置宽高,如果不设置宽高,默认是字体大小 

 

    <style>
        .box{
            width: 200px;
            height:200px;
            background-color: yellow;
            display: inline;
            }
    </style>
</head>
<body>
    <div class="box" >魔降风云变</div>
    <p class="box">小马过河</p>
    <a href="www.baidu.com">百度一下</a>
    <span>小郭吹雪</span>
</body>

如果div标签,p标签都和 a标签和span标签都在一行内显示,证明块标签转行内标签是没有问题的。这里块转行内标签了。块转行内用的不多,但是行内转块用的比较多。

如果我给行内标签加个宽度和高度,没有生效的。

    <style>
        a{
            width: 100px;
            height: 40px;
            background-color: red;
        }
    </style>
</head>
<body>
    <a href="www.baidu.com">百度一下</a>
    <span>小郭吹雪</span>
</body>

行内标签不能设置宽高

如果我想要设置行内标签的宽度和高度,那么把行内标签改成块标签

        a{
            width: 100px;
            height: 40px;
            background-color: red;
            display: block;
        }

再给a标签设置一下

        a{
            width: 100px;
            height: 40px;
            background-color: red;
            display: block;  /*显示方式 block 显示块  inline 显示行内  inline-block 行内块*/
            text-align: center; /*水平文本排列方式 :左中右显示*/
            line-height: 40px; /*行高:一行的高度。当行高=盒子模型高度的时候,实现垂直居中*/
            text-decoration: none; /*文本修饰: none 无修饰  underline 下划线  line-through 有点像删除线 */
            color: #333333;
        }

给a标签水平居中,垂直居中,去下划线,设置颜色

修改一下测试text-decoration: line-through; 有点像删除线

放大点看

用标签del实现删除线效果:

<body>
    <!--<div class="box" >魔降风云变</div>-->
    <!--<p class="box">小马过河</p>-->
    <a href="www.baidu.com">百度一下</a>
    <del>小马过河</del>
    <span >小郭吹雪</span>
</body>

4.3行内标签之行内块标签

 行内块标签特点:1、在一行内显示 2、可以设置宽高

<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <span >小郭吹雪</span>
    <input type="text">
    <input type="text">
</body>
</html>

        input{
            width: 40px;
            height: 60px;
        }
    </style>

给input添加宽和高之后,也可以变高,变宽,因为它是行内块,这样看来行内块也是可以设置宽度和高度的。

 

行内块使用演示
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <span id="s1">小郭吹雪</span>
    <span id="s2">小马过河</span>
</body>
</html>

两个行内标签span结果:

    </style>        
   #s1{height: 40px;display: block;background-color: #d33333;}
</style>    

如上设置为块则会换行

 

如果设置为行内块则同行显示。当同行中某部分要设置宽度、高度且不换行的时候可以设置为行内块

 #s1{height: 40px;display: inline-block;background-color: #d33333;}

#s1{width: 60px;height: 40px;display: inline-block;background-color: #d33333;}

当再添加宽度的时候,宽度不够,这个是换行了吗?但是其它内容还是跟它在同行,

 问题:行内标签能包裹一个块么?比如  a标签不能设置宽高,包一个块标签能撑起来么?是撑不起来的。行内标签不能放块,有个别例外的。也可以把块变成行内块,行内块是放到行内的。块里面可以包行内。div里面可以包div,可以包a标签。a里面可以包image,因为image是行内块,是行内的,可以先把a标签转成块的。

比如如下栗子:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #tu{
            width: 200px;
            height: 100px;
        }
    </style>
</head>
<body>
    <a href="">
    <img src="dongwu.jpg" alt="" id="tu">
    </a>
</body>
</html>

行内标签a包行内块image,可以包着,但是难以撑起来。但是点击图片任一部位还是可以跳转的。

 

可以给a标签变成块

        a{
            width: 200px;
            height: 100px;
            display: block;
        }

4.4嵌套关系总结:

  块级标签可以嵌套块级标签、行内标签和行内块

  p标签不要嵌套div,也不要嵌套p,

    p里可以放 a img 表单控件

  行内标签尽量不要嵌套块级标签

比如例外的p标签

<body>
    <p>
        小马过河
        <div>魔降风云变</div>
    </p>
</body>

浏览器修改掉了:

所有不要p包div,可以用div去包p。

 网页大多是图片和文字,所以一般最内层的标签大都是a标签和span这些标签

 

 5、高级选择器

5.1、后代选择器

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #box p{color: red}
    </style>
</head>
<body>
    <div id="box">
        <div>
            <div>
                <div>
                    <p>
                        魔降风云变
                    </p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

后代选择器和单独用p标签的区别:后代选择器限定了选择区间,哪个div下的哪个标签。限定了独立的逻辑区 。

一般嵌套也不能嵌套太多层,一般是不超过8层,超过8层写代码都费劲。

如果我修改一下#box p{color: red} 为#box p a{color: red} ,p下的a标签也可以的

p内包一个a标签
                    <p>
                        <a href="">魔降风云变</a>
                    </p> 


#box p a{color: red}

5.2、子代选择器

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #box>p{color: red}  /*子代选择器*/
    </style>
</head>
<body>
    <div id="box">
        <div>
            <div>
                <div>
                    <p>
                        魔降风云变
                    </p>
                </div>
            </div>
        </div>
        <p>
            小马过河
        </p>
    </div>
</body>
</html>

 子代选择器只能作用于它本身下的那一层。魔降风云变不是子代,所以子代选择器不能作用于魔降风云变。

 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #box>p>a{color: red}

    </style>
</head>
<body>
    <div id="box">
        <div>
            <div>
                <div>
                    <p>
                        <a href="">魔降风云变</a>
                    </p>
                </div>
            </div>
        </div>
        <p>
            <a href="">小马过河</a>
        </p>
    </div>
</body>
</html>

子代选择器也可以连续>,但是不宜太多

5.3组合选择器

很多标签都有margin。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #box{color: red}
    </style>
</head>
<body>
    <div id="box">
        <p>
            <a href="">小马过河</a>
        </p>
        <ul>
            <li>锄禾</li>
            <li>当午</li>
            <li>千门万户曈曈日</li>
        </ul>
    </div>
</body>
</html>

ul标签有margin和pading,ol也有。body有8pxmargin,p标签也有margin。

很多标签都有margin,你不确定它是多少呀,这样的话布局不好计算,那就把它们都去掉。

我添加个组合选择器,我们已经这些p,ul,ol,body都有margin,那就都选中,让这些标签组合起来共用一套样式。把这几个设置为0然后后面重新设置被叫做重置样式

    <style>
        p,ul,ol,body{
            margin: 0;
            padding: 0;
        }
    </style>

去掉之后都定格写了

可以重置样式的有:也可以把a标签的下划线重置样式。

        p,ul,ol,body{
            margin: 0;
            padding: 0;
        }
        input,textarea{
            border: none;
            outline: 0;
        }

重置样式,去掉所有的margin和padding。然后在画布上按照自己的想法去画。常用。

比如小米的网站重置margin

 

 5.4、交集选择器

两个选择器作用于同样的内容

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        span{color: #d33333}
        .active{font-size: 20px}
    </style>
</head>
<body>
    <p>正常字体</p>
    <span class="active">小马过河</span>
</body>
</html>

 

 

 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        span{color: #d33333}
        .active{font-size: 20px}
        span.active{
            background-color: gold;}
    </style>
</head>
<body>
    <p>正常字体</p>
    <span class="active">小马过河</span>
    <span class="active">小马过河2</span>
    <span >魔降风云变1</span>
    <a href="" class="active">魔降风云变2</a>

</body>
</html>

 交集span.active{},既是span标签,又有类active的可以被选中。中间不要隔开,隔开就不生效了

 

 

6、css的继承

 6.1继承实例演示

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        p{color: red}
    </style>
</head>
<body>
    <div id="box">
        <p class="active">魔降风云变</p>
    </div>
</body>
</html>

这样字体肯定是红色的

 

但是如果装饰的是父的呢?字体也是红的么?同样是红的。#box{}作用的是div,但是p标签也变红了。

    <style>
        #box{color: red}
    </style>

<div id="box">
<p class="active">魔降风云变</p>
</div>

看开发工具可看见p标签的继承来自哪里:

那么还有没有其他的可以被继承的属性呢

       #box{
            color: red;
            height: 40px;
            text-align: center;
        }

可以看到height是浅红色,没有继承过来。高是盒子模型的属性,不能继承

 

行高不是盒子属性,那么行高可以被继承么?

        #box{
            color: red;
            height: 40px;
            text-align: center;
            line-height: 80px;
        }

可以继承行高

继承性:在css有某些属性是可以继承下来,color,text-xxx,line-height,font-xxx是可以继承下来

 

如下:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #box{
            color: red;
            height: 40px;
            text-align: center;
            line-height: 30px;
            background-color: yellow;
            font-size: 26px;
        }
        p{
            background-color: red;
            color: greenyellow;
        }
    </style>
</head>
<body>
    <div id="box">
        <p class="active">魔降风云变</p>
    </div>
</body>
</html>

继承来的字体是26px。bgc不能被继承过来,自己设置了红色背景,给p标签。p标签继承来的行高30,div的高是40,所以黄色漏出10px高度。

 

 

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        body{font-size: 14px}
        #box{
            color: red;
            height: 40px;
            text-align: center;
            line-height: 30px;
            background-color: yellow;
            font-size: 26px;
        }
        p{
            background-color: red;
            color: greenyellow;
        }
    </style>
</head>
<body>
    <div id="box">
        <p class="active">魔降风云变</p>
    </div>
    <a href="">小马过河</a>
</body>
</html>

body14,box26,继承了box的26.

 

用的p标签自己的,没用

 

没用那几个继承的,用的p标签自己的。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        body{font-size: 14px}
        #box{
            color: red;
            height: 40px;
            text-align: center;
            line-height: 30px;
            background-color: yellow;
            font-size: 26px;
        }
        #box p{
            background-color: red;
            color: greenyellow;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id="box">
        <p class="active">魔降风云变</p>
    </div>
    <a href="">小马过河</a>
</body>
</html>

由下图可知,用的#box p{}装饰的。这里尽量用#box p{}指定哪里p标签。而不是其它div下的p标签。body和box可以继承过来,但是我需要单独给它写,就选中它单独为它赋值,覆盖掉父的属性。这里用的是后代选择器。因为有继承关系,那么我们就应该给body设置一个样式作为默认样式。当某一部分需要单独设置,那么选中这一部分单独设置。于是,就出现了一个问题,就是继承的顺序是什么?

 6.2继承顺序问题

 下面程序,看看结果是继承哪个的呢?

<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
 
    </style>
</head>
<body>
    <div id="box1" class="wrap1">
        <div id="box2" class="wrap2">
            <div id="box3" class="wrap3">
                <p id="active" class="active" >魔降风云变</p>
            </div>
        </div>
    </div>
</body>
</html>

首先是:<p class="active">魔降风云变</p> ,style 直接写在行内的优先级最高,那么这里只研究内嵌中的继承顺序。

样式如下的时候结果是红色:

<style>
        p{color: red}
    </style>

样式有了重叠性。当标签选择器和类选择器同时在的时候,类选择器覆盖了标签选择器的:

    <style>
        p{color: red}
        .active{color: yellow}
    </style>

 

 是类选择器和标签选择器放的位置先后导致的么?那么我调换顺序试试:

    <style>
        .active{color: yellow}
        p{color: red}
    </style>

结果还是现实类选择器的。由上可知,内嵌样式中,继承的顺序是类选择器优先于标签选择器,实际类选择器权重10,标签选择器权重1

 

当标签选择器,类选择器,id选择器都在时,显示的是id选择器里的。 #id选择器的权重实际上是100,权重更大些。在行内写的style是1000

    <style>
        #active{color: blue}
        .active{color: yellow}
        p{color: red}
    </style>

上面三个里id选择器权重最大,优先级高,那我用它再来做比较:

    <style>
        #active{color: blue}
        #box1 p{color: yellowgreen} /*#box1下的 p标签*/
    </style>

结果是下面那个优先。类选择器#active{}是100, #box1 p{}类选择器是100+1=101的权重,优先于单独的类选择器。 

 

再看下面的优先级:

    <style>
        #active{color: blue}
        #box1 p{color: yellowgreen} /*#box1下的 p标签*/
        #box1 .wrap2 .wrap3 p{color: gold}
    </style>

先比id,之前id选择器没有的把它去除掉了;然后再看id选择器后面的选项,结果是下面那个优先

再看下面的:

    <style>
        #active{color: blue}
        #box1 p{color: yellowgreen} /*#box1下的 p标签*/
        #box1 .wrap2 .wrap3 p{color: gold}
        #box1 #box2 {color: green}
    </style>

结果还是gold。gold和green对比:它们都有id选择器。继承来的权重为0#box1 #box2 {color: green},如果选中p标签了的,就按这个规则来,如果没有选中,那就看继承不继承,跟继承没关系那就忽略掉。继承的权值为0,那么如果是同时继承来的怎么办呢?

看下面这个

    <style>
        #box1 #box2 {color: green}
        #box1 #box2  .wrap3{color: brown}
    </style>

越接近的权值越大

 

6.3继承总结

综上

继承性:在css有某些属性是可以继承下来,color,text-xxx,line-height,font-xxx是可以继承下来

权重比较规则:

继承来的属性权重为0

前提是选中了标签权重比较;

  1.数选择器数量: id 类 标签 谁大它的优先级越高,如果一样大,后面的会覆盖掉前面的属

  2.选中的标签的属性优先级用于大于继承来的属性,它们是没有可比性

  3.同是继承来的属性

    3.1 谁描述的近,谁的优先级越高

    3.1 描述的一样近,这个时候才回归到数选择器的数量

 6.4其它继承栗子

1)

    <style>
        #box1 .wrap2 .wrap3 p{color: gold} #100 10 10 1
        #box1 #box2  .wrap3{color: brown}  #100 100 10 权值大,如何解释???
    </style>

2)

    <style>
        #box1 .wrap2 .wrap3 p{color: gold}
        #box1 #box2  .wrap3 p{color: brown} #权值大
    </style>

或者
    <style>
    #box1 #box2  .wrap3 p{color: brown}   # 100 100 10 1  #权值大
    #box1 .wrap2 .wrap3 p{color: gold}    #100 10 10 1
        
    </style>

3)

    <style>
        #box1 .wrap2 #box3 p{color: gold}   #100 10 100 1
        #box1 #box2  .wrap3 p{color: brown}  #100 100 10 1 权值相等,谁在后就是谁么?
    </style>

    <style>
        #box1 #box2  .wrap3 p{color: brown} #100 100 10 1 
        #box1 .wrap2 #box3 p{color: gold}  #100 10 100 1  权值相等么?
    </style>

在这种情况下谁在下面就是谁

 4)数选择器 两个优先级高的id选择器

    <style>
        #box1 .wrap2  .wrap3{color: gold}  #调换过顺序没有变
        #box1 #box2  .wrap3 {color: brown}
    </style>

 5)!importent不常用,大多调试

    <style>
        #box1 .wrap2  .wrap3{color: gold !important;}
        #box1 #box2  .wrap3 {color: brown}
    </style>

6)即使!important也比不过行内的

    <style>
        #box1 .wrap2  .wrap3{color: gold !important;}
        #box1 #box2  .wrap3 {color: brown}
    </style>


 <p id="active" class="active" style="color:blueviolet">魔降风云变</p>

 

 

 调试的话可以用行内的来调试

 

 

 

 

 

 

 

 

 

 

 

 

 


 

posted @ 2019-05-28 21:37  马昌伟  阅读(180)  评论(0编辑  收藏  举报