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; }
/* 后代选择器 */ .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; }
/*爱恨准则 先爱再恨 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; }
<!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>
<!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>
<!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>