css小技巧
上一篇主要就是css的一些常用的指定方式。但是看着就是很简单的一种语言,甚至都不需要缩写。
但是看了书发现还是有一些高级用法的。
根据屏幕大小来指定使用哪个css,这个不就可以用在定义手机端样式和pc端样式啊。
1 | <link href="lounge-mobile.css" rel="sytlesheet" media="screen and (max-device-width: 480px)"> |
这里就是指定了这个css只有在有屏幕的设备同时设备屏幕宽度不能超过480像素。
当然我们可以不在link标记内使用,原生css里也可以指定
1 | @media screen and (min-device-width: 481px) { |
上面这个就是所有屏幕宽度大于481像素都可以使用这些规则。
当然可以不光是screen,还有print这种选项。
下面这一种是之前怎么都没想到的。不过也可以看出css中伪类是需要好好学习的。
以前当我们需要给表格中不同行设置不同的背景色或者字体什么的,都是通过不同的class来定义的。很多教程都是这样的:https://www.runoob.com/try/try.php?filename=trycss_table_fancy
但是其实我们是可以借用css中的伪类来实现。
1 | p:nth-child(2n) { |