當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

伪类元素使用

發布時間：2025/3/14 编程问答 18 豆豆

生活随笔收集整理的這篇文章主要介紹了伪类元素使用小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

? ? :before　　偽元素可以在元素的內容前面插入新內容。

　　例如在一段文字前面加一個直角三角形

　　css是h1:before{width: 0; height: 0; border-bottom: 100px solid red; border-right: 100px solid transparent;}

　　html是 <h1>Hello world</h1>

? ? :after ? ? ? ? 偽元素可以在元素的內容后面插入新內容。

　　例如在一段文字后面加一個直角三角形

　　css是h1:before{width: 0; height: 0; border-bottom: 100px solid red; border-right: 100px solid transparent;}

　　html是 <h1>Hello world</h1>?

至于選取元素的第一個子元素或者是匹配所有<p>元素下的第一個<li>元素詳情見http://www.w3school.com.cn/css/css_pseudo_classes.asp?

注：

使用：after清楚浮動的例子

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> <style type="text/css"> /*在此定義相應的類選擇器，并根據要求設置相關CSS屬性*/ /** { margin: 0px; padding: 0px; } */ .mainBox { width: 960px; /*height: 300px;*/ background-color:#cff; /*overflow: hidden;*/ /*zoom: 1;*/ } .mainBox:after{ display: "block"; clear:both; height:0; content: ""; visibility: hidden; overflow:hidden; } .leftBox { background-color:#C9F; width:740px; height: 300px; float: left; } .rightBox { background-color:#FCF; width:210px; height: 300px; margin-left:10px; float: right; } </style> </head> <body> <div class="mainBox"> <div class="leftBox"> </div> <div class="rightBox"> </div>   </div> </body> </html>

轉載于:https://www.cnblogs.com/YDshuaizai/p/7058728.html

總結

以上是生活随笔為你收集整理的伪类元素使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

元素

上一篇： webpack入门（四）——webpac
下一篇：进程间通信（IPC）介绍（转）