CSS 是否应该使用CSS :disabled伪类还是属性选择器，或者这只是观点的问题

在本文中，我们将介绍CSS中的:disabled伪类和属性选择器，并讨论它们的使用场景和优劣势。然后，我们将总结出最佳实践。

阅读更多：CSS 教程

何时使用:disabled伪类？

:disabled伪类是用来选中表单元素（如输入框、按钮等）中被禁用的元素。当一个元素被禁用时，用户无法与之交互，比如无法输入文本、点击按钮等。这时我们可以使用:disabled伪类来为这些禁用的元素应用特定的样式。

下面是一个示例，演示了如何使用:disabled伪类来样式化被禁用的按钮：

button:disabled {
  background-color: gray;
  color: white;
  cursor: not-allowed;
}

在上述示例中，被禁用的按钮将呈现为灰色背景、白色文字，并且鼠标悬停时显示为”not-allowed”样式的鼠标指针。

使用:disabled伪类是一种简洁明了的方法，适用于那些只需要样式化禁用状态的元素的情况。

属性选择器是另一种选择被禁用元素的方式。与:disabled伪类不同的是，属性选择器可以应用于任何具有相关属性的元素，而不仅限于表单元素。

下面是一个示例，演示了如何使用属性选择器来样式化具有”disabled”属性的元素：

[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

在上述示例中，具有”disabled”属性的元素将被设置为半透明，并且鼠标悬停时显示为”not-allowed”样式的鼠标指针。

当需要样式化其他类型元素的禁用状态时，属性选择器是一种更加灵活的选择。

在使用:disabled伪类还是属性选择器的问题上，可以说是一种观点问题。两者都有各自的优劣势，取决于具体需求。

使用:disabled伪类时，样式与元素的禁用状态更加紧密耦合。这种方式更直观，易于理解，特别适用于表单元素的禁用状态样式化。

使用属性选择器时，样式与属性的状态绑定。这种方式更加灵活，适用于需要样式化禁用状态的任何元素，甚至不仅限于表单元素。

因此，我们需要根据具体情况来决定使用哪种方式。如果我们只需要样式化禁用状态的表单元素，那么使用:disabled伪类是一个简洁明了的选择。

然而，如果我们还要样式化其他类型的元素的禁用状态，或者我们更喜欢一个更加灵活的解决方案，那么使用属性选择器是一个不错的选择。

在本文中，我们讨论了CSS中的:disabled伪类和属性选择器，并讨论了它们的使用场景和优劣势。根据具体需求，我们可以选择使用:disabled伪类来样式化禁用状态的表单元素，或者使用属性选择器来样式化禁用状态的任何类型的元素。

虽然这个问题可能有不同的观点，但选择使用哪种方式最终还是取决于具体需求和个人偏好。重要的是保持一致性，并根据项目的要求选择适当的方法进行样式化。无论选择哪种方式，我们都可以通过CSS来创建美观和易于使用的禁用状态的样式。