CSS 选择器大全 伪类选择器大全

CSS+CSS3 选择器

• 类选择器： .name{}

• ID选择器： #id{}

• 元素选择器： div{}

• 通配符选择器： *{}

• 后代选择器： div p{}

• 子选择器： div>p{} 和后代不一样的是，只筛选div下所有第一层p标签

• 兄弟选择器： div+p{} 筛选div后面一个p元素

• 交集选择器: div,p,.name{} 选择的元素共享一个样式

• 属性选择器

  • 属性选择器： a[target=_blank] 筛选所有a标签中属性target是_blank的
  • 属性包含选择器： div[title~=name] 筛选div属性title中包裹带有name的
  • 属性开头选择器： img[src^=‘https’] 筛选img属性src以htttps开头的所有img标签
  • 属性结尾选择器： img[src$=’.png’] 筛选img属性src以 .png 结尾的img标签

• 伪类选择器

  • 焦点伪类： :focus
  • 悬浮伪类： :hover
  • 前置伪类：p ::after 往p元素前面追加内容
  • 后置伪类：p ::before 往p元素后面追加内容
  • 光棍伪类：p :empty 选择没有子元素的p标签
  • 取反伪类：div: not(p) 选择div下所有不是p标签的元素
  • 首个选择器： div p:first-of-type 或:first-child 选择div下面第一个p标签
  • 末尾选择器： ul li:last-child 或 last-of-type 选择ul下最后一个li
  • 正序筛选伪类： :nth-child(2) 正序第一个开始自由筛选第几个元素
  • 倒序筛选伪类： :nth-last-child(2) 倒序最末尾开始自由筛选第几个元素
  • 注意点 nth-child(2) 和 nth-of-type(2) 区别：
    • p:nth-child(2) 找位置是2的p元素，如果位置2不是p元素不生效
    • p:nth-of-type(2) 找下面p元素中排在第二的，及时前面有很多其他元素，类似兄弟选择