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

如何在使用HTML5和CSS3的标记中减少CSS ID和类的使用?,html,css,Html,Css,如何在使用HTML5和CSS3的标记中减少CSS ID和类的使用 哪些HTML5标记和CSS3属性可以减少类和ID的需要 现在我知道了 <header> <nav> <section> <article> <aside> <footer> <time> <figure> <dia

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

哪些HTML5标记和CSS3属性可以减少类和ID的需要

现在我知道了

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

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


您最好使用。

这样可以考虑使用更少的ID和带有冒号的HTML5标记来引用这些邻居。这是来自混合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;}

IDs比这些方法更有效: