CSS3选择器详解与实战

"该资源是关于CSS3基本样式的习题及答案，涵盖了选择器的使用，包括通配符选择器、元素选择器、类选择器、ID选择器、后代选择器、子元素选择器、相邻兄弟元素选择器以及通用兄弟选择器。" 在CSS3中，选择器是定位网页元素并应用样式的工具，它们极大地增强了CSS的灵活性和精确性。以下是各种选择器的详细说明： 1. **通配符选择器（＊）**：`*`通配符可以用于选择页面上的所有元素，或者特定元素下的所有子元素。它常用于初始化页面的基本样式，如清除默认的内外边距。 ```css * { margin: 0; padding: 0; } ``` 2. **元素选择器（E）**：通过元素名称（如`li`、`div`等）来选择特定类型的元素，并为其设置样式。 ```css li { border: 1px solid #000; } ``` 3. **类选择器（.className）**：在HTML元素上定义类名后，可以通过`.className`来选择这些元素。类选择器可以单独使用，也可以与元素选择器结合，实现更精细的控制。 ```css .active { font-weight: bold; color: yellow; } p.items { color: red; } .important.items { background: #ccc; } ``` 4. **ID选择器（#ID）**：ID选择器是独一无二的，每个页面只能有一个元素拥有特定的ID。这使得ID选择器非常适合用于唯一标识的元素，例如导航菜单或页脚。 ```css #important { font-weight: bold; color: yellow; } ``` 5. **后代选择器（EF）**：使用空格分隔的两个选择器（如`.demoli`）会选择`E`元素内的所有`F`元素。 ```css .demo li { color: blue; } ``` 6. **子元素选择器（E>F）**：`E>F`只选择`E`元素的直接子元素`F`，而不是所有后代元素。在某些旧版浏览器（如IE6）中可能不受支持。 ```css ul > li { background: green; color: yellow; } ``` 7. **相邻兄弟元素选择器（E+F）**：`E+F`选择紧跟在`E`后面的同级元素`F`。同样，在IE6中可能不被支持。 ```css li + li { background: green; color: yellow; border: 1px solid #ccc; } ``` 8. **通用兄弟选择器（E〜F）**：`E〜F`选择所有位于`E`后面并且同属一个父元素的`F`元素，无论它们之间有多少其他元素。这个选择器在IE6中也不被支持。 ```css .active ~ li { background: green; } ``` 掌握这些选择器的用法，能够帮助开发者更高效地编写CSS代码，精确地定位和风格化网页元素，提升网页设计的灵活性和用户体验。在实际开发中，根据需求和浏览器兼容性选择合适的选择器是非常重要的。