《精通CSS：高级Web标准解决方案》 知识点汇总
Unsplash
- 已访问链接和未访问链接的简写方式
a:visited:hover {color:#fff}；
-
子选择器在IE7和更高版本中均支持子，但在IE7中有一个小 bug，如果父元素和子元素之间有 HTML 注释，就会出问题
-
为了使注释更有意义，可以使用关键字来区分重要的注释，如使用
@todo来表示某些东西需要在以后进行修改、修复或复查，用@bugfix来表示代码或特定浏览器遇到的问题，用@workaround表示并不完善的权宜之计 -
为了尽可能提高页面的可访问性，在定义鼠标悬停状态时，最好在链接上添加
:focus伪类，再通过键盘移动到链接上是，这让链接显示的样式与鼠标悬停时相同 -
在下面的例子中，两个规则具有相同的特殊性，所以
:link和:visited样式将覆盖a:hover和a:active样式，为了确保不会发生这种情况，最好按照以下次序应用链式样式：a:link,a:visited,a:hover,a:focus,a:active
a:hover, a:focus, a:active {text-decoration: underline;}
a:link, a:visited {text-decoration: none;}
- 从易用性和可访问性的角度来说，通过颜色之外的某些方式让链接区别于其他内容是很重要的，这是因为许多有视觉障碍的人很难区分对比不强烈的颜色，尤其是在文本比较小的情况下，例如，有色盲症的人无法区分具有相似亮度或饱和度的某些颜色，因此，默认情况下，链接是有下划线的，但是，前端攻城狮们往往不喜欢链接的下划线，因为下划线让页面看上去比较乱，如果决定去掉链接的下划线，那么可以让链接显示为粗体，当鼠标悬停在链接上或激活链接时，可以重新应用下划线，从而增强其交互状态
a:link, a:visited {
text-decoration: none;
font-weight: bolder;
}
a:hover, a:focus, a:active {
text-decoration: underline;
font-weight: bolder;
}
- 多使用
calc()函数
.box {
border: 1px solid #000;
width:calc(100%-2px);
}
- 匹配下标是奇偶子元素
li:nth-child(odd)
li:nth0child(even)
-
属性选择器
[attr^=abc]，匹配属性/键为attr，值为abc开头的所有元素
[attr$=abc]，匹配属性/键为attr，值为abc结尾的所有元素
[attr*=abc]，匹配属性/键为attr，包含abc字符的所有元素 -
伪类选择器
:nth-child(n)在所有兄弟元素的排列
:nth-of-type(n)在相同类型的元素的排列
.box_1 p:nth-child(2) {
color: red;
}
.box_2 p:nth-of-type(2) {
color: red;
}
<section class="box_1">
<p>我一直在寻找不停奔跑</p>
<p>跨过山间和海的问号</p>
</section>
<section class="box_2">
<p>穿越苦涩只为和你拥抱</p>
<p>微笑煎熬最后的美好</p>
</section>
运行结果_1
.box_1 p:nth-child(2) {
color: red;
}
.box_2 p:nth-of-type(2) {
color: red;
}
<section class="box_1">
<span>追梦的蚂蚁</span>
<p>我一直在寻找不停奔跑</p>
<p>跨过山间和海的问号</p>
</section>
<section class="box_2">
<span>追梦的蚂蚁</span>
<p>穿越苦涩只为和你拥抱</p>
<p>微笑煎熬最后的美好</p>
</section>
运行结果_2
-
转义字符
&&
￥&yan;
<<
>>
空格   -
线性渐变
background-image: linear-gradient(black, blue);
background-image: linear-gradient(-45deg, black 0%, blue 20%, red 50%);
- 径向渐变
background-image: radial-gradient(at 400px 400px, black, white);
background-image: radial-gradient( ellipse 200px 100px at 100px 10px, black, white);
background-image: radial-gradient(circle 200px at 0 100%, blue, orange);
- 阴影
box-shadow: 0 0 10px blue;
- 倒影
-webkit-box-reflect: below 20px;
- 蒙版
-webkit-mask-image: linear-gradient(rgba(123,123,1,1) 20%, rgba(122,0,34,0.2));
-webkit-mask-image: url(./img/mask.png);
-webkit-mask-repeat: no-repeat;
运行结果
- 箭头
div {
border-top: 1px solid red;
border-left: 1px solid red;
width: 40px;
height: 40px;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
- 电话，短信，邮件
<a href="tel:18897778730">18897778730</a>
<a href="sms:10086">10086</a>
<a href="mailto:abc@qq.com">邮件</a>
本篇的内容到这里就全部结束了，常用的 CSS 样式重置文件我已经发到了 GitHub Reset.css，本篇文章知识点来源 精通CSS：高级Web标准解决方案(第2版).pdf 及 CSS速查总表 已上传至百度网盘，有需要的同学可自行下载
End of File
行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下喜欢和关注，为了我能早日成为简书优秀作者献上一发助攻吧，谢谢！^ ^
