CSS伪类和伪元素

最新推荐文章于 2024-09-21 21:10:14 发布

幸运的JAVA小神

最新推荐文章于 2024-09-21 21:10:14 发布

阅读量520

点赞数

分类专栏： css 文章标签： css 浏览器

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.CSS中的伪类

CSS 伪类用于向某些选择器添加特殊的效果。

语法：

<code class="hljs css has-numbering"><span class="hljs-tag">selector</span> : <span class="hljs-tag">pseudo-class</span> <span class="hljs-rules">{<span class="hljs-rule"><span class="hljs-attribute">property</span>:<span class="hljs-value"> value</span></span></span>}</code><ul style="display: block;" class="pre-numbering"><li>1</li></ul>

CSS 类也可与伪类搭配使用

<code class="hljs ruby has-numbering">selector.<span class="hljs-keyword">class</span> <span class="hljs-symbol">:</span> pseudo-<span class="hljs-class"><span class="hljs-keyword">class</span> {<span class="hljs-title">property</span>: <span class="hljs-title">value</span>}</span></code><ul style="display: block;" class="pre-numbering"><li>1</li></ul>

如下面的一段代码：

<code class="hljs livecodeserver has-numbering"><span class="hljs-operator">a</span>.red : visited {color: <span class="hljs-comment">#FF0000}</span>
<<span class="hljs-operator">a</span> class=<span class="hljs-string">"red"</span> href=<span class="hljs-string">"css_syntax.asp"</span>>CSS Syntax</<span class="hljs-operator">a</span>></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li></ul>

1.1锚伪类

在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

<code class="hljs css has-numbering"><span class="hljs-tag">a</span><span class="hljs-pseudo">:link</span> <span class="hljs-rules">{<span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#FF0000</span></span></span></span>} <span class="hljs-comment">/* 未访问的链接 */</span>
<span class="hljs-tag">a</span><span class="hljs-pseudo">:visited</span> <span class="hljs-rules">{<span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#00FF00</span></span></span></span>}  <span class="hljs-comment">/* 已访问的链接 */</span>
<span class="hljs-tag">a</span><span class="hljs-pseudo">:hover</span> <span class="hljs-rules">{<span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#FF00FF</span></span></span></span>}    <span class="hljs-comment">/* 鼠标移动到链接上 */</span>
<span class="hljs-tag">a</span><span class="hljs-pseudo">:active</span> <span class="hljs-rules">{<span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#0000FF</span></span></span></span>}   <span class="hljs-comment">/* 选定的链接 */</span></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li></ul>

注意：

1.在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited之后，才是有效的。
2.在 CSS 定义中，a:active 必须被置于a:hover 之后，才是有效的。
3.伪类名称对大小写不敏感。

1.2 CSS2 - :first-child 伪类

定义：

first-child 伪类来选择元素的第一个子元素。

<code class="hljs xml has-numbering"><span class="hljs-doctype"><!DOCTYPE html></span>
<span class="hljs-tag"><<span class="hljs-title">html</span> <span class="hljs-attribute">lang</span>=<span class="hljs-value">"en"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">head</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"UTF-8"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">title</span>></span>Document<span class="hljs-tag"></<span class="hljs-title">title</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">style</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/css"</span>></span><span class="css">
        <span class="hljs-tag">p</span><span class="hljs-pseudo">:first-child</span> <span class="hljs-rules">{<span class="hljs-rule"><span class="hljs-attribute">font-weight</span>:<span class="hljs-value"> bold</span></span>;<span class="hljs-rule">}</span></span>
        <span class="hljs-tag">li</span><span class="hljs-pseudo">:first-child</span> <span class="hljs-rules">{<span class="hljs-rule"><span class="hljs-attribute">text-transform</span>:<span class="hljs-value">uppercase</span></span>;<span class="hljs-rule">}</span></span>
    </span><span class="hljs-tag"></<span class="hljs-title">style</span>></span>
<span class="hljs-tag"></<span class="hljs-title">head</span>></span>
<span class="hljs-tag"><<span class="hljs-title">body</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">div</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">p</span>></span>These are the necessary steps:<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">ul</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">li</span>></span>Intert Key<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">li</span>></span>
                Turn key <span class="hljs-tag"><<span class="hljs-title">strong</span>></span>clockwise<span class="hljs-tag"></<span class="hljs-title">strong</span>></span>
            <span class="hljs-tag"></<span class="hljs-title">li</span>></span>
            <span class="hljs-tag"><<span class="hljs-title">li</span>></span>Push accelerator<span class="hljs-tag"></<span class="hljs-title">li</span>></span>
        <span class="hljs-tag"></<span class="hljs-title">ul</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">p</span>></span>
            Do <span class="hljs-tag"><<span class="hljs-title">em</span>></span>not<span class="hljs-tag"></<span class="hljs-title">em</span>></span>
            push the brake at the same time as the accelerator.
        <span class="hljs-tag"></<span class="hljs-title">p</span>></span>
    <span class="hljs-tag"></<span class="hljs-title">div</span>></span>
<span class="hljs-tag"></<span class="hljs-title">body</span>></span>
<span class="hljs-tag"></<span class="hljs-title">html</span>></span></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li></ul>

效果如下图：
这里写图片描述

第一个规则将作为某元素第一个子元素的所有 p 元素设置为粗体。第二个规则将作为某个元素（在 HTML 中，这肯定是 ol 或 ul 元素）第一个子元素的所有 li 元素变成大写。

必须声明<!DOCTYPE>，这样 :first-child 才能在 IE 中生效。

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">style</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/css"</span>></span><span class="css">
<span class="hljs-tag">p</span><span class="hljs-pseudo">:first-child</span> <span class="hljs-rules">{
  <span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value"> red</span></span>;
  <span class="hljs-rule">}</span></span> 
</span><span class="hljs-tag"></<span class="hljs-title">style</span>></span></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>

选择器匹配作为任何元素的第一个子元素的 p 元素

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">style</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/css"</span>></span><span class="css">
<span class="hljs-tag">p</span> > <span class="hljs-tag">i</span><span class="hljs-pseudo">:first-child</span> <span class="hljs-rules">{
  <span class="hljs-rule"><span class="hljs-attribute">font-weight</span>:<span class="hljs-value">bold</span></span>;
  <span class="hljs-rule">}</span></span> 
</span><span class="hljs-tag"></<span class="hljs-title">style</span>></span></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>

选择器匹配所有 <p>元素中的第一个<i>元素

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">style</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/css"</span>></span><span class="css">
<span class="hljs-tag">p</span><span class="hljs-pseudo">:first-child</span> <span class="hljs-tag">i</span> <span class="hljs-rules">{
  <span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value">blue</span></span>;
  <span class="hljs-rule">}</span></span> 
</span><span class="hljs-tag"></<span class="hljs-title">style</span>></span></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>

选择器匹配所有作为元素的第一个子元素的 <p>元素中的所有 <i>元素

1.3 CSS2 - :lang 伪类

:lang 伪类使你有能力为不同的语言定义特殊的规则

<code class="hljs xml has-numbering"><span class="hljs-tag"><<span class="hljs-title">style</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/css"</span>></span><span class="css">
        <span class="hljs-tag">q</span><span class="hljs-pseudo">:lang(no)</span> <span class="hljs-rules">{
                <span class="hljs-rule"><span class="hljs-attribute">quotes</span>:<span class="hljs-value"> <span class="hljs-string">"~"</span> <span class="hljs-string">"~"</span>
        </span></span></span>}
    </span><span class="hljs-tag"></<span class="hljs-title">style</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">body</span>></span>
        <span class="hljs-tag"><<span class="hljs-title">p</span>></span>
            文字
            <span class="hljs-tag"><<span class="hljs-title">q</span> <span class="hljs-attribute">lang</span>=<span class="hljs-value">"no"</span>></span>段落中的引用的文字<span class="hljs-tag"></<span class="hljs-title">q</span>></span>
            文字
        <span class="hljs-tag"></<span class="hljs-title">p</span>></span>
<span class="hljs-tag"></<span class="hljs-title">body</span>></span></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li></ul>

这里写图片描述

2.CSS中的伪元素

CSS 伪元素用于将特殊的效果添加到某些选择器。

语法：

伪元素的语法：

<code class="hljs css has-numbering">选择器 : 伪元素 <span class="hljs-rules">{ <span class="hljs-rule">属性: 值 }</span></span></code><ul style="display: block;" class="pre-numbering"><li>1</li></ul>

CSS 类也可以与伪元素配合使用：

<code class="hljs css has-numbering">选择器 . 类: 伪元素 <span class="hljs-rules">{ <span class="hljs-rule">属性: 值 }</span></span></code><ul style="display: block;" class="pre-numbering"><li>1</li></ul>

<code class="hljs scss has-numbering"><span class="hljs-tag">p</span><span class="hljs-class">.article</span><span class="hljs-pseudo">:first-letter</span> {<span class="hljs-attribute">color</span><span class="hljs-value">: <span class="hljs-hexcolor">#FF0000</span>}
<p class=<span class="hljs-string">"article"</span>>文章中的一个段落。</p></span></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li></ul>

这里写图片描述

：first-line的使用方法：

<code class="hljs css has-numbering"><span class="hljs-tag">p</span> <span class="hljs-rules">{<span class="hljs-rule"><span class="hljs-attribute">font-size</span>:<span class="hljs-value"> <span class="hljs-number">12</span>pt</span></span></span>}
<span class="hljs-tag">p</span><span class="hljs-pseudo">:first-line</span> <span class="hljs-rules">{<span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value"> <span class="hljs-hexcolor">#0000FF</span></span></span>; <span class="hljs-rule"><span class="hljs-attribute">font-variant</span>:<span class="hljs-value"> small-caps</span></span></span>}
</code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li></ul>

first-line 伪元素仅能被用于块级元素。
下面的属性可以被应用到 first-line 伪元素:
font 属性
color 属性
background 属性
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

2.1多重伪元素

<code class="hljs livecodeserver has-numbering">p {font-size: <span class="hljs-number">12</span>pt;}
p:<span class="hljs-keyword">first</span>-letter {color: <span class="hljs-comment">#FF0000; font-size: 24pt;}</span>
p:<span class="hljs-keyword">first</span>-<span class="hljs-built_in">line</span> {color: <span class="hljs-comment">#0000FF;}</span>
<p>The <span class="hljs-keyword">first</span> <span class="hljs-keyword">words</span> <span class="hljs-operator">of</span> <span class="hljs-operator">an</span> article</p></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li></ul>

2.2 CSS2 - :before 伪元素

before(>=IE8) 伪元素可用于在某个元素之前插入某些内容。

<code class="hljs css has-numbering"><span class="hljs-tag">h1</span><span class="hljs-pseudo">:before</span>
<span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">content</span>:<span class="hljs-value"> <span class="hljs-function">url(beep.wav)</span>
</span></span></span>}</code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li></ul>

2.3 CSS2 - :after 伪元素

after(>=IE8) 伪类可用于在某个元素之后插入某些内容。

<code class="hljs css has-numbering"><span class="hljs-tag">h1</span><span class="hljs-pseudo">:after</span>
<span class="hljs-rules">{
    <span class="hljs-rule"><span class="hljs-attribute">content</span>:<span class="hljs-value"> <span class="hljs-function">url(beep.wav)</span>
</span></span></span>}</code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li></ul>

content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。

<code class="hljs css has-numbering"><span class="hljs-tag">a</span><span class="hljs-pseudo">:after</span>
  <span class="hljs-rules">{
  <span class="hljs-rule"><span class="hljs-attribute">content</span>:<span class="hljs-value"> <span class="hljs-string">" ("</span> <span class="hljs-function">attr(href)</span> <span class="hljs-string">")"</span></span></span>;
  <span class="hljs-rule">}</span></span></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li></ul>

这里写图片描述