（13）把「可以動的盒子」更優雅的展示——① 「偽元素」妙用

07-15

來自專欄 Oli的前端一萬小時

本知識學慣用時：4小時，總第64/10000小時

前言：「偽元素」在我們創建樣式的時候用處很多，它可以大大簡化我們的代碼量，還可以做一些出乎意料的動作。

一、認識「偽元素」

① 偽元素用於創建一些不在文檔樹中的元素，並為其添加樣式。

html

<body> <h6>Hello，Oli的前端一萬小時</h6> <p>Oli的前端一萬小時</p> <input type="text" placeholder="Oli的前端一萬小時"></body>

css

h6::first-letter{ font-size: 20px;} /*如果我們不用偽元素，我們就會在 html 中用更多的代碼表示--如加 span ，然後再在 css 中對 span 加樣式。*/ h6::after{ content: @2018}/*可以很直接的在 h6 後邊添加內容。*//*但一定要注意，這個 content 裡邊可以是空字元串，但 content 必須要寫，不然這個偽元素就沒有效了。*/p::selection{ color: red;}input::-webkit-input-placeholder{ color: blue}/*對於 placeholder ，不同瀏覽器寫法可能是不一樣的，這裡對於 chrome 瀏覽器我們前邊要加上 -webkit- ,以及 input- 。*/

②

::before ::after

-- element::before 在 element 內部創建一個行內元素，作為 element 的第一個孩子；
-- element::after 在 element 內部創建一個行內元素，作為 element 的最後一個孩子；

-- 用::before ::after 的目的是為了省標籤；
-- 其中 content 是必不可少的。

三、偽元素的用法

① 清除浮動

html

<body> <ul class="navbar clearfix"> <li><a href="#">首頁</a></li> <li><a href="#">文章</a></li> <li><a href="#">作品</a></li> <li><a href="#">關於</a></li> </ul></body>

css

li { list-style: none;}.clearfix::after { content:; display: block; clear: both;}.navbar { background: #000;}.navbar>li { float: left; margin: 5px 10px;;}.navbar a { color: #fff;}

② 替代標籤

html

<div class="bubble">Hello,Oli的前端一萬小時</div>

css

.bubble {/*我們先對邊框加樣式*/ position: relative;/*為下邊的絕對定位增加一個錨點。*/ padding: 10px; border-radius: 3px; background: #fff; border: 1px solid #000; display: inline-block;}.bubble::before { content:;/*這個偽元素選擇器的意思就是：在 bubble 內部創建一個行內元素，作為 bubble 的第一個孩子。*//*其實就是我們要的那個「小三角」。*/ width: 10px; height: 10px; border-top: 1px solid #000; border-left: 1px solid #000;/*我們加了上邊框和左邊框，想像一下一個塊，加了這兩個邊框然後對其旋轉，它就會呈現出一個「三角」。*/ background: #fff; display: inline-block; transform: rotateZ(45deg);/*這裡使用的是 CSS3 的屬性，讓上邊加了邊框的塊去「45°旋轉」。*/ position: absolute; top: -6px;/*設置為絕對定位，使其脫離文檔流，然後讓他向上偏移。*/ /*一旦設置了絕對定位，那麼就需要在其父容器上設置一個「錨點」來偏移。*//*至於到底偏移多少合適，我們常常採用的方法是：通過檢查元素的方式，在開發者工具後台，用滑鼠滾動到最合適的位置。*/}

??舉一反三：

-- 實心上三角

html

<div class="bubble">Hello,Oli的前端一萬小時</div>

css

.bubble { position: relative; padding: 10px; border-radius: 3px; background: #fff; border: 1px solid #000; display: inline-block;}.bubble::before { content:; width: 0; height: 0; border-top: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid grey; border-left: 10px solid transparent; position: absolute; top: -20px;}

-- 紅心內右角

html

<div class="bubble">Hello,Oli的前端一萬小時</div>

css

.bubble { position: relative; padding: 10px; border-radius: 3px; background: #fff; border: 1px solid #000; display: inline-block;}.bubble::before { content:; width: 0; height: 0; border-top: 10px solid transparent; border-right: 10px solid red; border-bottom: 10px solid transparent; border-left: 10px solid transparent; transform: rotateZ(135deg); position: absolute; right: -10px; top: -10px;}

③ 延伸——偽類選擇器的應用：

html

今天的心情: <input type="checkbox">

css

input[type=checkbox] { -webkit-appearance: none;/*去掉默認樣式--一個框*/ appearance: none; background: url(http://7xpvnv.com2.z0.glb.qiniucdn.com/b6dcd011-23cc-4d95-9e51-9f10100103bd.png) 0 0 no-repeat; display: inline-block; width: 20px; height: 20px; background-size: contain; vertical-align: middle;/*為了使其和前面的文字對齊*/ outline: none;}input[type=checkbox]:checked {/*偽類選擇器：對一個 checkbox 或 radio 勾選上的狀態。*//*那當我們用滑鼠去勾選的時候，它就會顯示成以下的樣式。*/ -webkit-appearance: none; appearance: none; background: url(http://7xpvnv.com2.z0.glb.qiniucdn.com/538f26f0-6f3e-48d5-91e6-5b5bb730dd19.png) 0 0 no-repeat; display: inline-block; width: 20px; height: 20px; background-size: contain; vertical-align: middle; }

後記：下一篇我們總結一下實際工作中，讓盒子「居中」擺放都有哪些方法。屬於特別重要的篇幅，隨時都會用到。

加油，越努力越幸運！

歡迎繼續關注下文：

（14）把「可以動的盒子」更優雅的展示——② 「居中」盒子

（本文版權歸「Oli的前端一萬小時」所有，轉載需說明來源）