与“属性选择器”相关的TAG标签
表单样式控制应优先使用属性选择器；input[type="text"]等按语义锁定类型，:focus/:disabled等伪类响应状态，required等属性匹配特定HTML属性，避免全局重置和滥用类名。
直接用color即可控制图标字体颜色，因其本质是特殊字符；需确保字体加载、类名正确及CSS优先级合理，推荐使用currentColor实现颜色同步，状态样式应结合伪类或属性选择器控制。
.class选择器设color只需写.your-class-name{color:#333;}，仅影响自身文字颜色且不继承；多class用逗号分隔共享样式；属性选择器[class^="text-"]可匹配开头含text-的class；color失效时优先检查覆盖规则、inheri...
应避免CSS选择器嵌套超过三层，因其导致特异性过高、维护困难、结构脆弱、重构易失效且影响渲染性能；推荐采用语义化类名、BEM规范、属性选择器及scoped样式等方案优化。
:not()只接受简单选择器，排除多个类需链式书写；控制鼠标选中用user-select而非:not()或pointer-events，其值none/text/all/contain决定可选行为，且支持继承与子元素覆盖。
浏览器用四元组(a,b,c,d)计算选择器优先级：a为内联样式，b为ID数，c为类/属性/伪类数，d为元素/伪元素数；逐位比较，高位相等才看下一位。
:disabled伪类仅匹配原生表单控件的disabled属性，不支持div等非表单元素或aria-disabled；需用class模拟非表单禁用，并配合tabindex="-1"和aria-disabled="true"保障可访问性。
:first-of-type对表单输入框常失效，因它只匹配同类型元素中第一个，若首个表单控件是textarea等非input标签，则input:first-of-type无法选中任何input；更可靠的方式是用input:nth-of-type(1)、:is(input,textarea,selec...
JavaScript操作DOM是刚性需求，需掌握querySelector/querySelectorAll区别、innerHTML与textContent安全选择、事件监听中this指向、动态创建元素的正确方式及DocumentFragment优化。
:not()仅支持简单选择器，禁用嵌套伪类与复杂选择器；其否定逻辑影响性能与可读性，适合稳定少例外场景；与:is()混用需注意权重和兼容性。
