如何解决与CSS选择器相关的查询
我正在处理以下显示进度的代码:
ol.progress[data-steps="2"] li {
width: 49%;
}
ol.progress[data-steps="3"] li {
width: 33%;
}
ol.progress[data-steps="4"] li {
width: 24%;
}
ol.progress[data-steps="5"] li {
width: 19%;
}
ol.progress[data-steps="6"] li {
width: 16%;
}
ol.progress[data-steps="7"] li {
width: 14%;
}
ol.progress[data-steps="8"] li {
width: 12%;
}
ol.progress[data-steps="9"] li {
width: 11%;
}
.progress {
width: 100%;
list-style: none;
list-style-image: none;
margin: 20px 0 20px 0;
padding: 0;
}
.progress li {
float: left;
text-align: center;
position: relative;
font-family: sans-serif;
}
.progress .name,.progress .description {
display: block;
vertical-align: bottom;
text-align: center;
color: black;
opacity: 0.3;
}
.progress .name {
font-size: 1.5em;
margin-top: 1em;
margin-bottom: 0.5em;
}
.progress .step {
border: 3px solid #b6b6b6;
background-color: #b6b6b6;
border-radius: 50%;
line-height: 1.2;
width: 1.2em;
height: 1.2em;
display: inline-block;
z-index: 0;
}
.progress .step:before {
content: "";
display: block;
background-color: #b6b6b6;
border: 3px transparent;
height: 0.2em;
width: 100%;
position: absolute;
top: 0.6em;
left: -50%;
z-index: -2;
}
.progress .step:after {
content: "";
display: block;
background-color: #1876d5;
border: 3px transparent;
height: 0.35em;
width: 0;
position: absolute;
top: 0.55em;
left: 50%;
z-index: -1;
}
.progress li:first-of-type .step:before {
display: none;
}
.progress li:last-of-type .step:after {
display: none;
}
.progress .done .step {
background-color: #1876d5;
border: 3px solid #1876d5;
}
.progress .done .step:after {
width: 100%;
transition: width 2s ease;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<ol class="progress" id="test" data-steps="4">
<li class="done">
<span class="step"></span>
<span class="name">Step 1</span>
<span class="description">Foo</span>
</li>
<li class="done">
<span class="step"></span>
<span class="name">Step 2</span>
<span class="description">Bar</span>
</li>
<li class="">
<span class="step"></span>
<span class="name">Step 3</span>
<span class="description">Baz</span>
</li>
<li class="">
<span class="step"></span>
<span class="name">Step 4</span>
<span class="description">Abc</span>
</li>
</ol>
</body>
</html>
我用上面的代码得到了这个output。使用CSS,我尝试排除第二步和第三步之间的蓝色,以使其保持灰色(类似于第三步和第四步之间的蓝色)。我尝试了以下不起作用的方法:
.progress .step:last-of-type .step:before {
display: none;
}
是否有任何类似类型的CSS可用于实现此功能。谢谢。
解决方法
如果我理解您的回答,那么只需使用nth-child
选择器即可排除第二步和第三步之间的蓝色。
以下是示例
ol.progress[data-steps="2"] li {
width: 49%;
}
ol.progress[data-steps="3"] li {
width: 33%;
}
ol.progress[data-steps="4"] li {
width: 24%;
}
ol.progress[data-steps="5"] li {
width: 19%;
}
ol.progress[data-steps="6"] li {
width: 16%;
}
ol.progress[data-steps="7"] li {
width: 14%;
}
ol.progress[data-steps="8"] li {
width: 12%;
}
ol.progress[data-steps="9"] li {
width: 11%;
}
.progress {
width: 100%;
list-style: none;
list-style-image: none;
margin: 20px 0 20px 0;
padding: 0;
}
.progress li {
float: left;
text-align: center;
position: relative;
font-family: sans-serif;
}
.progress .name,.progress .description {
display: block;
vertical-align: bottom;
text-align: center;
color: black;
opacity: 0.3;
}
.progress .name {
font-size: 1.5em;
margin-top: 1em;
margin-bottom: 0.5em;
}
.progress .step {
border: 3px solid #b6b6b6;
background-color: #b6b6b6;
border-radius: 50%;
line-height: 1.2;
width: 1.2em;
height: 1.2em;
display: inline-block;
z-index: 0;
}
.progress .step:before {
content: "";
display: block;
background-color: #b6b6b6;
border: 3px transparent;
height: 0.2em;
width: 100%;
position: absolute;
top: 0.6em;
left: -50%;
z-index: -2;
}
.progress .step:after {
content: "";
display: block;
background-color: #1876d5;
border: 3px transparent;
height: 0.35em;
width: 0;
position: absolute;
top: 0.55em;
left: 50%;
z-index: -1;
}
.progress li:first-of-type .step:before {
display: none;
}
/*=========== added =====================*/
.progress li:nth-child(2) .step:before {
display: none;
}
.progress li:nth-child(2) .step:after {
display: none;
}
/*=========== added =====================*/
.progress li:last-of-type .step:after {
display: none;
}
.progress .done .step {
background-color: #1876d5;
border: 3px solid #1876d5;
}
.progress .done .step:after {
width: 100%;
transition: width 2s ease;
}
<ol class="progress" id="test" data-steps="4">
<li class="done">
<span class="step"></span>
<span class="name">Step 1</span>
<span class="description">Foo</span>
</li>
<li class="done">
<span class="step"></span>
<span class="name">Step 2</span>
<span class="description">Bar</span>
</li>
<li class="">
<span class="step"></span>
<span class="name">Step 3</span>
<span class="description">Baz</span>
</li>
<li class="">
<span class="step"></span>
<span class="name">Step 4</span>
<span class="description">Abc</span>
</li>
</ol>
如果您希望动态化,可以使用.done
类名来控制步骤,而不会陷入nth-child
选择器的麻烦。
下面是一个示例,其中li
个元素都不具有.done
类名
ol.progress[data-steps="2"] li {
width: 49%;
}
ol.progress[data-steps="3"] li {
width: 33%;
}
ol.progress[data-steps="4"] li {
width: 24%;
}
ol.progress[data-steps="5"] li {
width: 19%;
}
ol.progress[data-steps="6"] li {
width: 16%;
}
ol.progress[data-steps="7"] li {
width: 14%;
}
ol.progress[data-steps="8"] li {
width: 12%;
}
ol.progress[data-steps="9"] li {
width: 11%;
}
.progress {
width: 100%;
list-style: none;
list-style-image: none;
margin: 20px 0 20px 0;
padding: 0;
}
.progress li {
float: left;
text-align: center;
position: relative;
font-family: sans-serif;
}
.progress .name,.progress .description {
display: block;
vertical-align: bottom;
text-align: center;
color: black;
opacity: 0.3;
}
.progress .name {
font-size: 1.5em;
margin-top: 1em;
margin-bottom: 0.5em;
}
.progress .step {
border: 3px solid #b6b6b6;
background-color: #b6b6b6;
border-radius: 50%;
line-height: 1.2;
width: 1.2em;
height: 1.2em;
display: inline-block;
z-index: 0;
}
.progress .step:before {
content: "";
display: block;
background-color: #b6b6b6;
border: 3px transparent;
height: 0.2em;
width: 100%;
position: absolute;
top: 0.6em;
left: -50%;
z-index: -2;
}
.progress .done .step:after {
content: "";
display: block;
background-color: #1876d5;
border: 3px transparent;
height: 0.35em;
width: 0;
position: absolute;
top: 0.55em;
left: 50%;
z-index: -1;
}
.progress li:first-of-type .step:before,.progress li:last-of-type .step:after {
display: none;
}
.progress .done .step {
background-color: #1876d5;
border: 3px solid #1876d5;
}
.progress .done .step:after {
width: 100%;
transition: width 2s ease;
}
<ol class="progress" id="test" data-steps="4">
<li class="">
<span class="step"></span>
<span class="name">Step 1</span>
<span class="description">Foo</span>
</li>
<li class="">
<span class="step"></span>
<span class="name">Step 2</span>
<span class="description">Bar</span>
</li>
<li class="">
<span class="step"></span>
<span class="name">Step 3</span>
<span class="description">Baz</span>
</li>
<li class="">
<span class="step"></span>
<span class="name">Step 4</span>
<span class="description">Abc</span>
</li>
</ol>
下面是一个示例,其中第一和第三 li
具有.done
类名
ol.progress[data-steps="2"] li {
width: 49%;
}
ol.progress[data-steps="3"] li {
width: 33%;
}
ol.progress[data-steps="4"] li {
width: 24%;
}
ol.progress[data-steps="5"] li {
width: 19%;
}
ol.progress[data-steps="6"] li {
width: 16%;
}
ol.progress[data-steps="7"] li {
width: 14%;
}
ol.progress[data-steps="8"] li {
width: 12%;
}
ol.progress[data-steps="9"] li {
width: 11%;
}
.progress {
width: 100%;
list-style: none;
list-style-image: none;
margin: 20px 0 20px 0;
padding: 0;
}
.progress li {
float: left;
text-align: center;
position: relative;
font-family: sans-serif;
}
.progress .name,.progress li:last-of-type .step:after {
display: none;
}
.progress .done .step {
background-color: #1876d5;
border: 3px solid #1876d5;
}
.progress .done .step:after {
width: 100%;
transition: width 2s ease;
}
<ol class="progress" id="test" data-steps="4">
<li class="done">
<span class="step"></span>
<span class="name">Step 1</span>
<span class="description">Foo</span>
</li>
<li class="">
<span class="step"></span>
<span class="name">Step 2</span>
<span class="description">Bar</span>
</li>
<li class="done">
<span class="step"></span>
<span class="name">Step 3</span>
<span class="description">Baz</span>
</li>
<li class="">
<span class="step"></span>
<span class="name">Step 4</span>
<span class="description">Abc</span>
</li>
</ol>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。