一、css中的calc
在CSS中有calc属性用于尺寸的计算，可以让百分比和像素值进行运算。
div {width : calc(100% - 30px);}
为了兼容性
/*Firefox*/
-moz-calc(expression);
/*chrome safari*/
-webkit-calc(expression);
需要注意：减号前后必须有空格。
在less中，
div {
@diff : 30px;
width : calc(~"100% - @{diff}");
or calc(~"100% - "@diff)
}
二、CSS选择器中功能最强大的莫过于伪类
应用场景
学校网络实验课程有互评题部分，这部分是同学们互相评价答案对错。
大家当然都是互相打对勾了。
一个HTML页面，有100题，每道题都需要勾选“正确”，“错误”，“部分正确”三个选项，我想F12以下，写一个js语句一下子选中全部正确的单选框。
:not(selector) $("input :not([type=text])")
:contains(text) $("input:contains('正确')")
组合起来 $("input:contains('正确'):not(contains('部分正确'))")
其它CSS伪类选择器
| type | child |
|---|---|
| :first-of-type | :first-child |
| :last-of-type | :last-child |
| :only-of-type | :only-child |
| :nth-of-type(n) | :nth-child(n) |
| :nth-last-of-type(n) | :nth-last-child(n) |
三、使用伪类选定第k个元素
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
/*使用first-child和last-child*/
p:first-child {
color: red;
}
p:last-child {
color: blue;
}
/*nth-child(参数),比较灵活,注意n表示自然数,从0,1,2,开始;nth-child(编号),编号从1开始*/
p:nth-child(0) {
color: red;
}
/*nth-last-child(参数)表示倒数几个元素*/
p:nth-last-child(3) {
color: green;
}
/*因为n从0~无穷,当n小于1时没有意义,所以下列css选定前两个元素*/
p:nth-child(-n+2) {
color: purple;
}
/*因为n从0~无穷,下列css选定的是1,3,5,7...元素*/
p:nth-child(2n+1) {
color: yellow;
}
</style>
</head>
<body>
<p>one</p>
<p>two</p>
<p>three</p>
<p>four</p>
<p>five</p>
<p>six</p>
</body>
</html>
四、hover伪类不生效的原因
有一个div，div内文本颜色为蓝色，当鼠标悬浮时div内文本颜色变红。
<html>
<head>
<meta charset="utf8" />
<style>
div:hover {
color: red;
}
</style>
</head>
<body>
<div style="color:blue">haha</div>
</body>
</html>
以上代码并不能实现这样的功能，div内的文本一直是蓝色。原因在于：内联形式的属性选择比外部样式优先级要高，在外部样式中使用important可以解决问题。