兄弟元素选择器
语法：
查找后边一个兄弟元素
兄弟元素 + 兄弟元素{}
查找后边所有兄弟元素
兄弟元素 ~ 兄弟元素{}
否定伪类
语法:
not(选择器){}
例如：p:not(.hello)表示选择所有p元素但class为hello的除外。
权重（依次排列，优先级从高到低）
！important
内联（1000）
id（100）
类，伪类（10）
元素p（1）
通配（0）
继承样式无优先级
优先级一样用后面的
<em>和<strong>
em标签表示一段内容中的着重点
strong标签表示一个内容的重要性
em显示斜体，strong显示粗体。
<i>会使文本变成斜体
<b>会使文本变成粗体
<small>会显示一个比父元素小的字号
<cite>指明对某内容的引用或参考
<p>
<cite>《水浒》</cite>是本书
</p>
<blockquote>和<q>
blockquote用于长引用
q用于短引用
和
sup 定义上标
sub 定义下标
有序列表
<ol>
<li>列表1</li> 1.列表1
<li>列表2</li> 2.列表2
</ol>
无序列表
<ul>
<li>列表1</li>
<li>列表2</li>
</ul>
定义列表
<dl>
<dt>定义1</dt>
<dd>定义描述1</dd>
<dt>定义2</dt>
<dd>定义描述2</dd>
</dl>
单位
px
百分比
em
1em = 1font-size
十六进制颜色
例如：
6600FF
66:红色
00:绿色
FF:蓝色
若每组中俩数字相同，可缩短为3字符 例：#6600FF 缩短为#60F
RGB
RGB(100%,0%,0%)
第一个指红色
第二个指绿色
第三个指蓝色
文字大小(size)
字体
font-family
例如：p{font-family:arial}(使用arial作为字体)
font-family
例如：p{font-family:arial,helvetica}(优先使用第一个)
字体分类
serif(衬线字体)
sans-serif(非衬线字体)
monospace(等宽字体)
cursive(草书字体)
fantasy(虚幻字体)
字体属性简写
font:italic small-caps bold 60px '微软雅黑';
注：(字体最后，大小倒数第二)，必须有
<!DOCTYPE html>
<html>
<head>
<title>我的个人博客</title>
<meta charset="utf8" />
</head>
<body>
<center>
<div>
<a href='#p1'>去底部</a> <a href='#p2'>去指定位置</a>
</div>
<p>我的个人博客</p>
<h1>不想长大</h1>
<p><font color='blue' size='5'>S.H.E</font></p>
<p>为什么就是找不到无邪的玫瑰花</p>
<p>为什么遇见的王子都不够王子啊</p>
<p>我并不期盼他会有玻璃鞋和白马</p>
<p>我惊讶的是情话竟然会变成谎话</p>
<p>为什么幸福的青鸟要飞的那么高</p>
<p>为什么苹果和拥抱都可能是毒药</p>
<p>我从没想过有了他还孤单的可怕</p>
<p>我突然想起从前陪我那个洋娃娃</p>
<p>我不想我不想不想长大</p>
<p>长大后世界就没有花</p>
<p>我不想我不想不想长大</p>
<p>我宁愿永远又笨又傻</p>
<p>我不想我不想不想长大</p>
<p>长大后我就会失去他</p>
<p>我深爱的他深爱我的他</p>
<p>已经变的不像他</p>
<p>我不想我不想不想长大</p>
<p>长大后世界就没有花</p>
<p>我不想我不想不想长大</p>
<p>我宁愿永远都笨又傻</p>
<image src='timg.jpg' alt='这是个图片' width='300px'/>
<p>我不想我不想不想长大</p>
<p>长大后我就会失去他</p>
<p>我深爱的他深爱我的他</p>
<p>怎么会爱上别个他</p>
<p>为什么水晶球里面看不出他在变</p>
<p>为什么结局没欢笑而是泪流满面</p>
<p>我愿意在他回来前继续安静沉睡</p>
<p>但他已去到别座城堡吻另一双嘴</p>
<p>为什么对流星许愿却从来没实现</p>
<p>为什么英勇的骑士会比龙还危险</p>
<p>我当然知道这世界不会完美无暇</p>
<p>我只求爱情能够不要那么样复杂</p>
<p>我不想我不想不想长大</p>
<p>长大后世界就没有花</p>
<p>我不想我不想不想长大</p>
<p id=p2></p>
<p>我宁愿永远都笨又傻</p>
<p>我不想我不想不想长大</p>
<p>长大后我就会失去他</p>
<p>我深爱的他深爱我的他</p>
<p>怎么会爱上别个他</p>
<p>让我们回去从前好不好</p>
<p>天真愚蠢快乐美好</p>
<image src='杰伦.jpg' alt='这又是一个图片' width='300px'/>
<p>我不想我不想不想长大</p>
<p>长大后世界就没有花</p>
<p>我不想我不想不想长大</p>
<p>我宁愿永远都笨又傻</p>
<p>我不想我不想不想长大</p>
<p>长大后我就会失去他</p>
<p>我深爱的他深爱我的他</p>
<p>怎么会爱上别个他</p>
<hr/>
<p>友情链接：<a href="http://www.baidu.com">A网站</a>|<a href="http://www.baidu.com">B网站</a>|<a href="http://www.baidu.com">C网站</a></p>
<p id='p1'></p>
<p id='p3'></p>
<div>
<a href='#'>回到顶部</a> <a href=http://www.baidu.com>联系我们</a><br><br>
</div>
</center>
</body>
</html>
1：plate
2：bento
3：#fancy
4：plate apple
5：#fancy pickle
6：.small
7：bento .small，plate .small
8：bento orange
9：plate,bento,plate
10：*
11：plate *
12：plate +apple
13：bento~pikcle
14：plate > apple
15：orange:first-child
16：:only-child
17：.small:last-child
18：plate:nth-child(3)
19：:nth-last-child(4)
20：apple:first-of-type
21：plate:nth-of-type(even)
22：plate:nth-of-type(2n+3)
23：apple:only-of-type
24：.small:nth-child(even)
25：bento:empty
26：apple:not(.small)
网友评论