CSS生僻问题一网打尽
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 行内的.
算这些,是用在多个选择器争夺相同的元素时,看谁的能力强.
