前端面试题 CSS之伪类

CSS3新增伪类

p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。
p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。

:after          在元素之前添加内容,也可以用来做清除浮动。
:before         在元素之后添加内容
:enabled        表单空间可用状态,默认值
:disabled       控制表单控件的禁用状态。
:checked        单选框或复选框被选中。

not,nth-of-type,nth-last-of-type

<style>
    #awesome .favorite:not(#awesome) .highlight {
        color: red;
    }
    #awesome .highlight:nth-of-type(1):nth-last-of-type(1) {
        color: blue;
    }
</style>
<ul class="shopping-list" id="awesome">
    <li><span>Milk</span></li>
    <li class="favorite" id="must-buy"><span class="highlight">Color</span></li>
</ul>

问题:Color的颜色是什么? red

  • not伪类用于排除满足选择器的元素,该例中排除ul子元素中类为favorite,但是id为awesome的元素
  • nth-of-type是相对于父元素,第n个(从前往后)选择元素的样式,nth-last-of-type从后往前
  • 第2段CSS代码成功选中了Color所在的span元素,但是优先级低于第1段代码,因此为红色

参考:notnth-last-of-typenth-of-type

:before,::after 单冒号和双冒号的区别,解释这2个伪元素的作用

双冒号是css3引入的,兼容旧的伪类,用于伪元素,单冒号用于伪类。比如:focus等,对于已有的伪元素,:before和::before作用是一样的。

gzdaijie            updated 2018-05-04 01:47:18

results matching ""

    No results matching ""