CSS3选择器及新增属性

孤街浪徒 提交于 2019-11-28 16:02:26

1 渐进增强和优雅降级

渐进增强:针对低版本浏览器进行构建页面,保证最基本的功能,然后在针对高级浏览器进行效果、交互等改进和最佳功能达到更好的用户体验。

优雅降级:一开始就构建完整的功能,然后在针对低版本浏览器进行兼容。

  优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同事保证其根基处于安全地带。

2 CSS3选择器

2.1 属性选择器

a[title]
a[title=baidu]    选中title属性为baidu
a[href*=sina]   href包含sina的元素
a[href^=http]   href属性值以value(http)开始的a标签
a[href$=com]    href属性以com结尾的a标签

注:若选择的值含有"."、”:"等特殊字符,则需引号包含

2.2 伪类选择器

2.2.1 结构伪类(位置伪类)

:link,:visited,:hover,:active;
ul:first-child    选中第一个ul        ul:last-child    选中最后一个ul
li:nth-child(3)    使用条件:是它父元素的第三个子元素且必须是一个li标签
li:nth-last-child(3):倒数第三个元素

2.2.2 空伪类

E:empty 选中没有任何子节点的元素,子节点中没有任何内容(包括空格)

2.2.3 目标伪类

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

2.2.4 排除伪类

E:not(selector)除selector选择器之外的元素

2.2.5 UI状态伪类选择器

:enble    
:disable
:checked
::selection    设置被鼠标选中时的样式,给器设置背景和文本颜色,不能设置其他属性

2.3 伪元素选择器

E::first-letter    第一行的第一个文字
E ::first-line    文本第一行
E::selection    可改变选中文本的样式
E::befor和E::after 

":"和"::"区别在于区分伪类和伪元素

2.4 层次选择器

2.4.1 后代选择器

(子孙)后代选择器(也叫包含选择器)    div p
(儿子)子元素选择器    div>p
(兄弟)相邻选择器    div+p    选择紧跟在div后面的p标签    eg:li+li
(兄弟)通用选择器    div~p    选中div后面所有的兄弟p标签

2.5 其他选择器

p:only-child    是某个元素中的且只为父元素中的唯一一个子元素
p:first-of-type    选中同级别中同类型的第一个标签
:last-of-type    选中同级别中同类型的最后一个标签
:nth-of-type(n)    选中同级别中同类型的第n个标签
:nth-last-of-type(n)    选中同级别中同类型的倒数第n个标签
:only-of-type    选中父元素中唯一类型的某个标签
:root    选择文档的根元素    是指位于文档树中最顶层结构的元素

 3 私有属性

CSS3的浏览器私有属性前缀是一个浏览器生产商经常使用的一种方式。它暗示该CSS属性或规则尚未成为W3C标准的一部分。

 -wekit- 谷歌 -moz- 火狐 -ms- IE浏览器 -o- 欧朋

4 CSS3新增属性

4.1 文字阴影

text-shadow:10px 10px 10px 10px red;/* 水平偏移量   垂直偏移量   模糊程度    阴影大小   阴影颜色    */

  多个阴影使用逗号分隔

注意:模糊度不能为负值

4.2盒子阴影

box-shadow:10px 10px 10px pink inset;
/* inset设置为内阴影 */

4.3英文换行

word-break:break-all(粗暴的断句)/keep-all(默认值,文本不会换行);

4.4圆角

border-radius
/* 1个值 四个角
2个值 左上角和右下角、右下角和左下角
3个值 左上角、右下角和左下角、右下角
4个值 左上、右上、右下、左下(顺时针)
单个设置border-(上下)-(左右)-radius */

4.5 CSS3颜色特性

rbga(255,255,255,0.1)  a 透明度 取值范围0~1

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!