CSS生僻问题一网打尽_html/css_WEB-ITnose-HTML-Tutorial-php.cn

CSS生僻问题一网打尽

伪类和伪元素

伪类

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

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

链接伪类

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

伪类名描述

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

动态伪类

伪类名描述

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

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

选择第一个子元素

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

<div>

Nach dem Login kopieren

</div>

 <p></p>

Nach dem Login kopieren

</div>

 <ul>

Nach dem Login kopieren

</div>

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

Nach dem Login kopieren

</div>

 <li></li>

Nach dem Login kopieren

</div>

 </ul>

Nach dem Login kopieren

</div>

</div>

Nach dem Login kopieren

</div>

所以

div:first_child 的第一个子元素是

ul:first_child 的第一个子元素是

结合伪类

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

a:link:hover { }

Nach dem Login kopieren

</div>

a:visited:hover { }

Nach dem Login kopieren

</div>

a:hover:visited { }

Nach dem Login kopieren

</div>

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

伪元素

伪元素选择器

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

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

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

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

属性选择器

h1[class] { color:red; }

Nach dem Login kopieren

</div>

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

Nach dem Login kopieren

</div>

根据具体属性值进行选择

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

Nach dem Login kopieren

</div>

planet[moons="1"]

Nach dem Login kopieren

</div>

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

诸如对

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

Nach dem Login kopieren

</div>

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

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

根据部分属性值进行选择

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

p[class~="warning"]

Nach dem Login kopieren

</div>

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

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

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

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

Nach dem Login kopieren

</div>

p.warning.help {}

Nach dem Login kopieren

</div>

通常可以认为,这个选择器只将匹配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 行内的.

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

未完,待续...

Verwandte Etiketten：

css

Quelle：php.cn

Vorheriger Artikel：.net三步配置错误页面，让你的网站远离不和谐的页面_html/css_WEB-ITnose Nächster Artikel：Hello World…_html/css_WEB-ITnose

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors