基本选择器

1. 标签选择器（Type Selector）：

   • 根据元素的类型（标签名）选择元素。
   • 场景：为页面上所有段落文本应用样式。

   p {
     color: blue;
   }

2. 类选择器（Class Selector）：

   • 使用点（.）后跟类名来选择带有特定类的元素。
   • 场景：为所有带有.active类的元素设置样式。

   .active {
     background-color: yellow;
   }

3. ID选择器（ID Selector）：

   • 使用井号（#）后跟ID名来选择带有特定ID的元素。
   • 场景：为页面上唯一的元素（如页面顶部的导航栏）设置样式。

   #navbar {
     font-weight: bold;
   }

组合选择器

1. 后代选择器（Descendant Selector）：

   • 使用空格分隔，选择作为某元素后代的元素。
   • 场景：为.container内部的所有<li>元素设置样式。

   .container li {
     font-size: 16px;
   }

2. 子代选择器（Child Selector）：

   • 使用>符号分隔，选择作为某元素直接子代的元素。
   • 场景：为.container的直接子代<div>元素设置样式。

   .container > div {
     border: 1px solid black;
   }

3. 相邻兄弟选择器（Adjacent Sibling Selector）：

   • 使用+符号分隔，选择紧随其兄弟元素之后的元素。
   • 场景：为紧跟在<h1>标签后的<p>标签设置样式。

   h1 + p {
     margin-top: 0;
   }

4. 通用兄弟选择器（General Sibling Selector）：

   • 使用~符号分隔，选择某个元素之后的所有兄弟元素。
   • 场景：为<h1>标签之后的所有<p>标签设置样式。

   h1 ~ p {
     color: grey;
   }

伪类选择器

1. 链接伪类（Link Pseudo-class）：

   • :link、:visited：选择未访问和已访问的链接。
   • 场景：为链接设置不同的颜色以区分未访问和已访问状态。

   a:link {
     color: blue;
   }
   a:visited {
     color: purple;
   }

2. 结构伪类（Structural Pseudo-classes）：

   • :first-child、:last-child、:nth-child()：基于元素在结构中的位置选择元素。
   • 场景：为列表中的第一个<li>元素设置特殊样式。

   ul li:first-child {
     font-weight: bold;
   }

3. 动态伪类（Dynamic Pseudo-classes）：

   • :hover、:active、:focus：基于用户的行为选择元素。
   • 场景：为鼠标悬停时的按钮添加特殊样式。

   button:hover {
     background-color: lightgrey;
   }

4. 状态伪类（State Pseudo-classes）：

   • :disabled、:checked：基于元素的状态选择元素。
   • 场景：为禁用的输入框设置样式。

   input:disabled {
     background-color: #ccc;
   }

5. 否定伪类（Negation Pseudo-class）：

   • :not()：选择不匹配指定选择器的元素。
   • 场景：为所有不是.error类的<div>元素设置样式。

   div:not(.error) {
     border: 1px solid green;
   }

选择器权重

行内样式（style="…"）>ID 选择器(#box{…})>类选择器(.con{…})>标签选择器(dic{…})>通用选择器(*{…})

• 内联样式：权重值为1000

• ID选择器：权重值为100

• 类选择器、伪类选择器和属性选择器：权重值为10。

• 标签选择器和伪元素选择器：权重值为1