神奇的css选择器

最新推荐文章于 2019-08-12 13:58:11 发布

dongceha

最新推荐文章于 2019-08-12 13:58:11 发布

阅读量173

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/dongcehao/article/details/80015816

版权

前端专栏收录该内容

77 篇文章 3 订阅

订阅专栏

这几天闲来无事，就去看 css3 和 html5，这一看发现了不少以前漏掉的好东西

基础啊基础，

1、vh vw

他默认将视窗分成了 100，然后通过 1vh 就是 1% 的视窗高度，so

想要拿到 100% 高度的话，只需要 100vh 就能实现，

这样就能真正意义上的实现兼容多端，而且简单的就能实现高度居中，宽度居中

我在另一篇博客里写了，就不多写

2、rem

要配合 flexible.js (手淘的) 来使用，就能轻松实现兼容多端，这个也有很多文章

3、::selection

能选中被选中的文本，然后就可以添加效果了

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 	<title></title>
 5 	<style type="text/css">
 6 	    p{
 7 	    	font-size: 16px;
 8 	    }
 9 		::selection{
10            color:#ff0000;
11            background-color: black;
12         }
13 	</style>
14 </head>
15 <body>
16 <p>人之初，性本善，性相近，习相远，苟不教，性乃迁，教之道，贵以专。</p>
17 </body>
18 </html>

帅的一批

4、::first-letter

选中标签中的第一个字符(包括中英文)

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 	<title></title>
 5 	<style type="text/css">
 6 	    :first-letter{
 7 	    	font-size: 20px;
 8 	    	font-weight: bolder;
 9 	    }
10 	</style>
11 </head>
12 <body>
13 <p>人之初，性本善，性相近，习相远</p>
14 <p>I'm not unserstand</p>
15 <div>I'm not unserstand</div>
16 </body>
17 </html>

5、:target

当前的 html 锚，我第一感觉就是可以用来做 nav 跳转(效果不是很好倒是真的)

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 	<title></title>
 5 	<style type="text/css">
 6 		.nav{
 7 			display: none;
 8 		}
 9 		:target{
10 			display: block;
11 		}
12 	</style>
13 </head>
14 <body>
15 <a href="#nav1">nav1</a>
16 <a href="#nav2">nav2</a>
17 <a href="#nav3">nav3</a>
18 <div id="nav1" class="nav">
19 	<p>nav1</p>
20 	<p>nav1</p>
21 	<p>nav1</p>
22 </div>
23 <div id="nav2" class="nav">
24 	<p>nav2</p>
25 	<p>nav2</p>
26 	<p>nav2</p>
27 </div>
28 <div id="nav3" class="nav">
29 	<p>nav3</p>
30 	<p>nav3</p>
31 	<p>nav3</p>
32 </div>
33 </body>
34 </html>