CSS伪类布局菜单框学习+总结

CSS伪类

伪类的定义是：添加一些选择器的特殊效果。
选择器常见的有：id，tag，class，属性[attr=attrval]等。我暂时还不懂这个伪类是什么意思，但是我们知道CSS是html网页的表现形式，所以这个伪类肯定也是和设置网页的效果有关。带着这样的念头我们继续学习。
伪类包括：状态伪类和结构伪类。

状态伪类

状态伪类是基于元素当前状态进行选择的。在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去。常见的状态伪类主要包括：

:link 应用于未被访问过的链接；

:hover 应用于鼠标悬停到的元素；

:active 应用于被激活的元素；

:visited 应用于被访问过的链接，与:link互斥。

:focus 应用于拥有键盘输入焦点的元素。

从状态伪类我们来理解一下伪类的定义，在设置每个元素属性的时候，通常我们的步骤是：元素名+{属性}，但是遇到想要设置例如元素的状态，在被点击前后，悬停等，我们通过伪类来辅助，而不需要设置其他的选择器来设置，这样在我看来使得代码简洁了，查询资料获得的好处是：正确的利用伪元素和伪类能够让我们的html结构更清晰合理，也能在一定程度上减少js对dom的操作！之后再来理解吧。

结构性伪类

结构性伪类是css3新增选择器，利用dom树进行元素过滤，通过文档结构的互相关系来匹配元素，能够减少class和id属性的定义，使文档结构更简洁。顾名思义，结构性伪类，就是对于构成一个元素的结构中的子元素做设置属性，例如:first-child 选择某个元素的第一个子元素；常见的有：

:first-child 选择某个元素的第一个子元素；

:last-child 选择某个元素的最后一个子元素；

:nth-child() 选择某个元素的一个或多个特定的子元素；

:nth-last-child() 选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；

:nth-of-type() 选择指定的元素；

:nth-last-of-type() 选择指定的元素，从元素的最后一个开始计算；

:first-of-type 选择一个上级元素下的第一个同类子元素；

:last-of-type 选择一个上级元素的最后一个同类子元素；

:only-child 选择的元素是它的父元素的唯一一个子元素；

:only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素；

:empty 选择的元素里面没有任何内容。

伪元素

伪元素是对元素中的特定内容进行操作，而不是描述状态。它的操作层次比伪类更深一层，因此动态性比伪类低很多。实际上，伪元素就是选取某些元素前面或后面这种普通选择器无法完成的工作。控制的内容和元素是相同的，但它本身是基于元素的抽象，并不存在于文档结构中！常见的伪元素选择器包括：

:first-letter 选择元素文本的第一个字（母）。

:first-line 选择元素文本的第一行。

:before 在元素内容的最前面添加新内容。

:after 在元素内容的最后面添加新内容。

导航栏=链接列表

导航栏可以作为是用CSS做的实例来理解了，是一个网页最重要的部分了，我认为。导航栏就是链接列表，就是链接的集合。

创建垂直导航栏：

首先我们知道导航栏就是链接的集合，链接一般都是内联形式，所以第一步就需要将链接样式改成块元素，使得链接变成一块可点击链接的区域。其他的部分就是需要对以链接为元素的列表设置颜色等属性。

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #f1f1f1;
}
 
li a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}
 
/* 鼠标移动到选项上修改背景颜色 */
li a:hover {
    background-color: #555;
    color: white;
}

创建水平导航栏

通过上面的学习我们知道，导航栏就是链接作为列表的集合，而列表的li元素是块级元素，因此，如果我们要想实现水平的导航栏，我们需要将li的显示属性改成内联的，示例如下：

			  ul{
    				list-style-type: none;
    				width: 100%;
    				height: 30px;
    				margin: 0;
    				padding: 0;
    				overflow: hidden;
    				background-color: #969896;
    			}
    			li{
    				float: left;
    			}
    			li a{
    				display: block;
    				color: #000000;
    				text-align: center;
    				padding: 10px 20px;
    				text-decoration: none;
    			}
    			li a:hover{
    				background-color: #00FFFF;
    			}