（重点章节复习以及代码调整笔记）选择器：伪类和伪元素选择器（部分）
1、代码的编写除了可以把样式一样的使用同样的类选择器，还可以把各个选择器合在一起，写同样的样式语句。可以避免样式的重复书写。
例如以下可以把多个选择器写在一起。
.nav-item a:hover,
.dd a:hover,
.info-title .fr:hover,
.more:hover,
.application-item a:hover,
.link-block a:hover,
.link-item a:hover {
color: #fca242;
transform: translate(2px,2px);
text-shadow: 1px 1px 5px #fca242;
}
2、伪类选择器：感觉知己这一块用得不好。只会用first-child和last-child，和a标签的几个伪类选择器。其实还有一些也是很好用的，比如以下选择器：
选择器 :before和:after这一块还不是很会用
.link-block h2 .split::before { content: " / " }
(第一份页面中的有过的一个例子，我写的是在html中用一个span标签放斜杠，今天看了凤婷的代码才发现原来可以这样写。对比了一下她的css代码足足少了我的一百行，我还要更好的调整自己的代码结构才可以。)
:before能够完成其他选择器无法完成的一下事情，能指定元素的前面添加内容。假设：要讲top放在某些段落之前，可以写一下句子
p.tip:before {content：”top” }
:after 和 :before 是相反的
在css3中写 ::before ::after
选择器 ::section{ color:red; background-color:balck; }
Section是针对访问者在网上选中的项目，当鼠标单击并拖动文本时显示出来的文本样式。比如选中一小段文字时，该段文字会变色，背景颜色为也会改变。就是用section控制的。
如：
P:: section{
color:red;
background-color:pink;
}
Section只能有color和background-color这两个属性
选择器、nth-child（） 在第一个页面中的导航栏中的图标插入中还可以有不同的方法来编写。
|
使用nth-child （复制自陈凤婷的代码） |
直接使用类选择器 （我自己的代码） |
|
Html代码：
<ul class="fr"> <li class="nav-item selected"><a href="#"><span class="image"></span>首页</a></li> <li class="nav-item"><a href="#"><span class="image"></span>关于我们</a></li> <li class="nav-item"><a href="#"><span class="image"></span>案例</a></li> <li class="nav-item"><a href="#"><span class="image"></span>服务</a></li> <li class="nav-item"><a href="#"><span class="image"></span>观点</a></li> <li class="nav-item"><a href="#"><span class="image"></span>招聘</a></li> <li class="nav-item"><a href="#"><span class="image"></span>联系</a></li> </ul> |
Html代码
<nav class="nav-link"> <ul > <li><a href="#"><div class="icon contect"></div>联系</a></li> <li><a href="#"><div class="icon employee"></div>招聘</a></li> <li><a href="#"><div class="icon view"></div>观点</a></li> <li><a href="#"><div class="icon service"></div>服务</a></li> <li><a href="#"><div class="icon case"></div>案例</a></li> <li><a href="#"><div class="icon about"></div>关于我们</a></li> <li><a href="#"><div class="icon home"></div>首页</a></li> </ul> </nav> |
|
Css代码
.nav-item:nth-child(1) span { width: 28px; height: 23px; background-position: 0 -132px; } .nav-item:nth-child(2) span { width: 23px; height: 23px; background-position: 0 -64px; } .nav-item:nth-child(3) span { width: 23px; height: 23px; background-position: 0 -87px; } .nav-item:nth-child(4) span { width: 17px; height: 21px; margin-bottom: 9px; background-position: 0 -22px; } .nav-item:nth-child(5) span { width: 28px; height: 22px; margin-bottom: 8px; background-position: 0 -110px; } .nav-item:nth-child(6) span { width: 29px; height: 21px; margin-bottom: 9px; background-position: 0 -155px; } .nav-item:nth-child(7) span { width: 13px; height: 22px; margin-bottom: 8px; background-position: 0 0; } |
Css代码：
.home{ width: 28px; height: 23px; background-position: 0 0; } .nav-link li:hover .home { width: 28px; height: 23px; background-position: 0 -30px; } .about{ width: 23px; height: 23px; background-position: -30px 0; } .nav-link li:hover .about { width: 23px; height: 23px; background-position: -30px -30px; } .case{ width: 23px; height: 23px; background-position: -60px 0; } .nav-link li:hover .case { width: 23px; height: 23px; background-position: -60px -30px; } .service{ width: 17px; height: 21px; margin-left: 40px; background-position: -90px 0; } .nav-link li:hover .service{ width: 17px; height: 21px; background-position: -90px -30px; } .view{ width: 29px; height: 22px; background-position: -120px 0; } .nav-link li:hover .view { width: 29px; height: 22px; background-position: -120px -30px; } .employee{ width: 29px; height: 21px; background-position: -150px 0; } |
其实要说两个都是可以的。并且我觉得我自己的那种方法比较简单明了一点。就是多会了一种方法。说不定之后会用到。
书本《css秘笈第3版》第三章：选择器：明确设置哪些样式
版权声明：此文为作者原创，未经作者同意，不得私自转载。http://www.cnblogs.com/lal-fighting/
