CSS生僻问题一网打尽

伪类和伪元素

伪类

何为伪类? 像类不是类,不是自己声明的类(不写样式也存在).

对伪元素的认识在早期网页上的超链接.链接(锚啊)用下划线标出来,点击后链接变紫色,鼠标悬上去变色.

链接伪类

css2.1 定义了两个只应用于超链接(拥有 href 属性的所有 a 元素)的伪类.

伪类名	描述
:link	:visited
指示作为超链接(href)并指向一个未访问地址的所有的锚(注意不是所有的锚,是未访问过的,但是有的浏览器可能不是这么做的)	指示已访问过的所有的锚

动态伪类

伪类名	描述
:focus	当前拥有焦点(可用tab切换)的元素,能接受输入或能被激活的元素
:hover	鼠标正停留在上面的元素(不只限于超链接)
:active	指示被输入或激活的元素(不只限于超链接)

动态伪类可以应用到任何元素,对非链接的样式应用很有用.

选择第一个子元素

还有另外一个静态伪类 :first_chilid 来选择元素的第一个子元素.

<div>

 <p></p>

 <ul>

 <li href='abc'></li>

 <li></li>

 </ul>

</div>

所以

div:first_child 的第一个子元素是 <p></p>

ul:first_child 的第一个子元素是 <li href='abc'></li>

结合伪类

在 CSS2.1 中,可以在同一个选择器中结合使用伪类.

a:link:hover { }

a:visited:hover { }

a:hover:visited { }

顺序是不重要的,效果是一样的.

伪元素

伪元素选择器

就像伪类为锚指定幻像类一样,伪元素能够在文档中输入假想的元素.从而得到某种效果.

CSS2.1 中弄了四个伪元素, 设置首字母样式的(:first-letter),设置第一行的(:first-line),设置之前(:before),设置之后(:after)的.

说到,:after,:before,在content属性"自是必不可少的".

而且,在CSS3中,伪元素由一个 : 升为 ::,意在与伪类进行区分,但是目前还在兼容单冒号,官方推荐用俩冒号.

属性选择器

h1[class] { color:red; }

a[href][title] { font-weight:bold; }

根据具体属性值进行选择

a[href="http:a.com"]

planet[moons="1"]

这货对这种简单的属性值进行匹配尚可.

诸如对

<p class="urgent warning "> </p>

使用时要小心,它的属性匹配没有多类选择那样自然, 它实际上就是一个完全串匹配.所以,该有的空格还得有.

如果用的不不方便,可以用下面这个

根据部分属性值进行选择

对上面的例子就可这样用:

p[class~="warning"]

相信你已经发现了,这货可以替代类选择器啊.

单类选择没必要这么矫情,对于多类选择是很有必要的,

你可知,在IE7之前的版本中,IE是不能正确处理多类选择器的.

<p class="urgent warning "> </p>

p.warning.help {}

通常可以认为,这个选择器只将匹配class包含warning和help的那些p元素.

可是在IE7之前的版本中,p.warning是可以用的,但是p.waring.help是会匹配class为help的所有p元素的,因为help在选择器中最后出现的,完全没有warning什么事.

所以,用属性选择器,可以绕开这问题.

选择器的特殊性

选择器的特殊性由选择器本身的组件确定. 特殊性值表述为4个部分,形如 0.0.0.0, 虽不是数,以数看待.

一个选择器的特殊性如下:

对于选择器中给定的各个 # ID属性值,加分 0,1,0,0;
对于选择器中给定的类属性值(.class),属性选择(xxx [atr=’’])或者伪类,加分 0,0,1,0
对于选择器中给定的各个元素(htm body div span)和伪元素,加 0,0,0,1. 据文档显示,伪元素加分从CSS2.1开始
结合符(+,,>,且完全没有特熟悉) 和通配符(\*,对特殊性的贡献值为0,0,0,0).

说多了浪费,上例子

选择器	特殊性获值
h1 { }	0,0,0,1
p em {}	0,0,0,2
.grap { }	0,0,1,0
*.grap { }	0,0,1,0
p.bright em.dark { }	0,0,2,2
#id { }	0,1,0,0
div#header *[attr] { }	0,1,1,1

看过了这些,这四位中的第一位还未曾谋面,有谁这么厉害? 内联样式,写在 html 行内的.

算这些,是用在多个选择器争夺相同的元素时,看谁的能力强.

未完,待续...