概述
因为以下这些内容是我很久以前学的，所以这次写这个博客就当是回顾和复习了，内容可能并不是特别详细，但我的代码中注释里还是有我当初记下来的笔记的。这篇博客要叙述的内容主要是列表、属性选择器、文本标签、选择器的优先级、样式的继承、子元素伪类选择器，当然主要是以一些实际例子的代码为展示的，具体的我也会加入一些超链接。接下来那就开始喽！
1.列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列表</title>
</head>
<body>
<!--
列表就相当于去超市购物时的购物清单。在html中也可以创建列表
一共有三种列表：
1.无序列表 2.有序列表 3.定义列表
列表之间可以互相嵌套
-->
<!--无序列表：使用ul标签来创建一个无序列表
使用li在ul中创建一个个列表项，一个li就是一个列表项
通过type属性可以修改无序列表的项目符号
disc:默认值，实心圆点
circle:空心圆点
square:实心方块
ul和li都是块元素
-->
<ul style="list-style:none;">
<li>行者武松</li>
<li>大刀关胜</li>
<li>浪子燕青</li>
</ul>
<!--有序列表和无序列表类似，使用ol
type属性可以指定序号类型
1:默认值，使用阿拉伯数字
-->
<ol type="I">
<li>豹子头林冲</li>
<li>入云龙公孙胜</li>
<li>镇三山黄信</li>
</ol>
<!--定义列表：对一些词汇或内容进行定义
使用dl来创建一个定义列表,dl中有两个子标签。dt表示被定义的内容，dd表示对定义内容的表述
-->
<dl>
<dt>白衣秀士王伦</dt>
<dd>第一任梁山泊之主，后被林冲火并而死</dd>
<dd>手下摸着天杜迁云里金刚宋万，战斗力：不详</dd>
<dt>托塔天王晁盖</dt>
<dd>第二任梁山泊之主，在曾头市被暗箭射死</dd>
</dl>
</body>
</html>
2.属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style type="text/css">
/**
* 为所有具有title属性的p元素设置字体属性为红
* 属性选择器：可以根据元素中的属性或者属性值来选取指定元素
* 语法：[属性名]选取含有指定属性的元素
* [属性名=属性值]选取含有指定属性值的元素
* [属性名^=属性值]选取属性值以指定内容开头的元素
* [属性名$=属性值]选取属性值以指定内容结尾的元素
* [属性名*=属性值]选取属性值包含指定内容的元素
*/
p[title]{
color:red;
}
</style>
</head>
<body>
<!--
title属性，这个属性可以给任何标签指定。当鼠标移入到文字上时，元素中的title属性将会作为提示显示
-->
<p>北风卷地白草折，胡天八月即飞雪</p>
<p title="这是title中的文字">忽如一夜春风来，千树万树梨花开</p>
<p>散入珠帘湿罗幕，狐裘不暖锦衾薄</p>
</body>
</html>
3.文本标签
<html>
<head>
<meta charset="utf-8">
<title>文本标签</title>
</head>
<body>
<!--
<em>,<strong>都表示一个强调作用
em标签表示一段内容中的着重点，strong标签可以表示一段内容的重要性
这两个标签可以单独使用，也可以一起使用
通常em使用斜体，strong使用粗体
<i></i><b></b>i标签对应em标签，b标签对应strong标签。只是单纯斜体和加粗，不需要强调
<small>标签中的内容会比它父元素中的内容要小一些，在h5中使用small标签来表示一些
细则，比如：合同中的小字，网站的版权声明
-->
<p>今天天气<em>不好</em></p>
<p>天地有正气<small>杂然赋流形</small></p>
<!--
<cite></cite> 网页中的所有加书名号的内容都可以加cite标签，表示参考内容
比如：书名，歌名，舞蹈名，电影名
-->
<p><cite>《山海经》是我最读不懂的一本书</cite></p>
<!--
<q>标签表示一个短的引用（行内引用），引用的内容，浏览器会自动加上“”
<blockquote>标签表示一个长的引用（块引用），内容独占一行
-->
<p>子曰：<q>学而时习之，不亦说乎</q></p>
<!--
<sup>标签让内容上标，<sub>标签让内容下标
-->
<p>皇图霸业谈笑中<sup><a href="#">不胜人生一场醉</a></sup></p>
<p>天下风云出我辈<sub><a href="#">一入江湖岁月催</a></sub></p>
<!--
<del>标签表示删除，内容中间加了一条横线
<ins>标签表示一个插入内容,内容下加了一条下划线
-->
<p>
<del>18.5$<br /></del>
15.5$ <br />
<ins>16.8$</ins>
</p>
<!--
<code>如果你的内容包含代码示例或者文件名，就可以使用code标签
<pre>标签表示的是预格式化文本,会将代码中的格式保存，不会忽略多个空格
-->
<pre>
window.onload = function(){
alert("new game!");
};
</pre>
</body>
</html>
4.选择器的优先级
<html>
<head>
<meta charset="utf-8">
<title>选择器的优先级</title>
<style type="text/css">
/*
* 当使用不同的选择器，选中同一个元素时，并且设置相同的样式时，这是样式之间产生冲突
* 最终采用哪个选择器定义的样式，由选择器优先级（权重）决定
*
* 优先级规则：
* 内联样式：优先级1000
* id选择器：优先级100
* 类和伪类：优先级10
* 元素选择器：优先级1
* 通配选择器*：优先级0
* 继承的样式，没有优先级
* 当选择器中包含多种选择器时（交集选择器），优先级需要相加
* 如果选择器的优先级一样，则使用靠后的样式
* 并集选择器中的选择器优先级单独计算
* 可以在样式最后添加一个!important，此时该样式将会获得最高的优先级，会优先于所有样式
*/
p{
color: red;
}
.a{
color: blue!important;
}
#b{
color: green;
}
</style>
</head>
<body>
<p class="a" id="b">这是一个段落</p>
</body>
</html>
5.样式的继承
<html>
<head>
<meta charset="utf-8">
<title>样式的继承</title>
</head>
<body>
<!--
在CSS中，祖先元素的样式也能被后代元素继承
利用继承可以将一些基本样式设置给祖先元素，所有后代元素都会继承
并不是所有的样式都会被子元素继承，比如说背景相关的样式，边框相关的样式，定位相关的样式
-->
<p style="color: cadetblue;">
我是p标签中的文字 <br />
<span>我是p标签中的span标签中的文字</span>
</p>
<span>我是span标签中的文字</span>
</body>
</html>
6.子元素的伪类选择器
<html>
<head>
<meta charset="utf-8">
<title>子元素伪类选择器</title>
<style type="text/css">
/*
* :first-child:选择第一个子标签 :last-child:选择最后一个子标签
* :nth-child: 选择指定位置的子元素
* :first-of-type :last-of-type :nth-of-type 选择指定类型的子元素
*/
div > p:first-child{
color: green;
}
p:nth-child(2){
color: purple;
}
</style>
</head>
<body>
<p>大梦谁先觉，生平我自知</p>
<p>大梦谁先觉，生平我自知</p>
<div>
<p>大梦谁先觉，生平我自知</p>
</div>
</body>
</html>
一起学习，一起进步 -.- ，如有错误，可以发评论
