Question

我正在尝试创建一个显示嵌套标签的Polymer应用程序。 Iceweasel 35.0和Chromium 40.0.2214.91似乎没有对伪类:first-child进行CSS选择。此外，相同版本的Chromium用于选择:target一段时间但突然停止工作。

聚合物的问题或我的代码出错了吗？

index.html如下：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
        <link rel="import" href="bower_components/polymer/polymer.html">
        <title>My Tabs</title>
        <style>
            body {
                font-size:62.5%;
                z-index: 0;
            }
        </style>
    </head>
    <body>
        <polymer-element name="my-tabs" attributes="tabs" noscript>
            <template id="t">
                <link rel="stylesheet" href="tabs.css">
                <template bind="{{tabs}}">
                    <article class="tabs">
                        <template repeat>
                            <section id="tab{{id}}">
                                <h2><a href="#tab{{id}}">{{TabTitle}}</a></h2>
                                <template if="{{!children}}">
                                    {{TabContent}}
                                </template>
                                <template ref="t" bind="{{children as tabs}}"></template>
                            </section>
                        </template>
                    </article>
                </template>
            </template>
        </polymer-element>
        <my-tabs></my-tabs>
    </body>
    <script>
        document.querySelector("my-tabs").tabs=
        [
            {
                TabTitle:"Tab 1"
                ,id:1
                ,children:[
                    {
                        TabTitle:"Tab 11"
                        ,id:11
                        ,TabContent:"Content 11"
                    }
                    ,{
                        TabTitle:"Tab 12"
                        ,id:12
                        ,TabContent:"Content 12"
                    }
                ]
            }
            ,{
                TabTitle:"Tab 2"
                ,id:2
                ,TabContent:"Content 2"
            }
            ,{
                TabTitle:"Tab 3"
                ,id:3
                ,children:[
                    {
                        TabTitle:"Tab 31"
                        ,id:31
                        ,TabContent:"Content 31"
                    }
                ]
            }
        ];
    </script>
</html>

tabs.css如下：

article.tabs
{
    position: relative;
    display: block;
    width: 100%;
    height: 20em;
    margin: 0 auto;
}

article.tabs section
{
    position: absolute;
    display: block;
    top: 1.8em;
    left: 0;
    bottom:0;
    right:0;
    background-color: #ddd;
    box-shadow: 0 3px 3px rgba(0,0,0,0.1);
    z-index: 0;
}

article.tabs section:first-child
{
    z-index: 1;
}

article.tabs section h2
{
    position: absolute;
    font-size: 1.4em;
    width: 120px;
    height: 1.8em;
    top: -1.8em;
    left: 10px;
    padding: 0;
    margin: 0;
    color: #999;
    background-color: #ddd;
}

article.tabs section:nth-child(2) h2
{
    left: 132px;
}

article.tabs section:nth-child(3) h2
{
    left: 254px;
}

article.tabs section:nth-child(4) h2
{
    left: 386px;
}

article.tabs section h2 a
{
    display: block;
    width: 100%;
    line-height: 1.8em;
    text-align: center;
    text-decoration: none;
    color: inherit;
    outline: 0 none;
}

article.tabs section:target,
article.tabs section:target h2
{
    color: #333;
    background-color: #fff;
    z-index: 2;
}

以下屏幕截图显示，当页面准备就绪时，所有标签中的z-index为0。因此，会显示Tab 3而不是Tab 1。

Incorrect screenshot

以下屏幕截图显示伪类选择:first-child已成功应用于Tab 1。因此，与z-index相关联的Tab 1在页面加载后为1，因此Tab 1正确显示在其他标签页上，正如预期的那样 pure html：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>CSS Tests</title>
        <style>
            body {
                font-size:62.5%;
                color: #333;
                background-color: #e5eaff;
                margin: 10px;
                z-index: 0;
            }
        </style>
        <link rel="stylesheet" href="tabs.css">
    </head>
    <body>
            <article class="tabs">
                <section id="tab1">
                    <h2><a href="#tab1">Tab 1</a></h2>
                    <article class="tabs">
                        <section id="tab11">
                            <h2><a href="#tab11">Tab 11</a></h2>
                            Content 11
                        </section>
                        <section id="tab12">
                            <h2><a href="#tab12">Tab 12</a></h2>
                            Content 12
                        </section>
                    </article>
                </section>
                <section id="tab2">
                    <h2><a href="#tab2">Tab 2</a></h2>
                </section>
                <section id="tab3">
                    <h2><a href="#tab3">Tab 3</a></h2>
                    <article class="tabs">
                        <section id="tab31">
                            <h2><a href="#tab31">Tab 31</a></h2>
                            Content 31
                        </section>
                        <section id="tab32">
                            <h2><a href="#tab32">Tab 32</a></h2>
                            Content 32
                        </section>
                    </article>
                </section>
            </article>
    </body>
</html>

index.html without using Polymer

Polymer：无法选择伪类：target

0 个答案: