小番茄的CSS伪类笔记汇总（一）

头像
白霸天
    阅读 6 分钟
    1

    希望能通过这写这么一个系列的文章来督促和重新学习 css 的知识，也希望能帮助刚踏上前端之路的学弟学妹们全面一些的学习css知识,这个系列主要是从 css 的 api 的翻译笔记 css Api 文档

    :active

    :active 伪类匹配被用户激活的元素，运行当元素被浏览器检测到时，能给我们反馈。和鼠标互动时，激活代表的是鼠标按压和放开之间的这段时间。:active伪类也能用来匹配和键盘的互动。这个伪类时常被用户 HTML 元素的 a 标签 和 button 标签，但 不是被限制了只能用于这些元素，你还能运用在其它的元素上。

    这个伪类的样式可能会被其它的伪类（如 :link ,:hover. :visited）的样式所覆盖，更加样式覆盖原则，如果你想吧:active的样式运用到元素上，你需要吧:active的样式定义写到所有的其它连接伪类的后面，顺序如下 :link — :visited — :hover — :active.

    使用方法:

    HTML

<body>
   <h1>:active CSS selector example</h1>
   <p>The following link will turn lime during the time you click it and release the click: <a href="#">Mozilla Developer Network</a>.</p>
</body>



CSS

body { background-color: #ffffc9 }
a:link { color: blue } /* unvisited links */
a:visited { color: purple } /* visited links */
a:hover { font-weight: bold } /* user hovers */
a:active { color: lime } /* active links */

    :any

    （还是个实验阶段的伪类选择器,在不同的浏览器中请加上不同的前缀去使用）:any伪类，就能够让你迅速的构造一系列类似的嵌套选组合选择器。

    语法

     :-moz-any( selector[, selector]* )
 :-webkit-any( selector[, selector]* )

    一个选择器，可能是一个简单的选择器，或则是复式选择器包含了 css3 的其它子选择器

    栗子

下面的 CSS

                                        /* 3 deep (or more) unordered lists use a square */
                                        ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
                                        ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
                                        ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
                                        ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
                                        ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
                                        ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
                                        menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
                                        menu ol menu, menu ul menu, menu menu menu, menu dir menu,
                                        menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
                                        dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
                                        dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
                                        dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
                                                                                                                                                                                                                                                list-style-type: square;
                                        }
可以用这个css 写法代替

                                        /* 3 deep (or more) unordered lists use a square */
                                        :-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) ul,
                                        :-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) menu,
                                        :-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) dir {
                                                                                                                                                                                                                                                list-style-type: square;
                                        }
                                        
但是不能写成下面这样

                                        :-moz-any(ol, ul, menu, dir) :-moz-any(ol, ul, menu, dir) :-moz-any(ul, menu, dir) {
                                                                                                                                                                                                                                                list-style-type: square;
                                        }

    在处理 HTML5 sections and headings 的样式的时候是十分有用的，因为 <section>, <article>, <aside>, and <nav> 时常要被嵌套，要一个个的添加样式真的是体力活。

    举个栗子，如果没有:any伪类，要给所有不同层级的h1都加上样式，十分繁琐

    /* Level 0 */
h1 {
                    font-size: 30px;
}
/* Level 1 */
section h1, article h1, aside h1, nav h1 {
                    font-size: 25px;
}
/* Level 2 */
section section h1, section article h1, section aside h1, section nav h1,
article section h1, article article h1, article aside h1, article nav h1,
aside section h1, aside article h1, aside aside h1, aside nav h1,
nav section h1, nav article h1, nav aside h1, nav nav h1, {
                    font-size: 20px;
}
/* Level 3 */
/* ... don't even think about it*/

    如果使用:any，则变得十分简单

    /* Level 0 */
h1 {
                    font-size: 30px;
}
/* Level 1 */
:-moz-any(section, article, aside, nav) h1 {
                    font-size: 25px;
}
/* Level 2 */
:-moz-any(section, article, aside, nav)
:-moz-any(section, article, aside, nav) h1 {
                    font-size: 20px;
}
/* Level 3 */
:-moz-any(section, article, aside, nav)
:-moz-any(section, article, aside, nav)
:-moz-any(section, article, aside, nav) h1 {
                    font-size: 15px;
}

    但是有一点还是得说的是：把:any伪类使用在选择器的右边会减低选择器的匹配速度

    .a > :-moz-any(.b, .c)

    慢于

    .a > .b, .a > .c

    但下面的选择器依旧很快

    :-moz-any(.a, .d) > .b, :-moz-any(.a, .d) > .c

    :checked

    :checked伪类元素选择器，代表着单选框［<input type="radio">］，复选框［<input type="checkbox">］，或者是选项[<option> in a <select>]元素被选取的元素。用户可以通过在元素上的点击时间来改变元素状态，这样:checked伪类选择器就不会指向被改变状态的元素。所以，我们可以通过:checked伪类来选择被选取元素

     语法

 input:checked {
    margin-left: 25px;
    border: 1px solid blue;
 }
 
 标准 语法

 element:checked { style properties }
 

 选择器

 /* 任何可疑被选择的元素 */
 :checked {
    width: 50px;
    height: 50px;
 }

 /* 针对于单选元素 */
 input[type="radio"]:checked {
   margin-left: 25px;
 }

 /* 针对于复选元素 */
 input[type="checkbox"]:checked {
   display: none;  
 }

 /* 针对于选择元素 */
 option:checked {
   color: red;
 }
 
 input[type="radio"]:checked
 代表着页面中所有的被选中的单选元素

 input[type="checkbox"]:checked
 代表着页面中所有的复选被选中倒元素
 
 option:checked
 代表页面中所有被选中的选择元素

    :default伪类

    default 伪类能选取一些列类似元素中默认的对象。在能交互元素中，像button，input中在页面打开状态处于默认选取状态的元素，我们可以通过 ：default伪类来选择这个默认选择的元素。

      css 语法：
    :default { /* style properties */ }
  
  例如

    :default
    {
         background-color: lime;
    }
    ...where...

    <form method="get">
        <p><input type="submit" id="submit1"></p>
        <p><input type="submit" id="submit2"></p>
        <p><input type="reset"></p>
    </form>

    上面的栗子中，把表单中的默认提交按钮的背景色设置成 lime （青橙绿色）

    css伪类译文
    白霸天
    2.2k 声望568 粉丝
    « 上一篇
    [译] Angular 编程风格引导（二）
    下一篇 »
    小番茄的CSS笔记汇总（二）

    引用和评论

    推荐阅读
    头像
    参与筹办「D2前端技术论坛」是一种怎样的体验？

    白霸天赞 4阅读 2.7k评论 5

    头像
    CSS团队协作规范

    寒青赞 35阅读 3.1k

    头像
    前端开发工具

    寒青赞 15阅读 4.1k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 11阅读 1.8k

    头像
    纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

    XboxYan赞 11阅读 1.4k

    头像
    CSS 实现带tooltip的slider

    XboxYan赞 6阅读 938

    头像
    CSS炫酷光晕按钮特效

    南城FE赞 3阅读 858

    0 条评论
    得票最新