关于CSS3中的ul，li的使用伪类选测器的总结
在CSS3的无序列表&ul&&li&&/li&&/ul&在设计样式的时候，可以使用伪类样式进行设计样式。例如：&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&CSS3_ul练习&/title&
li:nth-child(1)
background-color: #1b6d85;
li:nth-child(2)
background-color: #761c19;
li:nth-child(3){
background-color: #c1e2b3;
li:nth-child(4){
background-color: #d58512;
&li&列表1&/li&
&li&列表1&/li&
&li&列表1&/li&
&li&列表2&/li&
&li&列表3&/li&
&li&列表4&/li&
&li&列表1&/li&
&li&列表2&/li&
&li&列表3&/li&
&li&列表4&/li&
&li&列表1&/li&
&li&列表2&/li&
&li&列表3&/li&
&li&列表4&/li&
&/html&这样做就可以将&li&的前四行加上样式，但是如果要让所有的都加上样式的话改怎么做呢，将CSS样式复制粘贴？？？？这么做少了可以但是多了就不行了，所以在此介绍伪类属性nth-child（n）中的n=αn+β,所以此操作可做如下改正：&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&CSS3_ul练习&/title&
/*αn+β*/
li:nth-child(4n+1)
background-color: #1b6d85;
li:nth-child(4n+2)
background-color: #761c19;
li:nth-child(4n+3){
background-color: #c1e2b3;
li:nth-child(4n){
background-color: #d58512;
/*only-child当子元素只有一个的时候可以用only-child代替其他的first或者last-chiled操作*/
li:only-child{
background-color: #222222;
&li&列表1&/li&
&li&列表1&/li&
&li&列表1&/li&
&li&列表2&/li&
&li&列表3&/li&
&li&列表4&/li&
&li&列表1&/li&
&li&列表2&/li&
&li&列表3&/li&
&li&列表4&/li&
&li&列表1&/li&
&li&列表2&/li&
&li&列表3&/li&
&li&列表4&/li&
结果如下图：
没有更多推荐了，
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！一枚默默无闻的小程序猿～ qq联系：
HTML/CSS: 浅谈&a&标签及伪类选择器
1.基础知识
“超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。”
而对于超文本，简单的说便是通过一个特定的标识符，定位到文本所在的地方，然后将其链接到本页面中。详细请参考：
相对路径：就是指由这个文件所在的路径引起的跟其它文件（或文件夹）的路径关系。简单的说便是以当前文件为参考点而继续补充的路径。例如：在apple文件夹中有index.html、image文件夹，image文件夹下有apple.gif。那么，在index.html中apple.gif的相对路径即为
image/apple.gif而无需重复apple文件夹：/apple/image/apple.gif(绝对路径)。
绝对路径：绝对路径是指目录下的绝对位置，直接到达目标位置。
URL： Uniform Resource Locator，统一资源定位符，是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。URL主要包含三部分：协议、域名、路径.
在HTML中，&a&标签可以实现超链接，它的语法非常简单(不加属性)：
&a href="url"&Link text&/a&
href的键值可以是相对路径，可以是绝对路径，也可以是URL。
相对路径与绝对路径的区别由上文的定义便可轻易区分开来，显然是选择相对路径。也许你会有疑惑：服务器一般是通过绝对路径来获取相应文档，那么为什么相对路径也能实现这一目标呢？原因很简单，这是浏览器的功劳—浏览器在后台会根据相对路径和所单击页面的路径创建一个绝对路径。
搞明白了相对路径与绝对路线，又有一个问题出现了：是采取URL路径呢还是使用相对路径方便呢？
规则：在web中，相对路径只用来链接同一网站内的页面，而URL通常用来链接其它网站。
因为，如果全部是URL，会有以下问题：
(1)URL很长，不容易编辑，而且也会影响HTML的可读性；
(2)当以URL的形式链接A网站时，如果改变了A网站的地址，一旦有多处该链接，那么需要改动的地方就有很多，大大增加了工作量。但是如果使用的是相对路径，那么有些情况下对源代码的影响几乎为0.
接下来谈谈&a&标签的另一个属性：target
使用target属性可以实现在新窗口打开该链接:
href="url" target="_blank"&
target的键值不一定是“_blank”，也可以是其他的内容。例如设置的键值是“page1”，那么所有设置target键值为“page1”的超链接都会在同一个窗口打开。
了解完基础知识，我们来了解它的应用。在此处我主要是想阐述“把图片作为链接”的两种实现方法：
方法一：嵌套标签
href="url"& src="xxx.gif" /&&
方法二：设置背景(css)
height:100
background-image: url("xxx.gif");
3.伪类选择器
什么是伪类？伪类就是与类一样能够定义样式，但却不是真正意义上的类。
不是真正意义上的类？也就是说你可以在css中定义它的样式，就像定义类一样，但是你在HTML中不能找到该伪类的踪影。
HTML中没有伪类的踪影，那它是如何实现样式的呢？浏览器会在后台向这些伪类增加和删除元素。
对于&a&元素，我们可以用“多重人格”来形容它。对于该标签，它一共有五种状态：:link, :visited, :hover, :focus, :active.
“:link”可以用于声明未访问状态链接的样式；
“:visited”可以用于声明已经访问链接的样式；
“:hover”可以用于声明鼠标悬停在链接上的样式；
“:focus”可以用于声明浏览器焦点悬停在链接上的样式(通过键盘选择链接)；
“:active”可以用于声明浏览器点击链接的样式。
注意：冒号前后不要出现空格。
以上内容皆为本人观点，欢迎大家提出批评和指导，我们一起探讨！
没有更多推荐了，
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！Be stronger！
【a】标签的伪类选择器
今天我们来学习一下a标签的4个伪类选择器：
①a:link选择器：修改从未被访问过的a标签样式。
②a:visited选择器：修改已经被访问过的a标签样式。
③a:active选择器：修改链接被长按时的样式。
④a:hover选择器：修改鼠标悬停在a标签上的样式。
举个栗子：
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&a标签伪类选择器&/title&
&style type="text/css"&
.box1:link{
.box2:visited{
.box3:active{
.box4:hover{
font-weight:
&a href="#" class="box1"&明天&/a&
&a href="#" class="box2"&你好&/a&
&a href="#" class="box3"&我们&/a&
&a href="#" class="box4"&在路上&/a&
&/html&大家可以粘贴代码试一试，很容易就能理解这些伪类选择器。
------------------------------------分割线----------------------------------
a标签为类选择器的注意点：
①a标签的伪类选择器如果一起出现，那么一定要按照一个严格的标准实现：
先编写未点击状态:link→再编写已点击状态:visited→再编写鼠标悬停状态:hover→最后编写长按状态:active
如果顺序被颠倒，那么可能会没有效果。
编写的顺序要遵守爱恨原则：l(link)o v(visited) e、h(hover) a(active) t e。
②如果默认状态的样式和被访问过的样式一样，那么可以简写成a{color:...;}
---------------------------------分割线--------------------------------------
下面来做一个关于a标签伪类选择器的练习（制作一个导航条）：
&!DOCTYPE html&
&html lang="en"&
&meta charset="UTF-8"&
&title&a标签伪类选择器之导航条制作&/title&
&style type="text/css"&
height: 30
background-color:
margin-top: 50
text-align:
display: inline-
width: 100
line-height: 30
/*border: 1px solid #000;*/
font-family: "微软雅黑";
a:visited{
background-color: #
&a href="#"&链接&/a&
&a href="#"&链接&/a&
&a href="#"&链接&/a&
&a href="#"&链接&/a&
&a href="#"&链接&/a&
&a href="#"&链接&/a&
&a href="#"&链接&/a&
&a href="#"&链接&/a&
&a href="#"&链接&/a&
大家可以复制粘贴一下代码自己看一下效果（但是一般情况下 导航条的制作是用ul li标签来做的。这里我们为了图个方便，就直接用a标签来做）。
最后再特别提醒一下！
一定要注意：如果a标签的四个伪类选择器全部都写上了，一定要根据爱恨原则的顺序进行陈列。
每天进步一点点
没有更多推荐了，
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！a标签的四个伪类使用顺序
上面是伪类的正确顺序，简称 lvha(love-ha)。你一直知道这个顺序但是为什么这样呢？原理是怎么样的？
a:link{color:#f30;}
a:visited{color:#000;}
a:hover{color:#}
a:active{color:#f99;}
首先伪类的特殊性（应用优先级）是同样的，所以后出现的伪类会覆盖先出现的伪类（同时激活）
lvha 规则是由于CSS特殊性导致，css特殊性有一个按顺序的规则（同一条css规则，后出现会覆盖前面的同样规则）
在这里，比如把hover放在active后面，那么实际你在激活（active）链接的时候就触发了hover伪类，hover在后面覆盖了active的颜色，所以始终无法看到active的颜色
如果把visited放在hover的后面，那么已经访问过的链接始终触发visited伪类，根据第一条会覆盖hover里面的颜色。
其实 link visited 这两个伪类，并不需要顺序关系。（他们两的位置可以交换）
没有更多推荐了，
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！标记选择器，类选择器，id选择器，伪类选择器的优先级顺序_百度知道
标记选择器，类选择器，id选择器，伪类选择器的优先级顺序
我有更好的答案
这个东西没有顺序，它的顺序在于你对它放置的位置#s {color:#}.r {color:#000;}放置的位置越往下，权重越高下边的这个颜色就会是黑色&div id=&s& class=&r&&你好&/div&
题是这样的:列举你知道的CSS选择器及其用法，并按优先顺序排序。
1.id选择器（#myid）2.类选择器（.myclassname）3.标签选择器（div,h1,p）4.相邻选择器（h1+p）5.子选择器（ul & li）6.后代选择器（li a）7.通配符选择器（*）8.属性选择器（a[rel=&external&]）9.伪类选择器（a:hover,li:nth-child）
这个排序是根据什么呢？
佰佳网络技术总监
1、最高级的是标签选择器（就是你说的标记选择器）2、其次是ID选择器3、然后是类选择器注意，如果CSS语句后面有 !important，代表最高优先级
首先说下曾经踩过的坑,p:nth-child(1)
匹配的是任何元素的第一子元素p ,(之前把它理解成p下的一个元素)p:nth-of-type(1)
匹配的是任何元素的所有子元素的第一个p&div&&p&3&/p&&span&4&/span&&p&5&/p&&span&6&/span&&/div&p:nth-child(1)
匹配3，如果要匹配第一span 只能是 span:nth-of-type谈到CSS选择器可能大家最熟悉与常用的就是 标签、id、class选择器了，从效率上来说它们三个无疑最高的选择，我们确实也应优先使用，但在实际开发中，我们可能还有一些友好的选择器，下面列举一些常用css选择器（注意只包括常用有代表性的选择器，部分少用的未列举）：1、基本选择器，效率最高;
id 、class、标签、* 通用选择器2、组合选择器，效率相对来基本选择器来说较低，‘h1,p多类’、‘div
p后代’、‘div&p子’、‘div~p 同级’、‘div+p相邻（div同级的后一个元素）’选择器3、属性选择器，效率相对来说又低一层，E[arr]、E[att^=”val”]、E[att$=”val”]、E[att*=”val”]4、伪类选择器，效率最低，:hover
:first-child :checked :enabled :nth-child(n) :nth-of-type(n)(E:after E:before E:first-letter E:first-line伪元素）选择器优性能及优化详见 ： ,里面写得相当详细(包括CSS解析 )，感谢博主！！！下面着重介绍选择器优先级，我们都是站在巨人的肩膀上做了一些自己的见解，帮助大家更好的理解它之前看了网上的其它一些博客，感觉讲得都很繁琐，计算什么权重，感觉都挺官方的，我在这里介绍一些常见的、通俗易懂的方法，&div class=&min-screen& id=&test& data-index=&tt&&&/div&优先级 行内style&id&class&标签，
这是网上博客中一些比较常见的1、important，大家都知道它的优先级最高，但我在class和id选择器中都设置它，则浏览器会使用哪个呢（答案是 id），在important存在的情况下，它会跳过important，从优先级表从下往下比，找到class与id 并比较优先级2、div{background-color:}body div{background:}背景色是black3、.min-screen{background-color:}#test{background:}div[data-index='tt']{background:}显示yellow4、.min-screen{background-color:}div[data-index='tt']{background:}div:nth-child(1){background:}显示palegreen， 当加上 #test{background:} ，则显示blue5、.min-screen{background-color:}#test{background:}.min-screen:hover{background:}当鼠标移动到div上的时候并不会显示 pink（因为id比class优先级更高），当改为#test:hover{background:} 时候则会显示pink还有很多组合，和一些其它情况，在这里我把一些常用的列举出来，感兴趣的可以自己组合选择器再研究div{width:200height:200background-color:}.min-screen{background-color:}#test{background:}div[data-index='tt']{background:}div:hover{background:}div:nth-child(1){background:}div:last-child{background:#f0ad4e;}body div{background:}*{background:}p:nth-of-type(1){color:}总结: 1、优先级：important&行内style&id&结构性伪类（eg
:nth-child() ：nth-of-type()）&属性&类&标签&通用2、伪类：hover它的优先级还和最前面的关键字有关（会先比较关键字优先级），上面第五点有详细说明3、精确匹配优先级更高，上面第二点有说明4、important凌驾于一切之上（尽量少使用），当两个选择器都存在它时，则比较选择第下个优先级高的，上面第一点有说明5、动态编写css,在.css文件中所有的属性都无法传参编写，可在html 的head中建立style标签，通过js动态编写style中的样式
选择器的优先级顺序id&级别最高其次是伪类然后是类最低的是元素下图实例：请看红圈位置不管代码插入的顺序在第几行，他都会按照我数字标注的顺序执行同类别选择器执行顺序在我们布局的时候，很常用的就是，一个div使用了多个类，他到底会优先执行那个呢？我分别设置了三个类：30行.aaa{背景红色}31行.bbb{背景黄}32行.ccc{背景蓝}执行结果优先执行了蓝色，我们在调换下代码顺序看看30行.ccc{背景蓝}31行.bbb{背景黄}32行.aaa{背景红}执行结果从以上测试我们得出，在设置同一类选择器的情况下，优先级是以代码插入顺序有关的，越靠后的优先级就越高。原因：在浏览器加载的过程中，是以从上到下的顺序执行的，在加载到最后一个的时候会把之前的替换掉
其他1条回答
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。