⭐️ CSS 选择器

基础选择器

• ID 选择器 #my-id
• 类选择器 .my-class-name
• 标签选择器 div、p
• 一般兄弟选择器 p ~ span 匹配同一父元素下，p 元素后的所有 span 元素
• 紧邻兄弟选择器 h1 + p 紧贴在 h1 后面的第一个 p 标签。同级标签，之间不能有其他标签
• 并集选择器 .one, p 给 类名为 one，标签为 p 标签的元素共同设置
• 子代选择器 ul > li ul 标签下的下一个层级的 li ，并不是所有
• 后代选择器 li a
• 通配符选择 *
• 属性选择器 a[rel="external"]
• 伪类选择器 a:hover、li:nth-child
• 链接伪类选择器
  • :link /* 未访问的链接 */
  • :visited /* 已访问的链接 */
  • :hover /* 鼠标移动到链接上 */
  • :active /* 选定的链接 */

属性选择器

• div[class] 命中 div 下面带 class 属性的
• div[index=a] 命中 div 下面自定义属性 index=a 的
• div[index~=a] 只要 div 中 index 属性带 a 这个单词的就生效。[a这个单词必须独立存在]
  • p[class~='lance'] 只会匹配到 class="xxx lance"，而不会匹配 class="xxlancexx"
• div[class*=a] 只要 div 里面的 class 属性带 a 字母的就生效
• div[class^=a] 命中 div class 属性以 a 开头的