CSS 学习笔记之CSS Selector

时间：2017-08-15

用于定义被访问的锚链样式，常见使用方法如下：

<div>
    <div id="text-one">
        <p>这是第一个文本段</p>
    </div>
    <div id="text-two">
        <p>这是第二个文本段</p>
    </div>
</div>

<style>
    div:target {
        color: red;
    }
</style>

注意：当我们激活锚链时（url中包含 #text-one 或 #text-two），对应的 div 内的元素字体会被渲染为红色！

CSS3 UI 元素状态伪类选择器

:enabled

用于定义元素的 enabled 时的样式，常见使用方式如下：

<div>
    <input type="text">
</div>

<style>
    input:enabled {
        background: #ffff00;
    }
</style>

注意：元素默认状态为 enabled

:disabled

用于定义元素处于禁用状态时的样式，常见使用方法如下：

<div>
    <input type="text" disabled="disabled"/>
</div>

<style>
    input:disabled {
        background: #dddddd;
    }
</style>

:checked

用于定义元素被选中时的样式，常见使用方式如下：

<div>
    <form>
        <input type="checkbox" />
    </form>
</div>

<style>
    input:checked {
        color: green;
    }
</style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

共5页:

5/5下一篇

上一篇：CSS+HTML自定义checkbox效果的实例代码 下一篇：详解CSS3中强大的filter(滤镜)属性

CSS 学习笔记之CSS Selector

相关文章

最新文章