CSS3:新增的样式

• CSS3:新增的样式
  • 1.选择器
  • 2.属性选择器:
  • 3.伪类选择器
  • 4.伪元素选择器
  • 5.颜色设置:
  • 6.文本(shadow阴影)
  • 6.盒模型
  • 7.边框圆角

1.选择器

E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素
E:nth-last-child(n)：匹配元素类型为E且是父元素的倒数第n个子元素
E:first-child：匹配元素类型为E且是父元素的第一个子元素
E:last-child：匹配元素类型为E且是父元素的最后一个子元素
E:only-child：匹配元素类型为E且是父元素中唯一的子元素
E:nth-of-type(n)：匹配父元素的第n个类型为E的子元素
E:nth-last-of-type(n)：匹配父元素的倒数第n个类型为E的子元素
E:first-of-type：匹配父元素的第一个类型为E的子元素
E:last-of-type：匹配父元素的最后一个类型为E的子元素
E:only-of-type：匹配父元素中唯一子元素是E的子元素
E:empty： 选择一个空的元素
E:enabled： 可用的表单控件
E:disabled： 失效的表单控件  禁用状态
E:checked： 选中的checkbox
E:not(s)： 不包含某元素
E:target： 对应锚点的样式
E > F E：元素下面第一层子集
E ~ F E：元素后面的兄弟元素
E + F ：紧挨着的兄弟元素
E[data-attr]： 含有data-attr属性的元素
E[data-attr='ok']： 含有data-attr属性的元素且它的值为“ok”
E[data-attr^='ok']： 含有data-attr属性的元素且它的值的开头含有“ok”
E[data-attr$='ok']： 含有data-attr属性的元素且它的值的结尾含有“ok”
E[data-attr*='ok']： 含有data-attr属性的元素且它的值中含有“ok”

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

2.属性选择器:

属性选择器的权重为10

a) E[attribute] 表示存在 attr 属性即可;

​ div[class]

b) E[attr=val] 表示属性值完全等于 val;

​ div[class=mydemo]

c) E[attr*=val] 表示的属性值里包含 val 字符并且在 "任意" 位置;

​ div[class*=mydemo]

d) E[attr^=val] 表示的属性值包含 val 字符并且在 "开始" 位置;

​ div[class^=mydemo]

e) E[attr$=val] 表示的属性值包含 val 字符并且在 "结束" 位置;

​ div[class$=mydemo]

3.伪类选择器

a) 之前学习的: a:hover a:link a:active a:visited

b) 以某元素相对于其父元素或兄弟元素的位置来获取元素的 结构伪类

​ f) E:first-child: 查找 E这个元素的父元素的第一个子元素 E

​ g) E:last-child: 最后一个子元素

​ h) E:nth-child(n): 第n个子元素, 计算方法是 E 元素的全部兄弟元素

​ i) E:nth-last-child(n): 同E:nth-child(n) 相似 只是倒着计算

​ j) E:nth-child(even): 所有的偶数

​ k) E:nth-child(odd): 所有的奇数

​ l) E:first-of-type 指定类型的第一个

​ m) E:last-of-type 指定类型的最后一个

​ n) E:nth-of-type: 指定类型E的第n个

​ u) E:empty 选中没有任何子节点的 E 元素, 注意, 空格也算子元素

​ p) E:target 结合锚点进行使用, 处于当前锚点的元素会被选中

​ q) 重点说明: n遵循线性变化, 其取值0,1,2,3,4...... 但是当 n<=0 时, 选取无效

c) n可是多种形式:

nth-child(2n) 偶数

nth-child(2n+1) 奇数

nth-child(5n) 5 10 15..........

nth-child(n+5) 从第5个开始(包含第5个)到最后

nth-child(-n+5) 前5个 包含第5个

4.伪元素选择器

a) 重点是: E::before, E::after 权重为1

div:nth-of-type(2)::before{
			/*必须添加content属性， 否则后期不可见*/
			content: "";
			/*默认是行级元素，如果想设置宽高，必须转换*/
			position: absolute;
		}

​ i. 是一个行内元素, 如果想设置宽高, 需要转换成块: display:block float:😗* position:**

​ ii. 必须添加 content, 哪怕不设置内容, 也需要添加 content:""

​ iii. E::after, E::brfore 在旧版本是伪类, 在新版本是伪元素, 新版本下 E:after, E:before会被自动识别为 E::after, E::before, 按伪元素来对待, 这样做的目的是用来做兼容处理

​ iv. E::before: 定义在一个元素的内容之前插入 content属性定义的内容与样式

​ v. E::after: 定义在一个元素的内容之后插入 content属性定义的内容与样式

​ vi: 注意:

​ IE6, IE7与IE8(怪异模式 Quirks mode) 不支持伪元素

