css3偽元素有:1、“::after”,可在指定元素的後面插入一些內容;2、“::before”;3、“::first-letter”;4、“ ::first-line」;5、「::selection」;6、「::placeholder」。
本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。
偽元素是一個附加在選擇器末尾的關鍵字,透過偽元素您不需要藉助元素的 ID 或 class 屬性就可以對被選擇元素的特定部分定義樣式。例如透過偽元素您可以設定段落中第一個字母的樣式,或在元素之前、之後插入一些內容等等。
在 CSS1 和 CSS2 中,偽元素的使用與偽類相同,都是使一個冒號:
與選擇器連結。但在 CSS3 中,將偽元素單冒號的使用方法改為使用雙冒號::
,以此來區分偽類和偽元素。因此,建議在使用偽元素時使用雙冒號而不是單冒號。
selector::pseudo-element { property: value; }
其中,selector
為選擇器,pseudo-element
為偽元素的名稱,property
為CSS 中的屬性,value
為屬性對應的值。
CSS 中提供了一系列的偽元素,如下表所示:
#偽元素 | ||
---|---|---|
::after | p::after | |
::before | p::before | |
: :first-letter | p::first-letter | |
::first -line | p::first-line |
1. ::after
伪元素 ::after 能够在指定元素的后面插入一些内容,在 ::after 中需要使用 content 属性来定义要追加的内容,而且在 ::after 中必须定义 content 属性才会生效(没有需要插入的内容时可以将 content 属性的值定义为空"")。
下面通过一个示例来演示伪元素 ::after 的使用:
<!DOCTYPE html> <html> <head> <style> p.one::after { content:""; display: inline-block; width: 50px; height: 10px; background: blue; } p.two::after { content:"要插入的内容"; color: red; font-size: 6px; } p.three::after { content: url('./smiley.gif'); position: relative; top: 8px; } </style> </head> <body> <p class="one">伪元素 ::after</p> <p class="two">伪元素 ::after</p> <p class="three">伪元素 ::after</p> </body> </html>
运行结果如下图所示:
2. ::before
伪元素 ::before 能够在指定元素的前面插入一些内容。与 ::after 相似,::before 中也需要使用 content 属性来定义要追加的内容,而且在 ::before 中必须定义 content 属性才会生效(没有需要插入的内容时可以将 content 属性的值定义为空"")。
下面通过一个示例来演示伪元素 ::before 的使用:
<!DOCTYPE html> <html> <head> <style> p.one::before { content:""; display: inline-block; width: 50px; height: 10px; background: blue; } p.two::before { content:"要插入的内容"; color: red; font-size: 6px; } p.three::before { content: url('./smiley.gif'); position: relative; top: 8px; } </style> </head> <body> <p class="one">伪元素 ::before</p> <p class="two">伪元素 ::before</p> <p class="three">伪元素 ::before</p> </body> </html>
运行结果如下图所示:
3. ::first-letter
伪元素 ::first-letter 用来设置指定元素中内容第一个字符的样式,通常用来配合 font-size 和 float 属性制作首字下沉效果。需要注意的是,伪元素 ::first-letter 仅可以用于块级元素,行内元素想要使用该伪元素,则需要先将其转换为块级元素。
下面通过示例来演示伪元素 ::first-letter 的使用:
<!DOCTYPE html> <html> <head> <style> p::first-letter{ font-size: 2em; color: blue; } </style> </head> <body> <p>伪元素 ::first-letter</p> </body> </html>
运行结果如下图所示:
4. ::first-line
伪元素 ::first-line 用来设置指定元素中内容第一行的样式,与 ::first-letter 类似,伪元素 ::first-line 也仅可以用于块级元素,行内元素想要使用该伪元素,则需要先将其转换为块级元素。
下面通过示例来演示伪元素 ::first-line 的使用:
<!DOCTYPE html> <html> <head> <style> p::first-line{ font-size: 1.5em; color: blue; font-weight: bold; } </style> </head> <body> <p>伪元素 ::first-line 用来设置指定元素中内容第一行的样式,与 ::first-letter 类似,伪元素 ::first-line 也仅可以用于块级元素,行内元素想要使用该伪元素,则需要先将其转换为块级元素。</p> </body> </html>
运行结果如下图所示:
5. ::selection
伪元素 ::selection 用来设置对象被选中时的样式,需要注意的是,伪元素 ::selection 中只能定义元素被选中时的 color、background、cursor、outline 以及 text-shadow(IE11 尚不支持定义该属性)等属性。
下面通过示例来演示伪元素 ::selection 的使用:
<!DOCTYPE html> <html> <head> <style> p::selection{ color: red; background-color: #CCC; } </style> </head> <body> <p>伪元素 ::selection 用来设置对象被选中时的样式,需要注意的是,伪元素 ::selection 中只能定义元素被选中时的 color、background、cursor、outline 以及 text-shadow(IE11 尚不支持定义该属性)等属性。 </p> </body> </html>
运行结果如下图所示:
6. ::placeholder
伪元素 ::placeholder 用来设置表单元素(、
<!DOCTYPE html> <html> <head> <style> input.text::placeholder{ color: red; background-color: #CCC; } </style> </head> <body> <input placeholder="请输入一段文本">未使用伪元素 ::placeholder<br> <input placeholder="请输入一段文本" class="text">使用伪元素 ::placeholder 的效果 </body> </html>
运行结果如下图所示:
以上是css3偽元素有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!