CSS3：仅具有HTML样式的目标

Question

我面临着要解决的挑战。

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

是否可以仅在元素的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