CSS3---4.伪元素选择器
生活随笔
收集整理的這篇文章主要介紹了
CSS3---4.伪元素选择器
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
a)重點：E::before、E::after
i.是一個行內元素，需要轉換成塊:display:block float:** position:
ii.必須添加content,哪怕不設置內容，也需要content:””
iii.E:after、E:before 在舊版本里是偽類，在新版本里是偽元素，新版本下E:after、E:before會被自動識別為E::after、E::before，按偽元素來對待，這樣做的目的是用來做兼容處理
iv.E::before: 定義在一個元素的內容之前插入content屬性定義的內容與樣式
v.E::after: 定義在一個元素的內容之后插入content屬性定義的內容與樣式
vi.注意：
1.IE6、IE7與IE8（怪異模式Quirks mode）不支持此偽元素
2.CSS2中 E:before或者E:after，是屬于偽類的，并且沒有偽元素的概念，CSS3中 提出偽元素的概念 E::before和E::after，并且歸屬到了偽元素當中，偽類里就不再存在E:before或者 E:after偽類
b)E::first-letter文本的第一個字母或字(不是詞組)
c)E::first-line 文本第一行
d)E::selection 可改變選中文本的樣式 <style>*{padding: 0;margin: 0;}body{padding: 200px;}div{height: 200px;float: left;}div:nth-of-type(1){width: 300px;background-color: yellowgreen;}div:nth-of-type(2){width: 150px;background-color: skyblue;position: relative;}div:nth-of-type(2)::before,div:nth-of-type(2)::after{position: absolute;content: "";width: 40px;height: 40px;border-radius: 50%;background-color: #fff;}div:nth-of-type(2)::before{left: -20px;top:-20px;}div:nth-of-type(2)::after{left: -20px;bottom:-20px;}
</style>
<body><div></div><div></div>
</body>
瀏覽器渲染如下:
轉載于:https://www.cnblogs.com/Tobenew/p/10524953.html
總結
以上是生活随笔為你收集整理的CSS3---4.伪元素选择器的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 对象的释放Dispose和Close对比
- 下一篇： 乐高机器人linux,如何搭建自己的乐高