16 选择器、样式

1.1  选择器

• 标签选择器

• class类选择器

• 群组选择器

• 伪类选择器

  • 结构伪类

    • child:不看标签的类型，从上到下挨个数

      • :first-child

      • :last:child

      • :nth-child()

        • 写数字：写几就是找第几个

        • 2n或者even：找偶数

        • 2n+1或者odd：找奇数

      • :nth-last-child():倒着数

    • of-type：从同类型中挨个数

      • :first-of-type

      • :last-of-type

      • :nth-of-type

      • :nth-last-of-type

  • 目标伪类

    • :target,当目标被激活之后可以改变一些样式

    • 需要配合锚点使用，当点击超链接跳转到绑定的标签位置，绑定的标签就叫做目标

  • 否定伪类

    • :not(你要否定的标签)

    • 取反，找除了（）中之外的其余元素

  • 动态伪类

    • :link:链接未访问，用在超链接

    • :visited:链接已访问，用在超链接

    • :hover:鼠标悬停，任何标签都可用

    • :active:鼠标按下，任何标签都可用

    • :focus:得到焦点，用在表单元素上

  • UI状态伪类

    • :enabled:找可用状态的标签，用在表单上

    • :disabled:找禁用的标签，用在表单上

    • :checked:找选中的标签

    • ::selection:鼠标选中文字的效果

• 伪元素选择器

  • ::after

  • ::before

  • ::first-line

  • ::first-letter

• 层级选择器

  • 包含

    • 后代：空格

    • 子代：大于号

  • 兄弟

    • +

    • ~

• 属性选择器

  • 标志:[]

  • [属性名 = 值]，精准查找，必须完全一致

  • [属性 ~= 值],只需要满足一个词即可

  • [属性 *= 值]，只需要满足一个字即可

  • [属性 ^= 值]，以。。。开头

  • [属性 $= 值],以。。。结尾

  • [属性 |= 值],必须是某个值或者以’值-‘开头

1.2  样式

• 阴影

  • 盒子影音：box-shadow:水平 垂直 模糊度 大小 颜色 inset(写了就是内阴影，不写就是外阴影)

  • 文本阴影：text-shadow:水平 垂直 模糊度 颜色

• 字体

  • 自定义字体

    • 用户不需要下载安装字体包，程序员下载好放到项目中即可

    • 创造自定义字体

      • @font-face{ font-family:'起一个字体名字'; src:url(字体素材路径); }

  • 字体图标

    • 从阿里巴巴矢量图官网进行下载

    • 下载好了之后解压把素材复制到项目之下

    • 通过link引入素材之下的iconfont.css文件

    • 造一个标签，起类名即可

    • 注意：字体图标看起来是图，其实是文字

• 背景

  • 1.背景颜色：background-color

  • 2.背景图：background-image:url()

  • 3.背景图的平铺规则：background-repeat

    • repeat

    • no-repeat

    • repeat-x

    • repeat-y

  • 4.背景图的位置：background-position

  • 5.背景图的大小：background-size:宽度 高度

    • cover：等比放大，把整个盒子铺满，有一边可能会裁掉

    • contain：等比放大，只要有一边铺满立即停止，有可能有一边留白

  • 6.背景图的固定：background-attachment

  • 7.背景图的起点：background-origin

    • border-box：将起点设置在边框上

    • padding-box：将起点设置在内间距上，默认值

    • content-box：将起点设置在内容上

  • 8.背景图的裁切：background-clip

    • border-box：只要超出了边框线就裁掉，默认值

    • padding-box：只要超出了内间距就裁掉

    • content-box：只要超出了内容区就裁掉

  • 9.多背景设置

    • 写多背景用复合写法，一组之间逗号隔开，前者覆盖后者

    • 如果需要写颜色，单独用background-color写一行，一定要写在复合的后面