​ CSS2中E::before与E::after, 是属于伪类的, 并且没有伪元素的概念, CSS3中提出伪元素的概念 E::before和E::after, 并且归属到了伪元素当中, 伪类里就不再存在E::before或者E::after伪类

​ 归属到了伪元素当中, 伪类中就不再存在E::before或者E::after伪类

b) E::first-letter 文本的第一个字母或字(不是同组)

c) E:first-line 文本第一行

d) E:selection 可改变选中文本的样式

5.颜色设置:

​ HTML5添加了一些新的颜色的表示方式

1.RGBA: 说的简单一点就是在RGB的基础上加了一个通道Alpha. RGBA在RGB的基础上多了控制alpha透明度的参数. 以上R,G,B三个参数, 正整数值的取值范围为: 0-255. 百分数值的取值范围为: 0.0%-100%, 超出范围的数值将被截至最接近的取值极限. 并非所有浏览器都支持百分数值. A参数, 取值在0~1之间, 不可为负值. RGBA比元素设置CSS的透明度更好, 因为单独的颜色可以在不影响整个元素的透明度, 他不会影响到元素的其他的属性, 比如是边框, 字体同时也不会影响到其他元素的相关透明度

a) 语法:

​ R: 红色值. 正整数|百分数

​ G:绿色值. 正整数|百分数

​ B:蓝色值. 正整数|百分数

​ A:透明度. 取值0~1之间

2.HSLA:

a) 此颜色模式与HSL相同, 只是在HSL模式上新增了Alpha透明度

b) 语法:

​ H: Hue(色调, 色相). 0(或360)表示红色, 120表示绿色, 240表示蓝色, 也可取其他数值来指定颜色. 取值为: 0~360, 过渡为: 红橙黄绿青蓝紫

​ S: Saturation(饱和度). 取值为: 0.0%~100.0%

​ L: Lightness(亮度). 取值为: 0.0%~100%, 50%是平衡值 Brightness

​ A: Alpha 透明度. 取值0-1之间.

3.关于透明度的补充说明:

a) opacity 只能针对整个盒子设置透明度, 子盒子及内容会继承父盒子的透明度

b) transparent 不同调节透明度, 始终完全透明

c) 使用rgba来控制颜色, 相对 opacity, 不具有继承性

6.文本(shadow阴影)

1.text-shadow还没有出现时, 大家在网页设计中阴影一般都是用photosshop做成图片, 现在有了css3可以直接使用text-shadow属性来指定阴影. 这个属性有两个作用, 产生阴影和模糊主体, 这样在不使用图片时能给文字增加质感

​ 语法:

box-shadow：h-shadow v-shadow blur spread color inset;
分别设置阴影：水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影

2.取值:

a) <length>: 长度值, 可以是负值, 用来指定阴影的延伸距离. 其中 X offset 是水平偏移, Y offset是垂直偏移

b) <shadow>: 阴影的模糊值, 不可以是负值, 用来指定模糊效果的作用距离

c) <color>: 指定阴影颜色, 也可以是rgba透明色

6.盒模型

1.在默认情况下, CSS设置的盒子宽度仅仅是内容区的宽度, 而非盒子的宽度. 同样, 高度类似. 真正盒子的宽度(在页面呈现出来的宽度)和高度, 需要加上一些其他的属性. 例如:

​ a) padding + border + width = 盒子的宽度

​ b) padding + border + height = 盒子的高度

​ 很明显, 这不直观, 很容易出错, 造成网页中其他元素的错位.

2.CSS3中可以通过box-sizing来指定盒模型, 即可指定为 content-box border-box

这样我们计算盒子大小的方式就发生了改变

​ a) content-box: 对象的实际宽度等于设置的width值和border, padding之和

​ b) border-box: 对象的实际宽度就等于设置的width值, 即使定义有border和padding也不会改变对象的实际宽度

7.边框圆角

border-radius 可以通过值来定义样式相同的角, 也对每个角分别定义

border-radius: *.px *.px *.px *.px: 四个值分别表示左上角, 右上角, 右下角, 左下角

a) 设置一个值: 四个角的圆角值都一样

b) 设置两个值: 第一个值控制左上/右下, 第2个值控制右上/左下

c) 设置三个值: 第一个值控制左上, 第2个值控制右上/坐下, 第三个值控制右下

d) 设置四个值: 控制四个角 左上 右上 右下 左下

e) 添加/是用来设置当前不同方向的半径值

border-radius: 100px/50px

f) 添加某个角点的圆角

border-上下-左右-radius: 100px;

border-top-right-radius: 100px;

g) 设置某个角点的两个方向上的不同圆角

border-top-right-radius: 100px 50px;

h)设置四个角点的不同方向的不同圆角值

border-radius: 100px 80px 60px 40px/20px 40px 60px 80px