首頁 > web前端 > html教學 > CSS生僻问题一网打尽_html/css_WEB-ITnose

CSS生僻问题一网打尽_html/css_WEB-ITnose

WBOY
發布: 2016-06-24 12:02:47
原創
954 人瀏覽過

CSS生僻问题一网打尽

伪类和伪元素

伪类

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

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

链接伪类

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

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

动态伪类

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

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

选择第一个子元素

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

<div> 
登入後複製
</div>
 <p></p> 
登入後複製
</div>
 <ul> 
登入後複製
</div>
 <li href='abc'></li> 
登入後複製
</div>
 <li></li> 
登入後複製
</div>
 </ul> 
登入後複製
</div>
</div> 
登入後複製
</div>

所以

div:first_child 的第一个子元素是

ul:first_child 的第一个子元素是

  • 结合伪类

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

    a:link:hover { }
    登入後複製
    </div>
    a:visited:hover { } 
    登入後複製
    </div>
    a:hover:visited { } 
    登入後複製
    </div>

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

    伪元素

    伪元素选择器

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

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

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

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

    属性选择器

    h1[class] { color:red; } 
    登入後複製
    </div>
    a[href][title] { font-weight:bold; } 
    登入後複製
    </div>

    根据具体属性值进行选择

    a[href="http:a.com"] 
    登入後複製
    </div>
    planet[moons="1"] 
    登入後複製
    </div>

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

    诸如对

    <p class="urgent warning "> </p> 
    登入後複製
    登入後複製
    </div>

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

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

    根据部分属性值进行选择

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

    p[class~="warning"] 
    登入後複製
    </div>

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

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

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

    <p class="urgent warning "> </p> 
    登入後複製
    登入後複製
    </div>
    p.warning.help {} 
    登入後複製
    </div>

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

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

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

    选择器的特殊性

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

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

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

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

    未完,待续...

    相關標籤:
    css
    來源:php.cn
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板