css3[补1] - 基于 css3 的简易 tab menu（关于选择器的问题） 

<body>
    <main>
        <h2>CSS Tabs</h2>
        <input id="tab1" type="radio" name="tabs" checked>
        <label for="tab1">tab1</label>
        <input id="tab2" type="radio" name="tabs">
        <label for="tab2">tab2</label>
        <input id="tab3" type="radio" name="tabs">
        <label for="tab3">tab3</label>
        <input id="tab4" type="radio" name="tabs">
        <label for="tab4">tab4</label>
        <section id="content1">
            <h3>tab1</h3>
            <p>content1</p>
        </section>
        <section id="content2">
            <h3>tab2</h3>
            <p>content2</p>
        </section>
        <section id="content3">
        <h3>tab3</h3>
            <p>content3</p>
        </section>
        <section id="content4">
            <h3>tab4</h3>
            <p>content4</p>
        </section>
    </main>
</body>
<style>
        body {
            background: #FFEFD3;
            font-family: "Open Sans", "Arial";
        }
        main {
            background: #FFF;
            width: 500px;
            margin: 50px auto;
            padding: 10px 30px 80px;
            box-shadow: 0 3px 5px rgba(0,0,0,0.2);
        }
        p {
            font-size: 13px;
        }
        input, section {
            clear: both;
            padding-top: 10px;
            display: none;
        }
        label {
            font-weight: bold;
            font-size: 14px;
            display: block;
            float: left;
            padding: 10px 30px;
            border-top: 2px solid transparent;
            border-right: 1px solid transparent;
            border-left: 1px solid transparent;
            border-bottom: 1px solid #DDD;
        }
        label:hover {
            cursor: pointer;
            text-decoration: underline;
        }
        #tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3, #tab4:checked ~ #content4 {
            display: block;
        }
        input:checked + label {
            border-top-color: #FFB03D;
            border-right-color: #DDD;
            border-left-color: #DDD;
            border-bottom-color: transparent;
            text-decoration: none;
        }
</style>

核心：

#tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3, #tab4:checked ~ #content4 {
            display: block;
        }
  • CSS3 element1 ~ element2 选择器：

　　　  element1 ~ element2 选择器 element1 之后出现的所有 element2。

　　　  两种元素必须拥有相同的父元素，但是 element2 不必直接紧随 element1。

  • CSS element + element 选择器：

　　　element + element 选择器用于选取第一个指定的元素之后（不是内部）紧跟的元素。

  • (补)

　　HTML <label> 标签，为 input 元素定义标注（标记）。

　　label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

　　<label> 标签的 for 属性应当与相关元素的 id 属性相同。

　　提示: "for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。

posted @ 2017-02-20 17:24  。娴  阅读(323)  评论(0)  编辑  收藏  举报