a:visited:hover {color:#fff};
@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,有需要的同学可自行下载