在CSS中应用Class和ID的范围 [英] Apply Range for Class and ID in CSS
本文介绍了在CSS中应用Class和ID的范围的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经使用html和CSS创建了手风琴布局。我将使用JavaScript 在循环中创建许多父行，因此我不知道应用CSS的确切父计数。为了去范围规范像 [class * =tabb]和[id * =tabb] ，我的尝试已在下面的代码注释。到现在为止它不能像手风琴一样工作，它只是打开所有的父行，我无法再折叠它。
伙计们请帮我。 / p>
我的代码：
;！DOCTYPE html>
< html lang =en>
< head>
< meta charset =utf-8/>
< style>
* {
margin：0;
padding：0;
}
header {
background-color：＃212121;
box-shadow：0 -1px 2px＃111111;
display：block;
height：70px;
position：relative;
width：100％;
z-index：100;
}
header h2 {
font-size：22px;
font-weight：normal;
left：50％;
margin-left：-400px;
padding：22px 0;
position：absolute;
width：540px;
}
header a.stuts，a.stuts：visited {
border：none;
text-decoration：none;
color：#fcfcfc;
font-size：14px;
left：50％;
line-height：31px
margin：23px 0 0 110px;
position：absolute;
top：0;
}
头.stuts span {
font-size：22px;
font-weight：bold;
margin-left：5px;
}
.container {
height：600px;
overflow：hidden;
position：relative;
width：100％;
}
.content {
margin：0 auto;
width：900px;
}
。手风琴{
color：＃000000;
margin：50px auto;
position：relative;
width：590px;
}
。手风琴跨度{
display：none
}
.tabs {
background-color：#FFFFFF;
overflow：hidden;
}
.tabs dl dd a {
background-color：＃C8CEFF;
border：1px solid;
border-color：#ccc; border-bottom-color：#aaa;
display：block;
font-size：18px;
line-height：32px;
padding：5px 20px;
text-decoration：none;
filter：progid：DXImageTransform.Microsoft.Gradient（GradientType = 0，StartColorStr =＃ffffffff，EndColorStr =＃ffe0e0e0）;
background-image：-moz-linear-gradient（top，＃fff 0，＃e0e0e0 100％）;
background-image：-ms-linear-gradient（top，＃fff 0，＃e0e0e0 100％）;
background-image：-o-linear-gradient（top，＃fff 0，＃e0e0e0 100％）;
background-image：-webkit-gradient（linear，left top，left bottom，color-stop（0，＃fff），color-stop（100％，＃e0e0e0））;
background-image：-webkit-linear-gradient（top，＃fff 0，＃e0e0e0 100％）;
background-image：linear-gradient（to bottom，＃fff 0，＃e0e0e0 100％）;
-moz-transition：0.3s;
-ms-transition：0.3s;
-o-transition：0.3s;
-webkit-transition：0.3s;
transition：0.3s;
}
.tabs dl dd div {
background-color：#FFF;
height：0;
overflow：hidden;
box-shadow：0 0 1px rgba（0，0，0，1）inset;
-moz-box-shadow：0 0 1px rgba（0，0，0，1）inset;
-webkit-box-shadow：0 0 1px rgba（0，0，0，1）inset;
-webkit-transition：all 0.3s ease-in-out;
-moz-transition：all 0.3s ease-in-out;
-o-transition：all 0.3s ease-in-out;
-ms-transition：all 0.3s ease-in-out;
transition：all 0.3s ease-in-out;
}
.tabs dl dd div p {
color：＃444444;
font-size：13px;
padding：15px;
text-align：justify;
}
.tabs dl dd a：hover {
box-shadow：0px 0px 5px rgba（0，0，0，0.5）inset;
-moz-box-shadow：0px 0px 5px rgba（0，0，0，0.5）inset;
-webkit-box-shadow：0px 0px 5px rgba（0，0，0，0.5）inset;
}
.tabs dl dd a：active {
filter：progid：DXImageTransform.Microsoft.Gradient（GradientType = 0，StartColorStr =＃e6e6e6，EndColorStr =＃dcdcdc）
background-image：-moz-linear-gradient（top，＃e6e6e6 0，＃dcdcdc 100％）;
background-image：-ms-linear-gradient（top，＃e6e6e6 0，＃dcdcdc 100％）;
background-image：-o-linear-gradient（top，＃e6e6e6 0，＃dcdcdc 100％）;
background-image：-webkit-gradient（linear，left top，left bottom，color-stop（0，＃e6e6e6），color-stop（100％，＃dcdcdc））;
background-image：-webkit-linear-gradient（top，＃e6e6e6 0，＃dcdcdc 100％）;
background-image：linear-gradient（to bottom，＃e6e6e6 0，＃dcdcdc 100％）;
}
＃tabb1：target〜.tabs .tabb1 dd div {
height：100px;
}
＃tabb2：target〜.tabs .tabb2 dd div {
height：345px;
}
＃tabb1：target〜.tabs .tabb1 dd a，
＃tabb2：target〜.tabs .tabb2 dd a {
filter：progid：DXImageTransform .Microsoft.Gradient（GradientType = 0，StartColorStr =＃e6e6e6，EndColorStr =＃dcdcdc）;
background-image：-moz-linear-gradient（top，＃e6e6e6 0，＃dcdcdc 100％）;
background-image：-ms-linear-gradient（top，＃e6e6e6 0，＃dcdcdc 100％）;
background-image：-o-linear-gradient（top，＃e6e6e6 0，＃dcdcdc 100％）;
background-image：-webkit-gradient（linear，left top，left bottom，color-stop（0，＃e6e6e6），color-stop（100％，＃dcdcdc））;
background-image：-webkit-linear-gradient（top，＃e6e6e6 0，＃dcdcdc 100％）;
background-image：linear-gradient（to bottom，＃e6e6e6 0，＃dcdcdc 100％）;
box-shadow：0px 0px 5px rgba（0，0，0，0.5）inset;
-moz-box-shadow：0px 0px 5px rgba（0，0，0，0.5）inset;
-webkit-box-shadow：0px 0px 5px rgba（0，0，0，0.5）inset;
}
/ * [id * =tabb]：target〜.tabs [class * =tabb] dd div {
height：100px;
}
[id * =tabb]：target〜.tabs [class * =tabb] dd a {
filter：progid：DXImageTransform.Microsoft.Gradient （GradientType = 0，StartColorStr =＃e6e6e6，EndColorStr =＃dcdcdc）;
background-image：-moz-linear-gradient（top，＃e6e6e6 0，＃dcdcdc 100％）;
background-image：-ms-linear-gradient（top，＃e6e6e6 0，＃dcdcdc 100％）;
background-image：-o-linear-gradient（top，＃e6e6e6 0，＃dcdcdc 100％）;
background-image：-webkit-gradient（linear，left top，left bottom，color-stop（0，＃e6e6e6），color-stop（100％，＃dcdcdc））;
background-image：-webkit-linear-gradient（top，＃e6e6e6 0，＃dcdcdc 100％）;
background-image：linear-gradient（to bottom，＃e6e6e6 0，＃dcdcdc 100％）;
box-shadow：0px 0px 5px rgba（0，0，0，0.5）inset;
-moz-box-shadow：0px 0px 5px rgba（0，0，0，0.5）inset;
-webkit-box-shadow：0px 0px 5px rgba（0，0，0，0.5）inset;
} * /
< / style>
< / head>
< body>
< div class =container>
< div class =accordion>
< span id =tabb1>< / span>
< span id =tabb2>< / span>
< div class =tabs>
< dl class =tabb1>
< dd>
< a href =＃tabb1> Tab＃1< / a>
< div>< p> Tab1< / p>< / div>
< / dd>
< / dl>
< dl class =tabb2>
< dd>
< a href =＃tabb2> Tab＃2< / a>
< div>
< p>
Tab2
< / p>
< / div>
< / dd>
< / dl>
< / div>
< / div>
< / div>
< / body>
< / html>
注意：我的尝试已被评论为
/ * [id * =tabb]：target〜.tabs [class * =tabb] dd div {
height ：100px;
}
[id * =tabb]：target〜.tabs [class * =tabb] dd a {
filter：progid：DXImageTransform.Microsoft.Gradient （GradientType = 0，StartColorStr =＃e6e6e6，EndColorStr =＃dcdcdc）;
background-image：-moz-linear-gradient（top，＃e6e6e6 0，＃dcdcdc 100％）;
background-image：-ms-linear-gradient（top，＃e6e6e6 0，＃dcdcdc 100％）;
background-image：-o-linear-gradient（top，＃e6e6e6 0，＃dcdcdc 100％）;
background-image：-webkit-gradient（linear，left top，left bottom，color-stop（0，＃e6e6e6），color-stop（100％，＃dcdcdc））;
background-image：-webkit-linear-gradient（top，＃e6e6e6 0，＃dcdcdc 100％）;
background-image：linear-gradient（to bottom，＃e6e6e6 0，＃dcdcdc 100％）;
box-shadow：0px 0px 5px rgba（0，0，0，0.5）inset;
-moz-box-shadow：0px 0px 5px rgba（0，0，0，0.5）inset;
-webkit-box-shadow：0px 0px 5px rgba（0，0，0，0.5）inset;
} * /
如何指定范围以实现我的折叠功能？ p>
解决方案
这里我尝试解决您的问题
代码
^ =＃tabb]'，function（）{
if（$（this）.siblings（'div'）。height（）== 0）{
$（this）.siblings 'div'）css（'height'，100）}
else {$（this）.siblings（'div'）。css（'height'，0）}
} ）
这里是更新的小偷
strong>小提琴 http://jsfiddle.net/krunalp1993/9Tpzp/2/
希望它能帮助你。 ：）
I had created accordion layout using html and CSS. I will create many parent row in an loop using JavaScript, so i don't know the exact parent count to apply CSS. To went for range specification like [class*="tabb"] and [id*="tabb"], MY try has been commented in the below code. As of now it not working as accordion way, its simply opens all parent row and I'm unable to collapse it again.
Guys please help me out from this.
My Try code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
*{
margin:0;
padding:0;
}
header {
background-color:#212121;
box-shadow: 0 -1px 2px #111111;
display:block;
height:70px;
position:relative;
width:100%;
z-index:100;
}
header h2{
font-size:22px;
font-weight:normal;
left:50%;
margin-left:-400px;
padding:22px 0;
position:absolute;
width:540px;
}
header a.stuts,a.stuts:visited{
border:none;
text-decoration:none;
color:#fcfcfc;
font-size:14px;
left:50%;
line-height:31px;
margin:23px 0 0 110px;
position:absolute;
top:0;
}
header .stuts span {
font-size:22px;
font-weight:bold;
margin-left:5px;
}
.container {
height: 600px;
overflow: hidden;
position: relative;
width: 100%;
}
.content {
margin:0 auto;
width:900px;
}
.accordion {
color: #000000;
margin: 50px auto;
position: relative;
width: 590px;
}
.accordion span {
display: none
}
.tabs {
background-color: #FFFFFF;
overflow: hidden;
}
.tabs dl dd a {
background-color: #C8CEFF;
border: 1px solid;
border-color:#ccc;border-bottom-color:#aaa;
display: block;
font-size: 18px;
line-height: 32px;
padding: 5px 20px;
text-decoration: none;
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffffff,EndColorStr=#ffe0e0e0);
background-image: -moz-linear-gradient(top,#fff 0,#e0e0e0 100%);
background-image: -ms-linear-gradient(top,#fff 0,#e0e0e0 100%);
background-image:-o-linear-gradient(top,#fff 0,#e0e0e0 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(100%,#e0e0e0));
background-image: -webkit-linear-gradient(top,#fff 0,#e0e0e0 100%);
background-image: linear-gradient(to bottom,#fff 0,#e0e0e0 100%);
-moz-transition: 0.3s;
-ms-transition: 0.3s;
-o-transition: 0.3s;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.tabs dl dd div {
background-color: #FFF;
height: 0;
overflow: hidden;
box-shadow: 0 0 1px rgba(0, 0, 0, 1) inset;
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 1) inset;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 1) inset;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.tabs dl dd div p {
color: #444444;
font-size: 13px;
padding: 15px;
text-align: justify;
}
.tabs dl dd a:hover {
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
}
.tabs dl dd a:active {
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#e6e6e6,EndColorStr=#dcdcdc);
background-image: -moz-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
background-image: -ms-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
background-image: -o-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#e6e6e6),color-stop(100%,#dcdcdc));
background-image: -webkit-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
background-image: linear-gradient(to bottom,#e6e6e6 0,#dcdcdc 100%);
}
#tabb1:target ~ .tabs .tabb1 dd div {
height: 100px;
}
#tabb2:target ~ .tabs .tabb2 dd div {
height: 345px;
}
#tabb1:target ~ .tabs .tabb1 dd a,
#tabb2:target ~ .tabs .tabb2 dd a {
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#e6e6e6,EndColorStr=#dcdcdc);
background-image: -moz-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
background-image: -ms-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
background-image: -o-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#e6e6e6),color-stop(100%,#dcdcdc));
background-image: -webkit-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
background-image: linear-gradient(to bottom,#e6e6e6 0,#dcdcdc 100%);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
}
/*[id*="tabb"]:target ~ .tabs [class*="tabb"] dd div {
height: 100px;
}
[id*="tabb"]:target ~ .tabs [class*="tabb"] dd a {
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#e6e6e6,EndColorStr=#dcdcdc);
background-image: -moz-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
background-image: -ms-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
background-image: -o-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#e6e6e6),color-stop(100%,#dcdcdc));
background-image: -webkit-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
background-image: linear-gradient(to bottom,#e6e6e6 0,#dcdcdc 100%);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
}*/
</style>
</head>
<body>
<div class="container">
<div class="accordion">
<span id="tabb1"></span>
<span id="tabb2"></span>
<div class="tabs">
<dl class="tabb1">
<dd>
<a href="#tabb1">Tab #1</a>
<div><p>Tab1</p></div>
</dd>
</dl>
<dl class="tabb2">
<dd>
<a href="#tabb2">Tab #2</a>
<div>
<p>
Tab2
</p>
</div>
</dd>
</dl>
</div>
</div>
</div>
</body>
</html>
Note: My try has been commented as below
/*[id*="tabb"]:target ~ .tabs [class*="tabb"] dd div {
height: 100px;
}
[id*="tabb"]:target ~ .tabs [class*="tabb"] dd a {
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#e6e6e6,EndColorStr=#dcdcdc);
background-image: -moz-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
background-image: -ms-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
background-image: -o-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#e6e6e6),color-stop(100%,#dcdcdc));
background-image: -webkit-linear-gradient(top,#e6e6e6 0,#dcdcdc 100%);
background-image: linear-gradient(to bottom,#e6e6e6 0,#dcdcdc 100%);
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
-moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5) inset;
}*/
How can i specify the range to achieve my accordion functionality ?
解决方案
Here I have tried to solve your issue
Code
$(document).on('click','a[href^="#tabb"]',function(){
if($(this).siblings('div').height() == 0){
$(this).siblings('div').css('height',100) }
else{$(this).siblings('div').css('height',0)}
})
Here is updated fiddle
Fiddle http://jsfiddle.net/krunalp1993/9Tpzp/2/
Hope it helps you . :)
这篇关于在CSS中应用Class和ID的范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
