精通CSS选择器：从基础到高级

# CSS选择器学习攻略 在前端开发中，CSS（Cascading Style Sheets）选择器是用于定位HTML或XML文档中的元素并应用样式的关键工具。掌握CSS选择器的使用能够极大地提高样式表的效率和可维护性。以下是对不同类型的CSS选择器的详细解释： ## 1. 基本选择器 ### 1.1 通用元素选择器 `*` `*` 选择器匹配页面上的所有元素，常用于设置全局样式，如清除默认边距和内填充： ```css * { margin: 0; padding: 0; } ``` ### 1.2 标签选择器 `E` 标签选择器如 `p` 会匹配所有 `<p>` 标签的元素，可以用来定义特定标签的样式： ```css p { font-size: 2em; } ``` ### 1.3 类选择器 `.info` 类选择器通过 `.` 后跟类名（如 `.info`）来定位元素，匹配所有class属性包含指定类的元素： ```css .info { background: #ff0; } ``` ### 1.4 ID选择器 `#footer` ID选择器通过 `#` 后跟ID名称（如 `#footer`）来选择唯一元素，匹配ID属性等于指定ID的元素： ```css #footer { background: #ff0; } ``` ## 2. 多元素的组合选择器 ### 2.1 多元素选择器 `E, F` `E, F` 选择器匹配所有E元素和F元素，两者之间用逗号分隔： ```css div p { color: #f00; } ``` ### 2.2 后代元素选择器 `EF` `E F` 选择器匹配所有E元素内的F后代元素，中间用空格分隔： ```css #nav li { display: inline; } ``` ### 2.3 子元素选择器 `E > F` `E > F` 选择器匹配所有E元素的直接子元素F： ```css div > strong { color: #f00; } ``` ### 2.4 毗邻元素选择器 `E + F` `E + F` 选择器匹配所有紧跟E元素后面的同级元素F： ```css p + p { color: #f00; } ``` ## 3. CSS2.1属性选择器 ### 3.1 具有属性选择器 `E[att]` `E[att]` 选择器匹配所有具有att属性的E元素，不管属性值是什么： ```css p[title] { color: #f00; } ``` ### 3.2 属性等于值选择器 `E[att=val]` `E[att=val]` 选择器匹配所有att属性等于"val"的E元素： ```css div[class=error] { color: #f00; } ``` ### 3.3 属性包含值选择器 `E[att~=val]` `E[att~=val]` 选择器匹配所有att属性值中含有空格分隔的多个值，其中一个等于"val"的E元素： ```css td[headers~=col1] { color: #f00; } ``` ### 3.4 属性以特定字符串开头选择器 `E[att|=val]` `E[att|=val]` 选择器主要用于lang属性，匹配所有att属性值以"val"开头且由连字号分隔的E元素： ```css p[lang|=en] { color: #f00; } ``` 学习和熟练掌握这些CSS选择器可以帮助开发者更加精确地控制网页布局和样式，提高代码的可读性和复用性。了解并灵活运用它们，可以使你在前端开发中游刃有余。