CSS回顾总结（四）——列表、属性选择器、文本标签、样式的继承

列表

无序列表

有序列表

定义列表

属性选择器

文本标签

选择器的优先级

样式的继承

子元素的伪类选择器

列表

列表就相当于去超市购物时的购物清单。在html中也可以创建列表
一共有三种列表：

无序列表
有序列表
定义列表

列表之间可以互相嵌套

无序列表

无序列表：使用ul标签来创建一个无序列表
使用li在ul中创建一个个列表项，一个li就是一个列表项
通过type属性可以修改无序列表的项目符号

disc:默认值，实心圆点
circle:空心圆点
square:实心方块
ul和li都是块元素

例子：

<ul style="list-style:none;">
    <li>行者武松</li>
    <li>大刀关胜</li>
    <li>浪子燕青</li>
</ul>

运行结果：

CSS回顾总结（四）——列表、属性选择器、文本标签、样式的继承

有序列表

有序列表和无序列表类似，使用ol
type属性可以指定序号类型
1:默认值，使用阿拉伯数字

例子：

<ol type="I">
    <li>豹子头林冲</li>
    <li>入云龙公孙胜</li>
    <li>镇三山黄信</li>
</ol>

运行结果：

CSS回顾总结（四）——列表、属性选择器、文本标签、样式的继承

定义列表

定义列表：对一些词汇或内容进行定义
使用dl来创建一个定义列表,dl中有两个子标签。dt表示被定义的内容，dd表示对定义内容的表述

例子：

<dl>
    <dt>白衣秀士王伦</dt>
    <dd>第一任梁山泊之主，后被林冲火并而死</dd>
    <dd>手下摸着天杜迁云里金刚宋万，战斗力：不详</dd>
    <dt>托塔天王晁盖</dt>
    <dd>第二任梁山泊之主，在曾头市被暗箭射死</dd>
</dl>

运行结果：

CSS回顾总结（四）——列表、属性选择器、文本标签、样式的继承

属性选择器

为所有具有title属性的p元素设置字体属性为红
属性选择器：可以根据元素中的属性或者属性值来选取指定元素
语法：[属性名]选取含有指定属性的元素
[属性名=属性值]选取含有指定属性值的元素
[属性名^=属性值]选取属性值以指定内容开头的元素
[属性名$=属性值]选取属性值以指定内容结尾的元素
[属性名*=属性值]选取属性值包含指定内容的元素

title属性，这个属性可以给任何标签指定。当鼠标移入到文字上时，元素中的title属性将会作为提示显示

例子：

<head>
    <meta charset="utf-8">
	<title>属性选择器</title>
	<style type="text/css">
		p[title]{
			color:red;
		}
	</style>
</head>
<body>
    <p>北风卷地白草折，胡天八月即飞雪</p>
    <p >忽如一夜春风来，千树万树梨花开</p>
    <p>散入珠帘湿罗幕，狐裘不暖锦衾薄</p>
</body>

运行结果：

CSS回顾总结（四）——列表、属性选择器、文本标签、样式的继承

文本标签

,都表示一个强调作用
em标签表示一段内容中的着重点，strong标签可以表示一段内容的重要性
这两个标签可以单独使用，也可以一起使用
通常em使用斜体，strong使用粗体
i标签对应em标签，b标签对应strong标签。只是单纯斜体和加粗，不需要强调
标签中的内容会比它父元素中的内容要小一些，在h5中使用small标签来表示一些细则，比如：合同中的小字，网站的版权声明

例子：

<p>今天天气<em>不好</em></p>
<p>天地有正气<small>杂然赋流形</small></p>

运行结果：

CSS回顾总结（四）——列表、属性选择器、文本标签、样式的继承

************************************************************************************************************************************************

<cite></cite> 网页中的所有加书名号的内容都可以加cite标签，表示参考内容
比如：书名，歌名，舞蹈名，电影名

例子：

<p><cite>《山海经》是我最读不懂的一本书</cite></p>

运行结果：

CSS回顾总结（四）——列表、属性选择器、文本标签、样式的继承

