元素。

1. 子元素选择器（Child Selector）

使用大于号（>）表示直接子元素关系。例如：

ul > li {
  list-style: none;
}

仅作用于

的直接子元素
• ，不包括嵌套更深的
• 。
  

  二、CSS3新增的常用选择器

  随着CSS3的推出，选择器的功能得到了极大的扩展，开发者可以更精准地定位页面元素，实现更复杂的样式控制。

  1. 伪类选择器（Pseudo-class Selectors）

  CSS3新增了许多伪类选择器，如 :nth-child()、:first-of-type、:last-of-type 等，可以按位置、奇偶行等条件选择元素。例如：

  tr:nth-child(even) {
    background-color: #f2f2f2;
  }

  上述代码将表格中偶数行背景设置为灰色。
  

  1. 属性选择器增强

  CSS3扩展了属性选择器的功能，支持部分匹配，如：

  ^= 表示以某字符串开头：

  a[href^="https://"] {
    color: red;
  }

  $= 表示以某字符串结尾：

  img[src$=".png"] {
    border: 1px solid #000;
  }

  *= 表示包含某字符串：

  div[class*="box"] {
    padding: 10px;
  }

  1. 结构性伪类选择器

  如 :root、:not()、:empty 等，用于选择特定结构的元素。例如：

  :not(.active) {
    display: none;
  }

  表示所有不带有 active 类的元素将被隐藏。
  

  1. UI元素状态伪类选择器

  用于根据用户交互状态选择元素，如 :hover、:focus、:checked 等。例如：

  input:focus {
    border-color: blue;
  }

  当输入框获得焦点时，边框颜色变为蓝色。
  

  1. 目标伪类选择器（:target）

  用于匹配当前URL锚点所指向的元素。例如：

  :target {
    background-color: yellow;
  }

  当页面地址为 #section1 时，对应ID为 section1 的元素会被高亮显示。
  

  1. 否定伪类选择器（:not()）

  可以排除某些元素，例如：

  p:not(.intro) {
    font-weight: bold;
  }

  所有不带 intro 类的段落将加粗显示。
  

  1. 语言伪类选择器（:lang()）

  用于根据语言属性选择元素，例如：

  q:lang(fr) {
    quotes: '«' '»';
  }

  当 元素的语言设置为法语时，使用法语引号。
  

  

  CSS选择器是构建网页样式体系的基础工具，掌握其使用方法对于前端开发者至关重要。从基本的元素、类、ID选择器到CSS3新增的多种高级选择器，每一种都为开发者提供了更强大、更灵活的样式控制能力。

  声明：所有来源为“澳门太阳集团城网址8722”的内容信息，未经本网许可，不得转载！如对内容有异议或投诉，请与我们联系。邮箱：marketing@think-land.com