CSS3-选择器篇

1. CSS3概述

  1. 如同人类的的进化一样,CSS3CSS2进化版本,在CSS2基础上,增强或新增了许多特性, 弥补了CSS2的众多不足之处,使得Web开发变得更为高效便捷

  2. cssjs

  3. js当后台语言用

2. CSS3现状

  1. 浏览器支持程度差,需要添加私有前缀(移动端)
    a). -webkit- 谷歌(Google)
    b). -moz- 火狐(Firefox)
    c). -o- 欧鹏(Opera)
    d). -ms- IE(Internet Explorer)
    e). -khtml- Konqueror
  2. 移动端支持优于PC端
  3. 不断改进中
  4. 应用相对广泛

3. CSS3选择器

简述:CSS3新增了许多灵活查找元素的方法,极大的提高了查找元素的效率和精准度CSS3选择器jQuery中所提供的绝大部分选择器兼容

3.1 属性选择器
  1. [属性名] 表示存在XX属性的元素;

  2. [attr = val] 表示属性值等于val的元素;

  3. [attr *= val] 表示的属性值里包含val字符并且在任意位置

  4. [attr ^= val] 表示的属性值里包含val字符并且在开始位置

  5. [attr $= val] 表示的属性值里包含val字符并且在结束位置

3.2 伪类选择器
  1. 之前学习的:
    a:link(超链接从未被访问过的状态)
    a:visited(超链接访问过后的状态)
    a:hover(鼠标悬停状态)
    a:active(鼠标按下状态)
  2. CSS3新增的伪类选择器
    在这里插入图片描述
《伪类选择器-A组》
序号选择器示例示例描述
1:first-childli:first-child必须是li元素,必须是第一个子元素
2:last-childli:last-child必须是li元素,必须是最后一个子元素
3:nth-child(n)a:nth-child(5)必须是a元素,必须是第五个子元素(2n、even表示偶数,2n+1、odd表示奇数)
4:nth-last-child(n)a:nth-last-child(n)同:nth-child(n) 相似,只是倒着计算
《伪类选择器-B组》
序号选择器示例示例描述
1:first-of-typeli:first-of-type必须是子元素中第一个li元素(可以不是第一个子元素)
2:last-of-typeli:last-of-type必须是子元素中最后一个li元素(可以不是最后一个子元素)
3:nth-of-type(n)li:nth-of-type(5)必须是子元素,必须是第五个li元素
《伪类选择器-C组》
序号选择器示例示例描述
1:emptyli:empty选中没有任何子节点的li元素(空格也算子节点)
2:targetli:target结合锚点进行使用,处于当前锚点的元素会被选中
3:root:root选中根标签(html)
3.3 伪元素选择器

简述: 通常用来生成并选中某个元素内部的第一个子元素最后一个子元素,此元素没有名字,为匿名元素

《伪元素选择器》
序号选择器示例示例描述
1::beforespan::before{ content:"内容"; 为内容设置属性样式 }生成并选中span的第一个子元素,默认行盒
2::afterspan::after{ content:"内容"; 为内容设置属性样式 }生成并选中span的最后一个子元素,默认行盒
3::first-letterp::first-letter选中元素中第一个字母、文字
4::first-letterp::first-letter选中元素中第一行的字母、文字
5::selectionp::selection选中用户用鼠标框选的部分字母、文字(通常设置一些颜色,宽高文字大小之类的属性设置无效)
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页