H5 + C3基础（二）（常用复合选择器 & 边框盒模型 & C3其他特性）

常用复合选择器

之前的选择器 按简单类型分为 id, class, 标签，而C3 提供了一些新的选择器，拥有更强大的能力。

后代选择器

• >：直接子元素；
  div > p：在div的直接子元素中的p标签
• 空格：所有子元素；
  div p ：div 下面所有p标签，不论层级。

兄弟选择器

• +：相邻弟弟节点；
  div+p：div 后面紧挨着的p标签
• ~：所有弟弟节点
  div~p：div后面所有p标签

并集选择器

• , ：逗号隔开的所有选择器应用后面相同的样式

/*div 和 p 都应用 color：#fff 的效果*/
div, p {
  color: #fff;
}

多class属性值选择器

.class1.class2 可以选择到到 class=“item active” 这样的元素

<uni-view data-v-eae40a34="" class="item active">首页</uni-view>

<style>
.item.active {

}
</style>

属性选择器

权重为10
根据标签指定属性匹配，之前仅限于 id 和 class；当然 id 和 class 本质上也是一种属性。

CSS	场景
div[attr]	匹配拥有属性 attr 的元素
div[attr=“v”]	匹配属性 attr = “v” 的元素
div[attr ~= “v”]	匹配属性 attr ，且属性值包含 v 这个属性值
div[attr ^= “v”]	匹配属性 attr 且 属性值以 v 字符开始的的元素，
div[attr $= ‘v’]	匹配拥有属性 attr 且属性值 以 v 字符结束的元素
div[attr *= ‘v’]	匹配拥有属性 attr 且属性值 包含字符 v 的元素
div[attr1 *= ‘v1’][attr2 = “v2”]	多个属性值 同时满足的元素

结构伪类选择器

权重为10
通常用于选择父元素下子元素的场景
大体分为两类

1. xx child
   先找到指定位置的子元素，然后再匹配 : 前面的元素，能匹配上则应用样式，否则不应用样式
2. xx of-type
   先匹配 ： 前面的元素，取出满足的子元素集合，再将样式应用到这个集合中指定位置的元素上

CSS	场景
div :first-child	div 第一个子元素，无论它是什么标签
div a:first-child	先找到 div 子元素列表，再看第一个是不是a，如果是，则对a应用样式
div a:last-child	先找到 div 子元素列表，再看最后一个是不是a，如果是，则对a应用样式
div a:nth-child(n)	先找到 div 子元素列表，再根据表达式n的类型选择出指定位置元素看它是不是a，如果是，则对a应用样式
div :first-of-type	选择div下各种类型元素的第一个，也就说，如果内部有多种标签，会选出多个标签
div a:first-of-type	先找到 div 下所有a子元素，再对第一个，应用样式
div a:last-of-type	先找到 div 下所有a子元素，再对最后一个，应用样式
div a:nth-of-type(n)	先找到div下所有a子元素，再根据表达式 n 得到指定位置的a元素，并对其应用样式
div:only-child	只有一个直接子元素的div标签
div:empty	没有任何子元素的div标签
:root	根节点（作用到html标签上）

表达式 n 有多种方式

1. 纯数字：表示第几个元素，1开始；仅选择一个元素
2. 单词 ：odd（选择奇数位置的元素），even（选择偶数位置的元素）
3. 带有n的数学表达式：这种比较灵活，只要得到结果大于0就有效；n从0开始。
   • 2n （偶数位置）
   • 2n + 1 （奇数位置）
   • 3n （3的倍数位置）
   • -n+3（前3个元素）… 其他尽情发挥

目标伪类选择器

:target 选择当前匹配的所有元素，且匹配元素被相关URL指向。
配合锚点使用，给当前点击的锚点指向的元素附加样式
简单来说，就是控制锚点指向元素的样式

UI元素状态 伪类选择器

:enabled 匹配所有 form表单中可用元素
:disabled 匹配所有 form表单中不可用元素
:checked 匹配所有 form表单中被选中的元素（radio，checkbox）
:selection 匹配被用户选中或者高亮部分的元素
:focus 获得焦点时的样式
select获取选中的值 直接取value即可

否定伪类选择器

:not 对现有结果取反 附加样式
:not(其他伪类选择器)：对原有伪类选择器取反

链接伪类选择器

:link 未访问过
:visited 访问过
:hover 鼠标悬浮
:active 激活

伪元素选择器

伪元素，就是在现有的html 元素内的开始或者结束位置新增元素，由于新增的元素，在html结构无法查看，故称伪元素。常用于实现比较简单的子元素
新增元素默认为行内元素，可通过 display 调整类型
权重为1

::before

::after

对伪元素再赋予伪类选择器样式

outer2 内部的一个伪元素，默认不显示

div.outer2::after{
   display: block;
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    visibility: hidden;
    background: rgba(0, 0, 0, 0.3) url("../img/avatar.png") no-repeat center;
}

使用伪类选择器使其显示 selector:伪类选择器: 伪元素{}
相当于在伪元素 中间插入一个伪类选择器

div.outer2:hover::after{
    visibility: visible;
}

伪类选择器应用到其他元素

父类元素的伪类选择器样式应用到子元素上

        <div class="outer">
            <div class="inner"></div>
        </div>

鼠标悬浮 父盒子，将子盒子的宽度设置为 比父盒子小20px的值

 .outer:hover .inner{
     width: calc(100% - 20px);
 }

伪类选择器进阶

给当前元素添加伪类效果

selector:hover{....}

给当前元素的伪元素 after 添加伪类效果

div:hover::after{...}

给其他普通元素添加伪类效果

selector:hover 目标元素相对于当前元素的相对选择器 {…}

• 给后代元素添加伪类效果 (div 触发，作用到div后代p元素)

div:hover p{}

• 给子代元素添加伪类效果 (div 触发，作用到div子代p元素)

div:hover > p{}

• 给后面兄弟元素添加伪类效果 (div 触发，作用到div后面兄弟p元素)

div:hover + p{}

给其他伪元素添加伪类效果

给 后代元素p内的伪元素 after 添加效果

div:hover p:after{...}

边框盒模型

在html中，盒子默认是内容盒模型；这种模型下：盒子实际占用尺寸 = 宽高 + padding + 边框；在后续调整边框，padding的时候，需要再次调整宽高以保证实际尺寸不变 这其实是不太友好的

因此C3推出了另一种盒子模型，这种模型是以盒子设置的宽高为准，padding 和 边框 不再撑大盒子尺寸。

box-sizing：content-box （默认，内容盒模型） | border-box （边框盒模型）

C3其他特性

C3滤镜 filter

filter 可以给元素应用模糊，颜色偏移等效果
语法： filter: 特效函数(参数);

1. 图片模糊处理

img{
    filter: blur(1px); //距离越大，越模糊
}

计算盒子宽高

calc （参数）;可以进行 + - * / 简单计算 ，如果采用百分数，则是当前盒子的父盒子宽高为基准
运算符两边必须有空格

div > child {
	/*子盒子比父盒子小 20px*/
	width: calc(100% - 20px);
}