浅谈css伪类和伪元素的区别、优先级

html-css016

浅谈css伪类和伪元素的区别、优先级,第1张

css的伪类和伪元素在我们平常的工作中有着很广泛的应用,比如:hover、:active、:after等等,但是大部分人可能并不清楚伪类和伪元素的具体区别,所以我们今天来简单的梳理一下。 css伪类的定义 由于css2.1中伪类和伪元素的定位并无区别,所以我们直接引用css3中对于伪类的定义(引入来源w3c)定义:引入伪类概念是用于选择不存在于DOM树中的信息或那些不能够通过常规css选择器得到的信息。(比如:hover,:active就属于不在于dom中的信息,nth-child()属于不能够通过常规css选择器得到的信息) 伪类由“冒号”(:)+伪类的名称和伪类括号内的可选参数组成。(伪类括号内的可选参数指:nth-child(n)里的n) 所有的常规选择器都可以在任何位置使用伪类。伪类名称不区分大小写。一些伪类是互斥的,另一些伪类可以同时应用于同一个元素。为了满足用户在操作DOM时产生的DOM结构改变,伪类可以是动态的。 css伪元素的定义定义:伪元素用于创建和访问文档中不存在的抽象元素。例如,文档语言不提供访问元素内容的第一个字母或第一行的机制。使用伪元素可以访问到这些。伪元素还可以让我们访问文档中原本不存在的抽象元素(例如,::before和::after)。 伪元素由两个冒号(::)后跟伪元素的名称组成。 ::两个冒号这种格式,是为了区别伪类和伪元素。与现有样式表的兼容性,考虑到兼容性有部分伪元素可以同时使用1个或者2个冒号,(即:first-line,:first-letter,:before和:after)。对于css3中引入的新伪元素,则必须要使用2个冒号。 每个选择器只能出现一个伪元素,并且伪元素要位于选择器的后面。注意:此规范的未来版本可能允许每个选择器使用多个伪元素。 css伪类和伪元素的区别 伪类和伪元素的语法结构不同,伪类为冒号(:)加伪类名称,伪元素为两个冒号(::)加伪元素名称,不过为了考虑兼容性(css2.1中伪类和伪元素都是一个冒号),部分伪元素也支持一个冒号的写法,例如(:after,:before,:first-line,:first-letter)。 一个选择器只能使用一个伪元素,但是可以使用多个伪类。 伪类和伪元素的优先级不同,大部分伪类为0-1-0,伪元素则为0-0-1。参考 css选择器的优先级 https://www.chentugen.com/archives/12/

伪类选择器,伪类和伪元素的区别, css3中伪类选择器和伪物件选择器的区别

伪类 按现在的规范应当书写成 :weilei伪元素 按现在的规范 应当书写成 ::weiyuansu

但是 以前规范不明确的时候 伪元素 和 伪类 都是写成 :weiyuansu :weilei

为了相容过去的写法

所以 你的伪元素 写成一个引号的形式 也是可以被解析的

伪元素主要有:E:first-letter/E::first-letter E:first-line/E::first-line E:before/E::before E:after/E::after E::placeholder E::selection

伪类主要有:E:link E:visited E:hover E:active E:focus E:lang(fr) E:not(s) E:root E:first-child E:last-child E:only-child E:nth-child(n) E:nth-last-child(n) E:first-of-type E:last-of-type E:only-of-type E:nth-of-type(n) E:nth-last-of-type(n) E:empty E:checked E:enabled E:disabled E:target @page:first @page:left @page:right

单冒号 双冒号 主要是为了区别 伪元素还是伪类

的伪类选择器

<style type=text/css>

/*

伪类选择器:伪类选择器就是对元素处于某种状态下进行样式的。

注意:

1. a:hover 必须被置于 a:link 和 a:visited 之后

2. a:active 必须被置于 a:hover 之后

*/

a:link{color:#F00} /* 没有被点选过---红色 */

a:visited{color:#0F0} /* 已经被访问过的样式---绿色 */

a:hover{color:#00F} /* 滑鼠经过的状态---蓝 */

a:active{color:#FF0}

</style>

应用 程式码:

<!DOCTYPE PUBLIC "-W3CDTD XHTML 1.0 TransitionalEN" ":w3./TR/x1/DTD/x1-transitional.dtd">

<xmlns=":w3./1999/x">

<head>

<meta -equiv="Content-Type" content="text/charset=utf-8" />

<title>无标题文件</title>

</head>

<style type=text/css >

table{

background-color:#CCC

border-collapse:collapse

border:3px

}

tr:hover{

background-color:#06F

}

</style>

<body>

<table border=1px width=400px height=300px align=center >

<tr>

<th>姓名</th>

<th>成绩</th>

<th>人品</th>

</tr>

<tr>

<td>张三</td>

<td>98</td>

<td>差</td>

</tr>

<tr>

<td>李四</td>

<td>50</td>

<td>极好</td>

</tr>

<tr>

<td>综合测评</td>

<td colspan="2">不错</td>

</tr>

</table>

</body>

</>

怎么用伪类选择器nth-frist-child

伪类选择器nth-frist-child,应该是伪类选择器 nth-child(),其在IE6-8和FF3.0-浏览器不支援,CSS3中nth-of-type(n)(比如nth-of-type(1))这个特殊的类选择符可以样式更加个性的标题和段落等,不过,目前nth-of-type(n)只支援火狐3、opera、safari和chrome等部分浏览器。

例子:

li:nth-child(3){background:orange}/*把第3个li的背景设为橙色*/

li:nth-child(3n){background:orange}/*把第3、第6、第9、…、所有3的倍数的li的背景设为橙色*/

li:nth-child(n+3){background:orange}/*选择从第3个元素后面的li背景设为橙色*/

li:nth-child(-n+3){background:orange}/*选择从第3个元素前面的li把背景设为橙色*/

li:nth-child(3n+1){background:orange}/*这种方法是实现隔几选一的效果*/

标记选择器、类选择器、id选择器、伪类选择器的先后顺序是什么?

1、id选择器;

2、类选择器;

3、标记选择器;

4、最后是伪选择器。

id选择器(#myid);

类选择器(.myclassname);

标签选择器(div,h1,p);

相邻选择器(h1+p);

子选择器(ul <li);

后代选择器(li a);

万用字元选择器(*);

属性选择器(a[rel="external"]);

伪类选择器(a:hover,li:nth-child)。