CSS3选择器 | 每个前端开发者必须要掌握的技术

属性选择符

如果能够灵活运用属性选择器,目前为止需要依靠id或class名才能实现的样式 完全可以使用属性选择器来实现。

  • E[att] {} : 选择具有att属性的E元素
  • E[att="val"]{}: 选择具有att属性且属性值等于val的E元素
  • E[att~="val"]{}:用于选取属性值中包含指定词汇的元素
  • E[att|="val"] {}:选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素,如果属性值仅为val,也将被选择
  • E[att*="val"]{}:选择具有att属性且属性值为包含val的字符串的E元素
  • E[att^="val"] {}:选择具有att属性且属性值为以val开头的字符串的E元素
  • E[att$="val"] {}:选择具有att属性且属性值为以val结尾的字符串的E元素

伪类选择符

1. 结构性伪类选择器

css中已经定义好的选择器,不能随便起名字

选择符 含义
:root 将样式绑定到页面的根元素中
:not 排除某个选择器样式
:empty 使用该选择器来制定当元素内容为空白时使用的样式
:first-child 单独指定第一个子元素的样式
:last-child 单独指定最后一个子元素的样式

2. 选择奇偶行

  • nth-child(odd)与nth-child(even):
    不足之处:
    nth-child选择器在计算子元素时,第奇数个元素还是偶数个元素时,是连同父元素内的所有 子元素一起计算的(默认匹配他们得是相同的子元素)

  • nth-of-type(odd)奇数和:nth-of-type(even)偶数:完美解决上面的问题

3.循环使用样式

:nth-child(n):选取每一行

n:所有的行

2n:每2行选择一行

3n:每3行选择一行

n+2:除第1行外所有的行

2n+4:从第4行开始隔1行选择1行

:nth-last-child(n):从后向前选择,n为参数

n:所有行

2:倒数第2行

-n+3:最后3行

:only-child:只有一个元素时使用

4.目标伪类选择器
:target

  • 使用该选择器来对页面中的某个target元素(锚记链接)指定样式

5.UI 元素状态伪类选择器

选择器 含义
E:enabled 匹配所有用户界面(form表单)中处于可用状态的E元素
E:disabled 匹配所有用户界面(form表单)中处于不可用状态的E元素
E:checked 匹配所有用户界面(form表单)中处于选中状态的元素E
E:selection 匹配E元素中被用户选中或处于高亮状态的部分

6.动态伪类选择器

选择器 含义
E:link 选择匹配的E元素,而且匹配元素被定义了超链接并未被访问过
E:visited 选择匹配的E元素,而且匹配元素被定义了超链接并已被访问过
E:active 选择匹配的E元素,且匹配元素被激活。(以上常用于链接描点和按钮上)
E:hover 选择匹配的E元素,且用户鼠标停留在元素E上。IE6及以下浏览器仅支持a:hover
E:focus 选择匹配的E元素,而且匹配元素获取焦点

7.伪类和伪元素的区别

css伪类

  • 状态伪类基于元素当前状态进行选择的。
  • 结构伪类利用dom树进行元素过滤,通过文档结构的互相关系来匹配元素。

css伪元素

  • 对元素中的特定内容进行操作,而不是描述状态
  • css3为了区分两者伪类使用单冒号,伪元素使用双冒号,但因为兼容问题现在大部分还是用单冒号

8.层级选择器

相邻兄弟选择器

  • li + li:后边相邻的选择器会被选中,第一个li不会被选中

通用兄弟选择器

  • li ~ li:li后面的所有li元素被选中

子选择器

  • ul> li:ul后面直接的li元素被选中

9.渐进增强、优雅降级

渐进增强(Progressive Enhancement)

  • 一开始就针对低版本浏览器进行构建页面,完成基本的功能,然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

优雅降级(Graceful Degradation)

  • 一开始就构建站点的完整功能,然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用,然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

区别

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

CSS3属性

a)文本阴影

例:

text-shadow:5px 5px 5px #f66;

指定多个阴影:(参数形式为X坐标 Y坐标 阴影的模糊程度 阴影颜色)

text-shadow:10px 10px #f66,40px 35px #f00,70px 60px #000;

b)自动换行

word-break

  • normal :使用浏览器默认换行规则

  • keep-all:只能在半角空格或连接字符处换行

  • break-all:允许在单词内换行(对于标点符号来说,允许标点符号位于行首,不过在IE中是不可以的)

c)word-wrap

让长单词与URL地址自动换行

  • normal:只在允许的断字点换行(浏览器保持默认处理)

  • break-word:属性允许长单词或 URL 地址换行到下一行。

d)RGB:

  • 是一种色彩标准,是由红®、绿(G)、蓝(B)的变化以及相互叠加来得到各式各样的颜色。
  • RGBA是在RGB的基础上增加了控制alpha透明度的参数。

语法:

color:rgba(R,G,B,A)
  • 以上R、G、B三个参数,正整数值的取值范围为:0 - 255。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。
  • A为透明度参数,取值在0~1之间,不可为负值。

e)圆角

border-radius:5px;
  • 如果有两个值:第一个值表示左上角、右下角;第二个值表示右上角、左下角。

  • 如果有三个值:第一个值表示左上角;第二个值表示右上角、左下角;第三个值表示右下角。

f)盒子阴影

box-shadow:5px 5px 10px #f66;

添加多个阴影,用逗号隔开即可。

