我有三個標簽,在我的頁面上使用html css的內容下有earch標簽。目前所有的標簽都是相同的顏色。我已經試過了,但沒有得到解決,我希望每個標簽在點擊時有不同的顏色,我希望在選定的標簽上有箭頭,請檢查代碼,提前感謝。
。span class="hljs-selector-class">.tab-wrap {
-webkit-transition: 0.3s box-shadow ease;
transition: 0.3s box-shadow ease;
max-width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
position: relative;
list-style: none;
background-color: #fff;
margin: 40px 0;
}
.tab-sii {
display: none;
}
.tab-sii:checked:nth-of-type(1)~ . tab__content:nth-of-type(1) {。
opacity: 1;
-webkit-transition: 0.5s不透明性緩和,0.2s轉換緩和。
transition: 0.5s不透明性輕松進入,0.2s轉換輕松。
position: relative;
top: 0;
z-index: 1;
-webkit-transform: translateY(0px)。
transform: translateY(0px)。
text-shadow。0 0 0。
}
.tab-sii:checked:nth-of-type(2)~ . tab__content:nth-of-type(2) {
opacity: 1;
-webkit-transition: 0.5s不透明性緩和,0.2s轉換緩和。
transition: 0.5s不透明性輕松進入,0.2s轉換輕松。
position: relative;
top: 0;
z-index: 100;
-webkit-transform: translateY(0px)。
transform: translateY(0px)。
text-shadow。0 0 0。
}
.tab-sii:checked:nth-of-type(3)~ . tab__content:nth-of-type(3) {
opacity: 1;
-webkit-transition: 0.5s不透明性緩和,0.2s轉換緩和。
transition: 0.5s不透明性輕松進入,0.2s轉換輕松。
position: relative;
top: 0;
z-index: 1;
-webkit-transform: translateY(0px)。
transform: translateY(0px)。
text-shadow。0 0 0。
}
.tab-sii:checked:nth-of-type(4)~ . tab__content:nth-of-type(4) {
opacity: 1;
-webkit-transition: 0.5s不透明性緩和,0.2s轉換緩和。
transition: 0.5s不透明性輕松進入,0.2s轉換輕松。
position: relative;
top: 0;
z-index: 100;
-webkit-transform: translateY(0px)。
transform: translateY(0px)。
text-shadow。0 0 0。
}
.tab:first-of-type:not(:last-of-type) label{
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
. tab-sii:not(:first-type)。 not(:last-of-type) label {
border-radius: 0;
}
.tab-sii:last-of-type:not(:first-type) label{
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.tab-sii:checked label{
background-color: #8C0052;
box-shadow: 0 -1px 0 #fff 嵌入。
cursor: 默認。
color:#ffffff。
}
.tab-sii .tab-si-1:checked label {
background-color: #009297! important;
box-shadow: 0 -1px 0 #fffinset;
cursor: 默認。
color:#ffffff。
}
.tab-sii .tab-si-2:checked label {
background-color: #ffc20e! important;
box-shadow: 0 -1px 0 #fffinset;
cursor: 默認。
color:#ffffff。
}
.tab-sii:checked label:hover{
box-shadow: 0 -1px 0 #fff inset;
background-color: #8C0052;
}
.tab-sii label {
width: 100%;
box-shadow: 0 -1px 0 #eee 嵌入。
cursor: 指標。
display: block;
text-decoration: none;
color: #333;
-webkit-box-flex: 3;
-webkit-flex-grow: 3;
-ms-flex-positive: 3;
flex-grow: 3;
text-align: center;
background-color: #EAF6F6;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
用戶選擇:無。
text-align: center;
-webkit-transition: 0.3s background-color ease, 0.3s box-shadow ease;
transition: 0.3s background-color ease, 0.3s box-shadow ease;
height: 50px;
box-sizing: border-box;
padding: 15px;
color: #000000;
字體大小。22px;
}
< div data-persist="true" class="tab-wrap">>
< input type="radio" id="Tab1" name="tabGroup1" class="tab-si one" checked>
<label for="tab1"/span>> LEARN</label>
< input type="radio"/span> id="tab2" name="tabGroup1" class="tab-xi second">
<label for="tab2"/span>> THRIVE</label>。
< input type="radio"/span> id="tab3" name="tabGroup1" class="tab-si third">
<label for="tab3"/span>> EXPLORE</label>
<div class="tab__content"/span>>
<p>Content</p>/span>
<div>/span>
<div>/span>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>
uj5u.com熱心網友回復:
你可以嘗試這樣來改變設定每個標簽的顏色:
.tab-sii:checked label[for="tab2"] {
背景顏色:橙色。
}
對于箭頭,我不太明白你想要什么 ......
所以它使:
。span class="hljs-selector-class">.tab-wrap {
-webkit-transition: 0.3s box-shadow ease;
transition: 0.3s box-shadow ease;
max-width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
position: relative;
list-style: none;
background-color: #fff;
margin: 40px 0;
}
.tab-sii {
display: none;
}
.tab-sii:checked label[for="tab1"/span>] {
background-color: orange;
}
.tab-sii:checked label[for="tab2"] {
background-color: 藍色。
}
.tab-sii:checked label[for="tab3"/span>] {
background-color: 綠色。
}
.tab-sii:checked:nth-of-type(1) ~ 。 tab__content:nth-of-type(1) {。
opacity: 1;
-webkit-transition: 0.5s不透明性緩和,0.2s轉換緩和。
transition: 0.5s不透明性輕松進入,0.2s轉換輕松。
position: relative;
top: 0;
z-index: 1;
-webkit-transform: translateY(0px)。
transform: translateY(0px)。
text-shadow。0 0 0。
}
.tab-sii:checked:nth-of-type(2)~ . tab__content:nth-of-type(2) {
opacity: 1;
-webkit-transition: 0.5s不透明性緩和,0.2s轉換緩和。
transition: 0.5s不透明性輕松進入,0.2s轉換輕松。
position: relative;
top: 0;
z-index: 100;
-webkit-transform: translateY(0px)。
transform: translateY(0px)。
text-shadow。0 0 0。
}
.tab-sii:checked:nth-of-type(3)~ . tab__content:nth-of-type(3) {
opacity: 1;
-webkit-transition: 0.5s不透明性緩和,0.2s轉換緩和。
transition: 0.5s不透明性輕松進入,0.2s轉換輕松。
position: relative;
top: 0;
z-index: 1;
-webkit-transform: translateY(0px)。
transform: translateY(0px)。
text-shadow。0 0 0。
}
.tab-sii:checked:nth-of-type(4)~ . tab__content:nth-of-type(4) {
opacity: 1;
-webkit-transition: 0.5s不透明性緩和,0.2s轉換緩和。
transition: 0.5s不透明性輕松進入,0.2s轉換輕松。
position: relative;
top: 0;
z-index: 100;
-webkit-transform: translateY(0px)。
transform: translateY(0px)。
text-shadow。0 0 0。
}
.tab:first-of-type:not(:last-of-type) label{
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
. tab-sii:not(:first-type)。 not(:last-of-type) label {
border-radius: 0;
}
.tab-sii:last-of-type:not(:first-type) label{
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.tab-sii:checked label{
background-color: #8C0052;
box-shadow: 0 -1px 0 #fff 嵌入。
cursor: 默認。
color:#ffffff。
}
.tab-sii .tab-si-1:checked label {
background-color: #009297! important;
box-shadow: 0 -1px 0 #fffinset;
cursor: 默認。
color:#ffffff。
}
.tab-sii .tab-si-2:checked label {
background-color: #ffc20e! important;
box-shadow: 0 -1px 0 #fffinset;
cursor: 默認。
color:#ffffff。
}
.tab-sii label {
width: 100%;
box-shadow: 0 -1px 0 #eee 嵌入。
cursor: 指標。
display: block;
text-decoration: none;
color: #333;
-webkit-box-flex: 3;
-webkit-flex-grow: 3;
-ms-flex-positive: 3;
flex-grow: 3;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
用戶選擇:無。
text-align: center;
-webkit-transition: 0.3s background-color ease, 0.3s box-shadow ease;
transition: 0.3s background-color ease, 0.3s box-shadow ease;
height: 50px;
box-sizing: border-box;
padding: 15px;
color: #000000;
字體大小。22px;
}
< div data-persist="true" class="tab-wrap">>
< input type="radio" id="Tab1" name="tabGroup1" class="tab-si one" checked>
<label for="tab1"/span>> LEARN</label>
< input type="radio"/span> id="tab2" name="tabGroup1" class="tab-xi second">
<label for="tab2"/span>> THRIVE</label>。
< input type="radio"/span> id="tab3" name="tabGroup1" class="tab-si third">
<label for="tab3"/span>> EXPLORE</label>
<div class="tab__content"/span>>
<p>Content</p>/span>
<div>/span>
<div>/span>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>
uj5u.com熱心網友回復:
你可以根據單選按鈕的:checked屬性來選擇標簽
就像這樣 input#tab1:checked label
span class="hljs-selector-class">.tab-wrap {
-webkit-transition: 0.3s box-shadow ease;
transition: 0.3s box-shadow ease;
max-width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
position: relative;
list-style: none;
background-color: #fff;
margin: 40px 0;
}
.tab-sii {
display: none;
}
.tab-sii:checked:nth-of-type(1)~ . tab__content:nth-of-type(1) {。
opacity: 1;
-webkit-transition: 0.5s不透明性緩和,0.2s轉換緩和。
transition: 0.5s不透明性輕松進入,0.2s轉換輕松。
position: relative;
top: 0;
z-index: 1;
-webkit-transform: translateY(0px)。
transform: translateY(0px)。
text-shadow。0 0 0。
}
.tab-sii:checked:nth-of-type(2)~ . tab__content:nth-of-type(2) {
opacity: 1;
-webkit-transition: 0.5s不透明性緩和,0.2s轉換緩和。
transition: 0.5s不透明性輕松進入,0.2s轉換輕松。
position: relative;
top: 0;
z-index: 100;
-webkit-transform: translateY(0px)。
transform: translateY(0px)。
text-shadow。0 0 0。
}
.tab-sii:checked:nth-of-type(3)~ . tab__content:nth-of-type(3) {
opacity: 1;
-webkit-transition: 0.5s不透明性緩和,0.2s轉換緩和。
transition: 0.5s不透明性輕松進入,0.2s轉換輕松。
position: relative;
top: 0;
z-index: 1;
-webkit-transform: translateY(0px)。
transform: translateY(0px)。
text-shadow。0 0 0。
}
.tab-sii:checked:nth-of-type(4)~ . tab__content:nth-of-type(4) {
opacity: 1;
-webkit-transition: 0.5s不透明性緩和,0.2s轉換緩和。
transition: 0.5s不透明性輕松進入,0.2s轉換輕松。
position: relative;
top: 0;
z-index: 100;
-webkit-transform: translateY(0px)。
transform: translateY(0px)。
text-shadow。0 0 0。
}
.tab:first-of-type:not(:last-of-type) label{
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
. tab-sii:not(:first-type)。 not(:last-of-type) label {
border-radius: 0;
}
.tab-sii:last-of-type:not(:first-type) label{
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.tab-sii:checked label{
background-color: #8C0052;
box-shadow: 0 -1px 0 #fff 嵌入。
cursor: 默認。
color:#ffffff。
}
.tab-sii .tab-si-1:checked label {
background-color: #009297! important;
box-shadow: 0 -1px 0 #fffinset;
cursor: 默認。
color:#ffffff。
}
.tab-sii .tab-si-2:checked label {
background-color: #ffc20e! important;
box-shadow: 0 -1px 0 #fffinset;
cursor: 默認。
color:#ffffff。
}
.tab-sii:checked label:hover{
box-shadow: 0 -1px 0 #fff inset;
background-color: #8C0052;
}
.tab-sii label {
width: 100%;
box-shadow: 0 -1px 0 #eee 嵌入。
cursor: 指標。
display: block;
text-decoration: none;
color: #333;
-webkit-box-flex: 3;
-webkit-flex-grow: 3;
-ms-flex-positive: 3;
flex-grow: 3;
text-align: center;
background-color: #EAF6F6;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
用戶選擇:無。
text-align: center;
-webkit-transition: 0.3s background-color ease, 0.3s box-shadow ease;
transition: 0.3s background-color ease, 0.3s box-shadow ease;
height: 50px;
box-sizing: border-box;
padding: 15px;
color: #000000;
字體大小。22px;
}
.tab-wrap label {
position: relative;
}
.tab-wrap label::after {content: ''/span>;
position: absolute;
right: 5px;
top: 5px;
width: 30px;
height: 100%;
background: url('https://png2.cleanpng.com/sh/1c5ded0c5c6e243af5a9f7cb8f9964f8/L0KzQYm3UsA0N6NsiZH0aYP2gLBuTfFzepD8ReVEbXLyfH7wgB9vNZV0j9C2YYL1f8i0kP5oNaFue58AYUe4Rra5VckyamhnUZC6NUO1Rom9UsE2OWg7TKc8NEm4SYeCTwBvbz==/kisspng-arrow-symbol-icon-down-arrow-png-pic-5a756e2591b7b9.1532686215176453495969.png') no-repeat center;
background-size: 包含。
opacity: 0;
transition: .3s ease all;
}
input#tab1:checked label{background: green;}
input#tab2:checked label{background: orange;}。
input#tab3:checked label{background: 8C0052;}。
. tab-wrap input:checked label: :after {opacity: 1; }
< div data-persist="true" class="tab-wrap">>
< input type="radio" id="Tab1" name="tabGroup1" class="tab-si one" checked>
<label for="tab1"/span>> LEARN</label>
< input type="radio"/span> id="tab2" name="tabGroup1" class="tab-xi second">
<label for="tab2"/span>> THRIVE</label>。
< input type="radio"/span> id="tab3" name="tabGroup1" class="tab-si third">
<label for="tab3"/span>> EXPLORE</label>
<div class="tab__content"/span>>
<p>Content</p>/span>
<div>/span>
<div>/span>
<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" class="snippet-box-edit snippet-box-result" frameborder="0"></iframe>
還添加了一個假的下拉箭頭,以便您了解流程的作業方式,它將只出現在活動元素中。
轉載請註明出處,本文鏈接:https://www.uj5u.com/qukuanlian/333730.html
標籤:
下一篇:SCSS父選擇器不作業
