如何为匹配一个或另一个元素组合属性选择器

Question

如何组合选择器？我想隐藏数字和日期字段中的箭头

<input type=number>
<input type=date>

我发现以下代码适用于单个字段：

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}

但是现在我想在某些代码中添加 type=date，但似乎无法将它们组合起来，并到处寻找如何做到这一点，但找不到如何做。我怀疑它非常简单，如下所示，但这不起作用。

input[type=number][type=date]::-webkit-inner-spin-button, 
input[type=number][type=date]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}

我知道有一些解决方法，例如使用 ID，但由于我正在学习 CSS，我想知道如何在单个代码字符串中组合 [type=date] 和 [type=number]。有人知道吗？

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		margin: 0;
    }

<input type=number>
<input type=date>

Answer 1

您尝试的解决方案将仅针对同时具有类型=数字和类型=日期的输入。所以这是行不通的。
您需要类型=数字或类型=日期，不幸的是，以下是唯一的方法。

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button, 
input[type=date]::-webkit-inner-spin-button, 
input[type=date]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}

顺便说一下，请注意，-webkit-inner-spin-button是一个 webkit 专有的伪元素，因此它在其他浏览器中不起作用。具体来说，-moz-appearance线完全是多余的！

Answer 2

你可以像这样应用 css：

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button,
input[type=date]::-webkit-inner-spin-button, 
input[type=date]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}

<input type=number>
<input type=date>