1.否定伪类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>否定伪类</title>
<style type="text/css">
/*
:not(选择器){}
*/
/*p:not(.hello){
background-color:red;
}*/
p:not(.www):not(#p1) {
background-color: red;
}
</style>
</head>
<body>
<p>不知所谓</p>
<p id="p1">不知所谓</p>
<p class="hello">不知所谓</p>
<p>不知所谓</p>
</body>
</htmml>
2.选择器的优先级
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>选择器的优先级</title>
<style type="text/css">
/*
内敛样式 优先级 1000
id选择器 优先级 100
类和内类 优先级 10
元素选择器 优先级 1
通配 优先级 0
继承的样式 没有优先级
*/
*{
font-size: 50px;
}
.p1{background-color: yellow;
}
p{
background-color: red;
}
#p2{
background-color: green;
}
p#p2{
background-color: pink;
}
/*并集选择器是单独计算的*/
</style>
</head>
<body>
<p class="p1" id="p2">只是p标签</p>
<p>
这是一个段落标签
<br><br>
<span>这是p标签中的span</span>
</p>
</body>
</htmml>
3.单位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单位</title>
<style type="text/css">
/*像素 px
百分比 %
em
1em = 1font-size = 20px
2em = 40px
10em = 1000px
*/
.box{
width: 100px;
height: 100px;
background-color: red;
}
.box1{
font-size: 100px;
width: 10em;
height: 50%;
background-color: pink;
}
</style>
</head>
<body>
<dir class="box">
<dir class="box1"></dir>
</dir>
</body>
</html>
4.文本标签
<!DOCTYPE html>
<html>
<head>
<title>文本标签</title>
</head>
<body>
<p><em>xxxxx</em></p>
<p><strong>罪爱<strong></p>
<p><i>人生如戏</i><b>全靠演技</b></p>
<p>将进酒<big>杯莫停</big></p>
<p><cite>《电影》</cite>是我喜欢的</p>
<p>你是<q>xxxx</q>吗?</p>
<div>他说：<blockquote>a点有人<blockquote></div>
<p>8<sup>2</sup></p>
<p>某某某<sub><a href="#">[1]</a></sub></P>
<p>H<sub>2</sub>0</p>
<p>
<del>200.00</del><br>
300.00<br>
</p>
<p>你很<ins>可爱</ins>啊！</p>
<pre>
if a == b:
print(lll)
</pre>
<pre>
<code>
if a == b:
print(lll)
</code>
</pre>
<ul>
<li>m4a1</li>
<li>ak47</li>
<li>awm</li>
</ul>
</body>
</html>
5.列表
<!DOCTYPE html>
<html>
<head>
<title>列表</title>
</head>
<body>
<p>衣库</p>
<ul>
<li>白色短袖<ol><li>白色的</li><li>短袖</li></ol></li>
<ul>
<li>m4a1<li>
<li>ak47<li>
<li>awm<li>
</ul>
<ol type="a">
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
</body>
</html>
