應用類和屬性選擇

Question

我想樣式此元素：

<input class="myslider" type="range" value="20"> 

這是工作：

input[class*="myslider"] { 
    -webkit-appearance: none; 
    width: 100px; 
    background-color: black; 
    height: 2px; 
} 

但是，這是行不通的：

.myslider input[type=range] { 
    -webkit-appearance: none; 
    width: 100px; 
    background-color: black; 
    height: 2px; 
} 

爲什麼我是否應用了類別選擇器和屬性選擇器？

Answer 1

你要找的選擇是

input.myslider[type=range] 

您當前的代碼看起來爲兒童元素和不針對相應的元素。

Answer 2

因爲您正在選擇.mySlider以內的輸入。嘗試：

.myslider[type='range'] { 
    -webkit-appearance: none; 
    width: 100px; 
    background-color: black; 
    height: 2px; 
} 

DEMO