css小技巧

发表于 更新于 分类于 阅读次数： 本文字数： 769 阅读时长 ≈ 1 分钟

上一篇主要就是css的一些常用的指定方式。但是看着就是很简单的一种语言，甚至都不需要缩写。

但是看了书发现还是有一些高级用法的。

根据屏幕大小来指定使用哪个css，这个不就可以用在定义手机端样式和pc端样式啊。

1
<link href="lounge-mobile.css" rel="sytlesheet" media="screen and (max-device-width: 480px)">

这里就是指定了这个css只有在有屏幕的设备同时设备屏幕宽度不能超过480像素。

当然我们可以不在link标记内使用，原生css里也可以指定

1
2
3
4
5
@media screen and (min-device-width: 481px) {
  #guarantee {
    margin-right: 250px;
    }
  }

上面这个就是所有屏幕宽度大于481像素都可以使用这些规则。

当然可以不光是screen，还有print这种选项。

下面这一种是之前怎么都没想到的。不过也可以看出css中伪类是需要好好学习的。

以前当我们需要给表格中不同行设置不同的背景色或者字体什么的，都是通过不同的class来定义的。很多教程都是这样的：https://www.runoob.com/try/try.php?filename=trycss_table_fancy

但是其实我们是可以借用css中的伪类来实现。

1
2
3
4
5
6
p:nth-child(2n) {
  background-color: red;
  }
p:nth-child(2n+1) {
  background-color: green;
  }