************************************************************************************************************************************************

<q>标签表示一个短的引用（行内引用），引用的内容，浏览器会自动加上“”
<blockquote>标签表示一个长的引用（块引用），内容独占一行

例子：

<p>子曰：<q>学而时习之，不亦说乎</q></p>

运行结果：

CSS回顾总结（四）——列表、属性选择器、文本标签、样式的继承

************************************************************************************************************************************************

标签让内容上标，标签让内容下标

例子：

<p>皇图霸业谈笑中<sup><a href="#">不胜人生一场醉</a></sup></p>
<p>天下风云出我辈<sub><a href="#">一入江湖岁月催</a></sub></p>

运行结果：

CSS回顾总结（四）——列表、属性选择器、文本标签、样式的继承

************************************************************************************************************************************************

<del>标签表示删除，内容中间加了一条横线
<ins>标签表示一个插入内容,内容下加了一条下划线

例子：

<p>
      	<del>18.5$<br /></del>
      	15.5$ <br />
      	<ins>16.8$</ins>
</p>

运行结果：

CSS回顾总结（四）——列表、属性选择器、文本标签、样式的继承

************************************************************************************************************************************************

<code>如果你的内容包含代码示例或者文件名，就可以使用code标签
<pre>标签表示的是预格式化文本,会将代码中的格式保存，不会忽略多个空格

例子：

<pre>
window.onload = function(){
	alert("new game!");
};
        </pre>

运行结果：

CSS回顾总结（四）——列表、属性选择器、文本标签、样式的继承

选择器的优先级

当使用不同的选择器，选中同一个元素时，并且设置相同的样式时，这是样式之间产生冲突
* 最终采用哪个选择器定义的样式，由选择器优先级（权重）决定
*
* 优先级规则：
*        内联样式：优先级1000
*        id选择器：优先级100
*        类和伪类：优先级10
*        元素选择器：优先级1
*        通配选择器*：优先级0
*        继承的样式，没有优先级
*        当选择器中包含多种选择器时（交集选择器），优先级需要相加
*        如果选择器的优先级一样，则使用靠后的样式
*        并集选择器中的选择器优先级单独计算
*    可以在样式最后添加一个!important，此时该样式将会获得最高的优先级，会优先于所有样式

例子：

    <head>
		<meta charset="utf-8">
		<title>选择器的优先级</title>		
		<style type="text/css">
			p{
				color: red;
			}
			.a{
				color: blue!important;
			}
			
			#b{
				color: green;
			}
		</style>
	</head>
	<body>
		<p class="a" id="b">这是一个段落</p>
	</body>

运行结果：

CSS回顾总结（四）——列表、属性选择器、文本标签、样式的继承

样式的继承

在CSS中，祖先元素的样式也能被后代元素继承
利用继承可以将一些基本样式设置给祖先元素，所有后代元素都会继承
并不是所有的样式都会被子元素继承，比如说背景相关的样式，边框相关的样式，定位相关的样式

例子：

<body>
    <p style="color: cadetblue;">
       我是p标签中的文字 <br />
        <span>我是p标签中的span标签中的文字</span>
    </p>
    <span>我是span标签中的文字</span>
</body>

运行结果：

CSS回顾总结（四）——列表、属性选择器、文本标签、样式的继承

子元素的伪类选择器

* :first-child:选择第一个子标签 :last-child:选择最后一个子标签
* :nth-child: 选择指定位置的子元素
* :first-of-type :last-of-type :nth-of-type 选择指定类型的子元素

例子：

<head>
	<meta charset="utf-8">
	<title>子元素伪类选择器</title>
	<style type="text/css">
		div > p:first-child{
			color: green;
		}
			
		p:nth-child(2){
			color: purple;
		}
	</style>
</head>
<body>
	<p>大梦谁先觉，生平我自知</p>
	<p>大梦谁先觉，生平我自知</p>
	<div>
		<p>大梦谁先觉，生平我自知</p>		
	</div>
</body>

运行结果：

CSS回顾总结（四）——列表、属性选择器、文本标签、样式的继承