CSS高级选择器与使用技巧1. 前言CSS选择器是CSS的核心部分它决定了样式规则应用到哪些元素上。本文将深入探讨CSS高级选择器的使用技巧帮助你更加精确、高效地选择和样式化元素。2. 基础选择器2.1 元素选择器/* 选择所有p元素 */ p { color: blue; }2.2 类选择器/* 选择所有class为container的元素 */ .container { width: 100%; }2.3 ID选择器/* 选择ID为header的元素 */ #header { background: #f0f0f0; }3. 高级选择器3.1 后代选择器/* 选择所有div内的p元素 */ div p { margin: 10px 0; }3.2 子选择器/* 选择所有div的直接子元素p */ div p { font-weight: bold; }3.3 相邻兄弟选择器/* 选择所有p元素后面的第一个div元素 */ p div { margin-top: 20px; }3.4 通用兄弟选择器/* 选择所有p元素后面的所有div元素 */ p ~ div { color: gray; }4. 属性选择器4.1 基本属性选择器/* 选择所有带有title属性的元素 */ [title] { cursor: help; } /* 选择所有title属性值为example的元素 */ [titleexample] { color: red; }4.2 部分属性值选择器/* 选择所有title属性值包含example的元素 */ [title*example] { border: 1px solid red; } /* 选择所有title属性值以example开头的元素 */ [title^example] { background: yellow; } /* 选择所有title属性值以example结尾的元素 */ [title$example] { font-style: italic; } /* 选择所有title属性值包含example作为独立单词的元素 */ [title~example] { text-decoration: underline; } /* 选择所有title属性值以example开头后跟连字符的元素 */ [title|example] { font-weight: bold; }4.3 表单属性选择器/* 选择所有type为text的input元素 */ input[typetext] { width: 200px; } /* 选择所有disabled的input元素 */ input:disabled { background: #f0f0f0; } /* 选择所有checked的checkbox元素 */ input[typecheckbox]:checked { outline: 2px solid blue; }5. 伪类选择器5.1 状态伪类/* 选择鼠标悬停的元素 */ a:hover { color: red; } /* 选择被激活的元素 */ a:active { color: green; } /* 选择获得焦点的元素 */ input:focus { outline: 2px solid blue; } /* 选择链接的不同状态 */ a:link { color: blue; } a:visited { color: purple; }5.2 结构伪类/* 选择第一个子元素 */ div:first-child { margin-top: 0; } /* 选择最后一个子元素 */ div:last-child { margin-bottom: 0; } /* 选择第n个子元素 */ div:nth-child(2) { background: yellow; } /* 选择偶数位置的子元素 */ div:nth-child(even) { background: #f0f0f0; } /* 选择奇数位置的子元素 */ div:nth-child(odd) { background: #e0e0e0; } /* 选择第n个类型为p的子元素 */ p:nth-of-type(2) { color: red; } /* 选择第一个类型为p的子元素 */ p:first-of-type { font-weight: bold; } /* 选择最后一个类型为p的子元素 */ p:last-of-type { font-style: italic; } /* 选择唯一的类型为p的子元素 */ p:only-of-type { text-decoration: underline; } /* 选择没有子元素的元素 */ div:empty { display: none; }5.3 否定伪类/* 选择所有不是p的元素 */ :not(p) { margin: 10px; } /* 选择所有class不是container的div元素 */ div:not(.container) { border: 1px solid red; }5.4 其他伪类/* 选择根元素 */ :root { --primary-color: blue; } /* 选择目标元素 */ :target { background: yellow; } /* 选择语言为英语的元素 */ [langen] { font-family: Arial, sans-serif; } /* 选择语言以en开头的元素 */ [lang|en] { font-family: Arial, sans-serif; }6. 伪元素选择器6.1 基础伪元素/* 在元素内容前插入内容 */ p::before { content: 前缀: ; color: red; } /* 在元素内容后插入内容 */ p::after { content: :后缀; color: blue; } /* 选择元素的第一个字母 */ p::first-letter { font-size: 2em; font-weight: bold; } /* 选择元素的第一行 */ p::first-line { font-weight: bold; }6.2 选择器伪元素/* 选择输入框的占位文本 */ input::placeholder { color: gray; font-style: italic; } /* 选择选中的文本 */ ::selection { background: yellow; color: black; } /* 选择拖动时的元素 */ ::selection { background: blue; color: white; }7. 选择器优先级7.1 优先级规则内联样式1000ID选择器100类选择器、属性选择器、伪类选择器10元素选择器、伪元素选择器1通配符选择器07.2 优先级计算/* 优先级100 10 110 */ #header .title { color: red; } /* 优先级10 1 11 */ .container p { color: blue; } /* 优先级100 10 1 111 */ #header .title p { color: green; }7.3 !important/* 优先级最高 */ .container { color: red !important; }8. 选择器组合技巧8.1 多重选择器/* 选择所有h1、h2、h3元素 */ h1, h2, h3 { font-family: Arial, sans-serif; } /* 选择所有class为container的div和class为box的section元素 */ div.container, section.box { margin: 20px 0; }8.2 嵌套选择器/* 嵌套选择器 */ .container { width: 100%; .header { height: 100px; } .content { padding: 20px; } .footer { height: 50px; } }8.3 复杂选择器/* 选择所有class为container的div内的第2个p元素 */ div.container p:nth-child(2) { color: red; } /* 选择所有class为container的div内的所有带有title属性的a元素 */ div.container a[title] { text-decoration: none; } /* 选择所有class为container的div内的所有偶数位置的li元素 */ div.container ul li:nth-child(even) { background: #f0f0f0; }9. 实际应用案例9.1 导航菜单/* 导航菜单样式 */ .nav { display: flex; list-style: none; padding: 0; margin: 0; } .nav li { margin-right: 20px; } .nav a { text-decoration: none; color: #333; transition: color 0.3s ease; } .nav a:hover { color: blue; } .nav a.active { color: red; font-weight: bold; }9.2 表单样式/* 表单样式 */ .form-group { margin-bottom: 20px; } .form-group label { display: block; margin-bottom: 5px; font-weight: bold; } .form-group input[typetext], .form-group input[typeemail], .form-group textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; } .form-group input[typetext]:focus, .form-group input[typeemail]:focus, .form-group textarea:focus { outline: none; border-color: blue; box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); } .form-group input[typesubmit] { background: blue; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; transition: background 0.3s ease; } .form-group input[typesubmit]:hover { background: darkblue; }9.3 卡片布局/* 卡片布局 */ .card { background: white; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); padding: 20px; margin-bottom: 20px; transition: transform 0.3s ease, box-shadow 0.3s ease; } .card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.15); } .card h3 { margin-top: 0; color: #333; } .card p { color: #666; line-height: 1.5; } .card .card-footer { margin-top: 20px; padding-top: 10px; border-top: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }10. 性能优化10.1 选择器性能避免使用通用选择器*选择器会匹配所有元素性能较差避免使用后代选择器后代选择器会从右到左匹配性能较差使用类选择器类选择器性能较好优先级适中避免过度使用ID选择器ID选择器优先级太高不利于样式复用10.2 优化建议/* 不好的做法 */ body div.container ul li a { color: blue; } /* 好的做法 */ .nav-link { color: blue; } /* 不好的做法 */ * { margin: 0; padding: 0; } /* 好的做法 */ body, h1, h2, h3, p, ul, li { margin: 0; padding: 0; }11. 浏览器兼容性11.1 兼容性问题伪元素在IE8及以下版本中伪元素使用单冒号:而不是双冒号::属性选择器在IE6及以下版本中部分属性选择器不支持结构伪类在IE8及以下版本中结构伪类不支持11.2 兼容性解决方案/* 兼容IE8的伪元素 */ /* IE8及以下版本 */ .container:before { content: ; } /* 现代浏览器 */ .container::before { content: ; } /* 兼容旧浏览器的属性选择器 */ /* 通用选择器 */ input[typetext] { width: 200px; } /* 类选择器回退 */ .input-text { width: 200px; }12. 常见问题与解决方案12.1 选择器不生效问题选择器样式不生效解决方案检查选择器优先级确保选择器正确匹配元素12.2 选择器性能问题问题页面渲染缓慢解决方案优化选择器避免使用低效的选择器12.3 浏览器兼容性问题问题在某些浏览器中样式不生效解决方案使用兼容性更好的选择器添加浏览器前缀13. 总结CSS选择器是CSS的核心部分通过本文介绍的高级选择器和使用技巧你可以更加精确、高效地选择和样式化元素。从基础选择器到高级选择器从属性选择器到伪类伪元素选择器每一种选择器都有其特定的用途和适用场景。记住好的选择器应该是简洁、高效、易于维护的。希望本文对你有所帮助祝你在CSS选择器的世界中创造出更加精彩的样式