css常用选择器用法和示例说明

标签选择器 (Element Selector)：

• 语法：element { property: value; }
• 案例：
  Css

  1p { color: green; }

• 说明：这个例子将会把所有<p>标签内的文本颜色设置为绿色。

类选择器 (Class Selector)：

• 语法：.class-name { property: value; }
• 案例：
  Css

  1.highlight { background-color: yellow; }

• 说明：这个例子将会把所有拥有highlight类的元素背景色设置为黄色。

ID选择器 (ID Selector)：

• 语法：#id-value { property: value; }
• 案例：
  Css

  1#main-header { font-size: 24px; }

• 说明：这个例子将会把ID为main-header的元素的字体大小设置为24像素。

后代选择器 (Descendant Selector)：

• 语法：ancestor descendant { property: value; }
• 案例：
  Css

  1div p { margin-bottom: 1em; }

• 说明：这个例子将会为<div>元素内部的所有<p>子元素设置底部外边距为1em。

子元素选择器 (Child Selector)：

• 语法：parent > child { property: value; }
• 案例：
  Css

  1ul > li { list-style-type: none; }

• 说明：这个例子将会取消所有直接位于<ul>元素下的<li>元素的项目符号样式。

属性选择器 (Attribute Selector)：

• 语法：[attribute=value] { property: value; }
• 案例：
  Css

  1a[target="_blank"] { color: blue; }

• 说明：这个例子将会把所有目标属性target值为"_blank"的链接文本颜色设置为蓝色。

伪类选择器 (Pseudo-class Selector)：

• 语法：selector:pseudo-class { property: value; }
• 案例：
  Css

  1a:hover { text-decoration: underline; }

• 说明：这个例子将会在鼠标悬停时给所有链接添加下划线。

包含指定内容的选择器 (Substring Matching Attribute Selector)

• 语法：[attribute*="value"] { property: value; }
• 案例：
  Css

  1input[type*="password"] { border-color: red; }

• 说明：这个例子将会把所有类型属性中包含"password"的输入框的边框颜色设置为红色。

伪元素选择器 (Pseudo-element Selector)

• 语法：selector::pseudo-element { property: value; }
• 案例：
  Css

  1p::first-letter { font-size: 2em; }

• 说明：这个例子将会使所有段落的第一个字母字体大小加倍。

结构性伪类选择器 (Structural Pseudo-classes)

• 例如: :nth-child(n)、:nth-of-type(n)、:first-of-type、:last-of-type等。
• 案例：
  Css

  1li:nth-child(odd) { background-color: lightgray; }

• 说明：这个例子将会把所有列表项中奇数位置的元素背景色设置为浅灰色。

状态伪类选择器 (State Pseudo-classes)

• 例如: :enabled、:disabled、:checked、:focus 等。
• 案例：
  Css

  1input:disabled { opacity: 0.5; }

• 说明：这个例子会使所有禁用状态的输入框透明度降低至50%。