如:

.box_shadow{
  box-shadow:4px 2px 6px #f00, 
  -4px -2px 6px #000, 
  0px 0px 12px 5px #33CC00 inset;
}

CSS3自适应

width :

fill-available/fit-content/max-content/min-content
  • fill-available:充满整个可用宽度和可用高度

  • fit-content:将元素宽度收缩为内容宽度

  • max-content:内部元素宽度值最大的那个元素的宽度=最终容器的宽度。如 出现文本,则相当于文本不换行

  • min-content:内部元素最小宽度值最大的那个元素的宽度=最终容器的宽度

注意:以上属性值需要加前缀


补充

calc函数:此CSS函数让你在声明CSS属性值时执行一些计算

语法:

width: calc(100% - 80px); // +-×÷运算符都可使用

注:

用 0 作除数会让 HTML 解析器抛出异常;

  • “+” 和 “-” 运算符的两边必须始终要有空白符。比如 calc(50% -8px) 会被解析成为一个无效的表达式:一个百分比后跟一个负数长度值。
  • 而 calc(8px + -50%) 会被解析成为一个长度后跟一个加号再跟一个负百分比。
  • “*” 和 “/” 运算符不需要空白符,但考虑到统一性,仍然推荐加上空白符。

Git 实用技巧

11-24
这几年越来越多的开发团队使用了Git,掌握Git的使用已经越来越重要,已经是一个开发者必备的一项技能;但很多人在刚开始学习Git的时候会遇到很多疑问,比如之前使用过SVN的开发者想不通Git提交代码为什么需要先commit然后再去push,而不是一条命令一次性搞定; 更多的开发者对Git已经入门,不过在遇到一些代码冲突、需要恢复Git代码时候就不知所措,这个时候哪些对 Git掌握得比较好的少数人,就像团队中的神一样,在队友遇到 Git 相关的问题的时候用各种流利的操作来帮助队友于水火。 我去年刚加入新团队,发现一些同事对Git的常规操作没太大问题,但对Git的理解还是比较生疏,比如说分支和分支之间的关联关系、合并代码时候的冲突解决、提交代码前未拉取新代码导致冲突问题的处理等,我在协助处理这些问题的时候也记录各种问题的解决办法,希望整理后通过教程帮助到更多对Git操作进阶的开发者。 本期教程学习方法分为“掌握基础——稳步进阶——熟悉协作”三个层次。从掌握基础的 Git的推送和拉取开始,以案例进行演示,分析每一个步骤的操作方式和原理,从理解Git 工具的操作到学会代码存储结构、演示不同场景下Git遇到问题的不同处理方案。循序渐进让同学们掌握Git工具在团队协作中的整体协作流程。 在教程中会通过大量案例进行分析,案例会模拟在工作中遇到的问题,从最基础的代码提交和拉取、代码冲突解决、代码仓库的数据维护、Git服务端搭建等。为了让同学们容易理解,对Git简单易懂,文章中详细记录了详细的操作步骤,提供大量演示截图和解析。在教程的最后部分,会从提升团队整体效率的角度对Git工具进行讲解,包括规范操作、Gitlab的搭建、钩子事件的应用等。 为了让同学们可以利用碎片化时间来灵活学习,在教程文章中大程度降低了上下文的依赖,让大家可以在工作之余进行学习与实战,并同时掌握里面涉及的Git不常见操作的相关知识,理解Git工具在工作遇到的问题解决思路和方法,相信一定会对大家的前端技能进阶大有帮助。

实用主义学Python(小白也容易上手的Python实用案例)

12-24
原价169,限时立减100元! 系统掌握Python核心语法16点,轻松应对工作中80%以上的Python使用场景! 69元=72讲+源码+社群答疑+讲师社群分享会  【哪些人适合学习这门课程?】 1)大学生,平时只学习了Python理论,并未接触Python实战问题; 2)对Python实用技能掌握薄弱的人,自动化、爬虫、数据分析能让你快速提高工作效率; 3)想学习新技术,如:人工智能、机器学习、深度学习等,这门课程是你的必修课程; 4)想修炼更好的编程内功,优秀的工程师肯定不能只会一门语言,Python语言功能强大、使用高效、简单易学。 【超实用技能】 从零开始 自动生成工作周报 职场升级 豆瓣电影数据爬取 实用案例 奥运冠军数据分析 自动化办公:通过Python自动化分析Excel数据并自动操作Word文档,最终获得一份基于Excel表格的数据分析报告。 豆瓣电影爬虫:通过Python自动爬取豆瓣电影信息并将电影图片保存到本地。 奥运会数据分析实战 简介:通过Python分析120年间奥运会的数据,从不同角度入手分析,从而得出一些有趣的结论。 【超人气老师】 二两 中国人工智能协会高级会员 生成对抗神经网络研究者 《深入浅出生成对抗网络:原理剖析与TensorFlow实现》一书作者 阿里云大学云学院导师 前大型游戏公司后端工程师 【超丰富实用案例】 0)图片背景去除案例 1)自动生成工作周报案例 2)豆瓣电影数据爬取案例 3)奥运会数据分析案例 4)自动处理邮件案例 5)github信息爬取/更新提醒案例 6)B站百大UP信息爬取与分析案例 7)构建自己的论文网站案例
©️2020 CSDN 皮肤主题: 程序猿惹谁了 设计师: 上身试试 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值