如何使用JavaScript的querySelector选择特定button元素并添加样式

先看你提供的代码里的两个问题：

• 语法错误：document..querySelector多了一个点，正确写法是document.querySelector
• 选择器太宽泛：querySelector('button')只会返回页面中第一个button元素，无法选中目标的「Clear All」按钮

要精准选中特定button，你可以利用元素的ID、类名、属性等特征编写选择器，下面是几种常用方式：

1. 通过ID选择（最推荐） #

如果目标元素有唯一ID（比如示例里的id="clear"），用ID选择器是最直接的——页面中ID是唯一的，不会出现匹配错误：

const clearButton = document.querySelector('#clear');
clearButton.style.color = 'red';

2. 通过类名选择 #

如果元素有独特的类名（比如示例里的btn-clear），可以用类选择器定位：

const clearButton = document.querySelector('.btn-clear');
clearButton.style.color = 'red';

也可以结合标签名和类名，进一步缩小匹配范围，避免误选其他带相同类名的元素：

const clearButton = document.querySelector('button.btn-clear');

3. 通过其他特征选择 #

如果需要更复杂的匹配逻辑，还可以用属性选择器，比如匹配包含特定文本的按钮（不过这种方式不如ID/类选择器可靠）：

const clearButton = document.querySelector('button:contains("Clear All")');

修正后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Shopping List</title>
    <style>
        .btn {
            background-color: #333;
            color: #fff;
            border: none;
            border-radius: 5px;
            padding: 10px 20px;
            cursor: pointer;
        }

        .btn-clear {
            margin-top: 20px;
            width: 100%;
            font-size: 16px;
            background-color: transparent;
            color: #333;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 10px 20px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <button class="remove-item btn-link text-red">
        <i class="fa-solid fa-xmark"></i>
    </button>
    <button id="clear" class="btn-clear"><b>Clear All</b></button>

    <script>
        // 修正语法错误，用ID选择器选中目标按钮
        const clearButton = document.querySelector('#clear');
        clearButton.style.color = 'red';
    </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者NUman