<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>from 渡一</title>
<style>
/* 1.父子选择器 */
div strong em{
background-color: red;
}
/* 2.直接子元素选择器 */
div>em{
background-color: green;
}
/* 3.浏览器内部 从右向左找 */
section div ul li a em{
background-color: purple;
}
/*4 .并列选择器 */
div.demo{
color: red;
}
/* 5.权重计算问题 */
/* !important infinity
行间样式 1000
id 100
class|属性选择器 |伪类 10
标签选择器|伪元素 1
通配符 0 */
/* 如果值相同,后面的会覆盖前面的 */
/* 100 1 */
#idDiv p{
background-color: #9370DB;
}
/* 10 10 */
.classDiv .classP{
background-color: aquamarine;
}
/* 6.分组选择器 */
/* em{
background-color: aqua;
}
strong{
background-color: aqua;
}
span{
background-color: aqua;
} */
/* 可以写成 */
em,
strong,
span{
background-color: aqua;
}
#a{
/* 浏览器默认字体大小为16px 设置字体的高 */
font-size: 20px;
/* 字体加粗 lighter normal bold bolder 100 200 300...900由细到粗 strong 里面自带*/
font-weight: bold;
/* 斜体 */
font-style: italic;
/* 字体 */
font-family: arial;
/* 设置字体颜色 */
color: aqua;
/* 颜色代码 */
color: #800080;
/* 颜色函数 */
color: rgb(0,0,0);
border: 1px solid black;
/* border: border-width border-style border-color; */
border-left-color:red;
/*
光学三元色
r g b
00--ff 00--ff 00--ff
#000000 黑色
#ff4400----#f40
*/
}
#b{
0;
height: 0;
border: 50px solid white;
/* transparent 透明色 */
border-left-color:red transparent;
border-top-color:yellow transparent;
border-right-color:green transparent;
border-bottom-color:blue;
}
</style>
</head>
<body>
<!-- 1.父子选择器/派生选择器 -->
<div>
<strong>
<em>123</em>
</strong>
</div>
<em>123</em>
<!-- 2.直接子元素选择器 -->
<div>
<em>234</em>
<strong>
<em>234</em>
</strong>
</div>
<!-- 3.浏览器的内部原理 -->
<!-- 选择em标签 -->
<section>
<div>
<p>
<a href="">
<span></span>
</a>
</p>
<ul>
<li>
<a href="">
<span>
<em>1</em>
</span>
</a>
<p></p>
</li>
<li></li>
</ul>
</div>
<a href="">
<p>
<em>2</em>
</p>
<div></div>
</a>
</section>
<!-- 4.并列选择器 怎么选择第二个盒子-->
<div>1</div>
<div class="demo">2</div>
<p class="demo">3</p>
<!-- 5.权重计算问题 -->
<div class="classDiv" id="idDiv">
<p class="classP" id="idP">权重计算</p>
</div>
<!-- 6.分组选择器 -->
<em>one</em>
<strong>two</strong>
<span>three</span>
<!-- 7.css代码块 -->
<div id="a">hello</div>
<!-- 实例画三角形 -->
<div id="b"></div>
</body>
</html>