本文介绍了CSS选择器的多种用法，包括.class,#id,属性值定位等，并强调了学习资源在技术提升中的重要性，特别是分享了Python的学习资源包，包括学习路线、视频教程、练手项目和电子书籍，旨在帮助读者建立系统化的学习体系。
| .class | .intro | 选择 class="intro" 的所有元素。 css 选择器以小数点标识类属性。 |
| #id | #firstname | 选择 id="firstname" 的所有元素。 css 选择器以 # 号标识 id 属性 |
| [attribute=value] | [name=“wd”] | 选择 name 属性值等于 “wd” 的所有元素。 |
| [attribute^=value] | a[src^=“https”] | 选择 src 属性值以 “https” 开头的所有链接(a)元素。 |
| [attribute$=value] | a[src$=“.pdf”] | 选择 src 属性以 “.pdf” 结尾的所有链接(a)元素。 |
| [attribute*=value] | a[src*=“abc”] | 选择 src 属性中包含 “abc” 子串的所有链接(a)元素。 |
| element>element | div>p | 选择 div 元素的所有 p 标签类型的子元素。 css 选择器以 > 标识父子元素关系。 |
| element element | div p | 选择 div 元素内部的所有 p 元素。 css 选择器中空格表示内部元素，所以在写 css 选择器时一定要注意空格。 |
| element+element | div+p | 选择同一级中紧接在 div 元素之后的所有 p元素。 css 选择器中 + 表示兄弟节点关系 |
| :nth-child | div>input:nth-child(1) | 选择 div 的元素的第一个子元素，如果第一个子元素不为input，则找不到。 |
| | div>:nth-child(1) | 选择 div 元素的第一个子元素，不管子元素的类型 |
| :nth-of-type | div>input:nth-of-type(1) | 选择 div 元素中的第一个input子元素。 |
以上只截取了较为常用的 CSS 选择器，更多资料请参考：
CSS 选择器参考手册
最低0.47元/天 解锁文章
扫一扫
1543
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
