制作css选择器
CSS选择器的基本类型
元素选择器：直接使用HTML标签名匹配元素。例如p选择所有<p>标签。
类选择器：以点号.开头，匹配class属性。例如.header选择所有class="header"的元素。
ID选择器：以井号#开头，匹配id属性。例如#main选择id="main"的元素。
属性选择器：通过方括号[]匹配属性。例如[type="text"]选择所有type属性为text的元素。
组合选择器
后代选择器：用空格连接，匹配嵌套关系。例如div p选择所有<div>内的<p>元素。
子元素选择器：用>连接，匹配直接子元素。例如ul > li仅选择<ul>的直接<li>子元素。
相邻兄弟选择器：用+连接，匹配紧邻的同级元素。例如h1 + p选择紧接在<h1>后的<p>。
通用兄弟选择器：用~连接，匹配后续所有同级元素。例如h2 ~ p选择<h2>之后的所有<p>。
伪类与伪元素
伪类选择器：以冒号:开头，匹配特定状态的元素。例如:hover匹配鼠标悬停状态，:nth-child(2)匹配父元素的第二个子元素。
伪元素选择器：以双冒号::开头，匹配元素的特定部分。例如::before在元素前插入内容，::first-line选择首行文本。
选择器优先级规则
内联样式：直接写在HTML标签的style属性中，优先级最高。
ID选择器：优先级高于类和元素选择器。例如#content比.content优先级高。
类/属性/伪类选择器：优先级相同，例如.active和[type="button"]。
元素/伪元素选择器：优先级最低，例如div和::after。
计算规则：通过权重值比较，格式为(内联, ID, 类/属性/伪类, 元素)。例如#nav .item的权重为(0, 1, 1, 0)。
高级选择器技巧
通用选择器：*匹配所有元素，常用于重置样式。例如* { margin: 0; }。
否定伪类：:not()排除特定元素。例如input:not([type="submit"])选择非提交按钮的<input>。
目标伪类：:target匹配URL片段标识的元素。例如#section:target当URL为#section时生效。
属性部分匹配：[class^="icon-"]匹配class以icon-开头的元素，[href$=".pdf"]匹配PDF链接。
