html - CSS3 :target with only HTML style

Question

我有一个挑战要解决。

我正在尝试创建一个页面，其中包含用于在内容之间切换的选项卡，而不使用 Javascript 或内联/外部 CSS。我想使用 :target 函数，但在这种情况下我可以使用 CSS 的绝对唯一方法是通过 style=""来自 HTML。

是否可以仅在元素的 HTML 样式标签内使用 CSS3 来在页面之间切换(就像您在选项卡和 JavaScript 中看到的那样)？

从字面上看，我什至不能使用 <style> .我可以使用 CSS 的唯一方法是通过 <div style="">或者通过另一个 HTML 标签的样式。

我知道这听起来很荒谬，但我想这是一种挑战。只是好奇这是否可能。

好的，所以我想使用的代码如下:

<div id="container">
    <p style="text-align:center;">CSS3 TABS. <b><i>NO JAVASCRIPT </i></b></p>
    <div id="tabs">
        <ul>
            <li id="One"><a href="#One" id="first">One</a>
                <div>
                    <p>p1</p>
                </div>
            </li>
            <li id="Two"><a href="#Two" id="sec">Two</a>
                <div>
                    <p>p2</p>
                </div>
            </li>
            <li id="Three"><a href="#Three" id="third">Three</a>
                <div>
                    <p>p3</p>
                </div>
            </li>
        </ul>
    </div>
</div>

<strong>CSS</strong>
li div {
    -moz-transition: all 0.5s ease 0s;
    -webkit-transition: all 0.5s ease 0s;
    border: 1px solid #888888;
    float: left;
    opacity: 0;
    padding: 0 15px;
    position: absolute;
    visibility: hidden;
    width: 250px;
    left:0;
    background: -moz-linear-gradient(center top , #E3E3E3, #FFFFFF 85px) repeat scroll 0 0 transparent;
}

#tabs li a{
    background: -moz-linear-gradient(center top , #E3E3E3, #FFFFFF 18px) repeat scroll 0 0 transparent;
    border: 1px solid #888888;
    margin: 0 3px 0 0;
    padding: 5px 25px;
    position: relative;
    z-index:1;
    font-size: 14px;
    border-radius:10px 10px 0 0;
    display:block;
    top:1px;
}

#One:target div, #Two:target div, #Three:target div{
    opacity:1;
    visibility:visible;
}

到目前为止，我已经转换了除 :target 之外的所有内容部分。

<div id="container">
    <p style="text-align: center;">Test</p>
    <div id="tabs">
        <ul>
            <li id="One">
            <a href="#One" id="first"
            style="
            background: -moz-linear-gradient(center top , #E3E3E3, #FFFFFF 18px) repeat scroll 0 0 transparent;
            border: 1px solid #888888; margin: 0 3px 0 0; padding: 5px 25px; position: relative; z-index:1;
            font-size: 14px; border-radius:10px 10px 0 0; display:block; top:1px;
            ">
            One</a>
                <div style="-moz-transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; border: 1px solid #888888;
                float: left; opacity: 0; padding: 0 15px; position: absolute; visibility: hidden; width: 250px; left:0;
                background: -moz-linear-gradient(center top , #E3E3E3, #FFFFFF 85px) repeat scroll 0 0 transparent;">
                    <p>Page 1</p>
                </div>
            </li>
            <li id="Two">
            <a href="#Two" id="sec"
            style="
            background: -moz-linear-gradient(center top , #E3E3E3, #FFFFFF 18px) repeat scroll 0 0 transparent;
            border: 1px solid #888888; margin: 0 3px 0 0; padding: 5px 25px; position: relative; z-index:1;
            font-size: 14px; border-radius:10px 10px 0 0; display:block; top:1px;
            ">
            Two</a>
                <div style="-moz-transition: all 0.5s ease 0s; -webkit-transition: all 0.5s ease 0s; border: 1px solid #888888;
                float: left; opacity: 0; padding: 0 15px; position: absolute; visibility: hidden; width: 250px; left:0;
                background: -moz-linear-gradient(center top , #E3E3E3, #FFFFFF 85px) repeat scroll 0 0 transparent;">
                    <p>Page 2</p>
                </div>
            </li>
        </ul>
    </div>
</div>

Answer 1

如果您在 html 中使用样式，则只有两种方法 <style> ... </style>或 <div style="..."> ... </div>没有别的办法..

1. http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_style
2. http://www.w3schools.com/html/tryit.asp?filename=tryhtml_bodybgstyle