2 css篇

Posted 2021-06-14 风hua

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了2 css篇相关的知识，希望对你有一定的参考价值。

CSS篇

css选择器

css选择器总结：
    语法：
        选择符{
            属性:值;
        }
    作用：选中页面上的元素（标签），设置对应的样式
    - 基础选择器
        + 标签选择器
            * 对页面中相同的元素，设置共同的属性
        + id选择器
            * 任何的元素都可以设置id
            * id是唯一，并且不能重复，表示选中的是有“特性的元素”
        + class选择器
            * 任何的元素都可以设置类
            * 一个元素中可以设置多个类
            * 一定要有“归类的概念，公共类的想法”。选中的页面元素，设置相同的属性
    -  高级选择器
        +  后代 （爸爸的儿子，孙子....）
            *  div p{}
        +  子代 （亲儿子）
            *  div>p
        + 组合
            *  选择器1,选择器2,选择器3{}
        + 交集选择器（了解）
            * 选择器1选择器2{} 指向同一节点
        + 伪类选择器
            * a标签
                - 爱恨准则  LoVe HAte
                    + a:link{}
                    + a:visited{}
                    + a:hover{}
                    + a:active{}
        注意：:hover可以应用于任何的元素

/* 标签选择器 */
p{
    color: orange;
    font-size: 14px;
    font-weight: bold;
}

/* id选择器 */
#peiqi{
    color: green;
}
#jj{
    color: red;
}

/* 类选择器 */
.active{
    color: gray;
}
.title{
    font-size: 30px;
}

1 基础选择器

/* 后代选择器 */
.wrap a{
    color: orange;
}

/* 子代选择器 */
.wrap>a{
    color: purple;
}

/* 组合选择器 */
h3,span{
    color: gray;
    font-size: 14px;
}

/* 交集选择器（解决代码冗余） */
/* 选择器1选择器2{样式;} */


h2{
    color: red;
    font-size: 14px;
}
.active{
    font-weight: lighter;
    font-size: 14px;
}
/* 指向同一节点--简化 -去除font-size: 14px; */
h2.active{
    font-size: 14px;
}

2 高级选择器

/*爱恨准则 先爱再恨  LoVe HAte*/
/*没有被访问过a的状态*/
a:link{
    color: orange;
}
/*访问过后的a的状态*/
a:visited{
    color: green;
}
/*鼠标悬浮时a的状态*/
a:hover{
    color: black;
}
/*鼠标摁住时a的状态*/
a:active{
    color:  purple;
}
span{
    color: gray;
}
span:hover{
    color: red;
}
div:hover{
    background-color: green;
}
div:hover span{
    color: white;
}

3 伪类选择器

<!DOCTYPE html>
<html>
<head>
    <title>选择器权重</title>
    <style type="text/css">
        /*数选择器的数量： id选择器 类选择器 标签选择器*/
        /*0 1 0*/
        .b{
            color: purple;
        }
        /*0 0 3*/
        html body div{
            color: red;
        }
        /*1 0 0*/
        #b{
            color: orange;
        }

    </style>
</head>
<body>
    <div>a</div>
    <div class="b" id="b" style="color: green;">b</div>
</body>
</html>

4 选择器权重

<!DOCTYPE html>
<html>
<head>
    <title>css选择器权重深入</title>
    <style type="text/css">
        /* 0 0 3*/
        div div p{
            color: yellow;
        }
        /*0 0 1*/
        p{
            color: gray;
        }
        /*0 1 0*/
        .active{
            color: purple;
        }
        /*0 1 1*/
        div .active{
            color: black;
        }
        /*0 1 1*/
        div div .active{
            color: blue;
        }
        /*1 2 0*/
        .wrap1 #box2 .active{
            color: green;
        }
        /*2 0 1*/
        #box1 #box2 p{
            color: red;
        }
        /*继承来的属性 它的权重非常低 0*/
        #box1 #box2 #box3{
            color: orange;
        }

        .container{
            color: orange;
            font-size: 14px;
        }
        .container ul li {
            color: #000;
            font-size: 16px;

        }

    </style>
</head>
<body>
    <div class="wrap1" id="box1">
        <div class="wrap2" id="box2">
            <div class="wrap3" id="box3">
                <p class="active">MJJ是什么颜色</p>
            </div>
        </div>
        
    </div>


    <div class="container">
        <ul>
            <li>小米手机</li>
        </ul>
    </div>
</body>
</html>

4 权重深入

<!DOCTYPE html>
<html>
<head>
    <title>!important讲解</title>
    <style type="text/css">
        #a{
            color: green !important;
        }
        div{
            color: purple !important;
        }
    </style>
</head>
<body>
    <div class="a" id="a">a</div>
</body>
</html>

5 最高权重！imporant

以上是关于2 css篇的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段——CSS选择器

css有用的代码片段

VSCode自定义代码片段——CSS动画

VSCode自定义代码片段7——CSS动画

VSCode自定义代码片段6——CSS选择器