嘿,所有人都在试图看看这是否可能。
我要做的是定义一个所有其他元素都属于的ID。我真的不知道这会被称为什么官方因此很难谷歌:o)
示例:
<div id="ContentArea">
<div class="input-group">
<input type="text" pattern="@.+" required>
<label>Twitter</label>
<span>
<svg class="twitter-svg" enable-background="new 0 0 56.693 56.693" height="56.693px" id="Layer_1" version="1.1" viewBox="0 0 56.693 56.693" width="56.693px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M52.837,15.065c-1.811,0.805-3.76,1.348-5.805,1.591c2.088-1.25,3.689-3.23,4.444-5.592c-1.953,1.159-4.115,2-6.418,2.454 c-1.843-1.964-4.47-3.192-7.377-3.192c-5.581,0-10.106,4.525-10.106,10.107c0,0.791,0.089,1.562,0.262,2.303 c-8.4-0.422-15.848-4.445-20.833-10.56c-0.87,1.492-1.368,3.228-1.368,5.082c0,3.506,1.784,6.6,4.496,8.412 c-1.656-0.053-3.215-0.508-4.578-1.265c-0.001,0.042-0.001,0.085-0.001,0.128c0,4.896,3.484,8.98,8.108,9.91 c-0.848,0.23-1.741,0.354-2.663,0.354c-0.652,0-1.285-0.063-1.902-0.182c1.287,4.015,5.019,6.938,9.441,7.019 c-3.459,2.711-7.816,4.327-12.552,4.327c-0.815,0-1.62-0.048-2.411-0.142c4.474,2.869,9.786,4.541,15.493,4.541 c18.591,0,28.756-15.4,28.756-28.756c0-0.438-0.009-0.875-0.028-1.309C49.769,18.873,51.483,17.092,52.837,15.065z"/>
</svg>
</span>
</div>
</div>
所以不要在CSS中为上面做这个:
#ContentArea .input-group {
position: relative;
margin: 25px 0px;
}
#ContentArea .input-group label {
position: absolute;
top: 50%;
left: 0px;
margin-left: 10px;
-webkit-transform: translateY(-50%);
-webkit-transition: margin 0.3s, color 0.3s;
font-size: 20px;
z-index: -1;
font-family: 'Bubbler One', sans-serif;
color: #55acee;
}
etc etc...
我想看看是否有可能这样做:
#ContentArea {
.input-group {
position: relative;
margin: 25px 0px;
}
.input-group label {
position: absolute;
top: 50%;
left: 0px;
margin-left: 10px;
-webkit-transform: translateY(-50%);
-webkit-transition: margin 0.3s, color 0.3s;
font-size: 20px;
z-index: -1;
font-family: 'Bubbler One', sans-serif;
color: #55acee;
}
etc.. etc..
}
注意我是如何在所有“子”元素周围定义 ContentArea 的。但是,正如您现在可能已经猜到的那样 - 这不起作用。
css有这样的东西吗?