应用类和属性选择器

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