《精通CSS：高级Web标准解决方案》 知识点汇总
《精通CSS：高级Web标准解决方案》 知识点汇总
Nian糕
修改于 2024-03-19 17:58:00
修改于 2024-03-19 17:58:00
- 已访问链接和未访问链接的简写方式
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>
.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>
- 转义字符
&&￥&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，有需要的同学可自行下载
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018.11.01 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
相关产品与服务
短信
腾讯云短信（Short Message Service，SMS）可为广大企业级用户提供稳定可靠，安全合规的短信触达服务。用户可快速接入，调用 API / SDK 或者通过控制台即可发送，支持发送验证码、通知类短信和营销短信。国内验证短信秒级触达，99%到达率；国际/港澳台短信覆盖全球200+国家/地区，全球多服务站点，稳定可靠。