今天学习下css3的基础选择器类型，只有使用选择器选中了元素，才可把样式应用于元素上，所以选择器对我们来说是至关重要的。选择器允许开发者根据元素的类型、类名、ID等属性来选择性地应用样式。

下面是一个包含HTML和CSS代码的例子，展示了CSS3中的几种基础选择器如何工作

  
  
  
  
  
  
  
  
  
  
这是一个普通的段落，应用了元素选择器。
  
  
这是一个高亮显示的段落，应用了类选择器。
  
  
这是一个ID为unique-id的div，它的文本应用了ID选择器。
  
  
  
    
这个段落位于div内部，应用了后代选择器。
  
  
  
  
    
列表项1，应用了子选择器。
  
    
列表项2，也应用了子选择器。
  
  
  
标题
  
这个段落紧接在h1之后，应用了相邻兄弟选择器。
  
这个段落也在h1之后，但由于不是紧接的，所以只应用了通用兄弟选择器的样式。
  
  
  

在这个例子中，我们有一个HTML文档，其中包含了各种元素，并且针对这些元素使用了CSS3中的基础选择器来应用样式。

• 元素选择器：所有的

  元素都会应用蓝色文本颜色。

• 类选择器：具有class="highlight"的

  元素会有黄色背景。

• ID选择器：ID为unique-id的
  元素内的文本会变成红色。
• 后代选择器：位于
  内部的

  元素会以斜体显示。

• 子选择器：
  元素的直接子
  • 元素将不会有列表样式（即无圆点或数字）。
  • 相邻兄弟选择器：紧接在

    之后的

    元素会有18px的字体大小。

  • 通用兄弟选择器：所有在

    之后的

    元素都会有20px的顶部外边距，但由于相邻兄弟选择器更具体，紧接在

    之后的

    还会受到它的影响（这里两个选择器都作用于相同的元素，但样式会累加或根据CSS的层叠规则来应用）。不过，在这个特定的例子中，字体大小只由相邻兄弟选择器设置，顶部外边距则由通用兄弟选择器设置。

  

  

  Tags：子元素选择器