如何使用HTML5和CSS3减少标记中CSS ID和类的使用?

时间:2011-05-19 02:27:22

标签: css html5 css3

如何使用HTML5和CSS3减少标记中CSS ID和类的使用?

哪些HTML5标签和CSS3属性可以减少对类和ID的需求

目前我知道

       <header>
        <nav>
        <section>
        <article>
        <aside>
        <footer>
    <time>
    <figure>
    <dialog>
    <mark>
<figcaption>
<hgroup>

2 个答案:

答案 0 :(得分:5)

可以使用较少的ID来考虑这些引用邻居的方式,并使用冒号来考虑html 5标记。这来自Mix 11视频。

CSS弹出菜单:

.menu > li > ul {display: none;}
.menu > li:hover > ul { display:block;}

依赖内容:

.faq > div {display:none;}
.faq > div:target {display:block;}

验证:

:valid, :invalid, :required, :optional, :in-range, :out-of-range, 
:read-only, :read-write

#signup input:focus:required:valid + .val .invalid {display:none;}
#signup input:focus:required:invalid + .val .valid {display:none;}

动画:

.faq > div {display:none;}
.faq > div:target {display:block;position:relative;
       -webkit-animation:throb 1.5s infinite;}

答案 1 :(得分:4)

伪类可以做到这一点,例如:first-child:last-child,后者是CSS3中的新功能。

你最好拥有look here