CSS中存在一些比较特殊的属性,伪类，伪元素

最新推荐文章于 2022-04-07 18:07:27 发布

Zoe_Wang_ing

最新推荐文章于 2022-04-07 18:07:27 发布

阅读量1.3k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/Zoe_Wang_ing/article/details/16819687

版权

css 专栏收录该内容

82 篇文章 0 订阅

订阅专栏

CSS中存在一些比较特殊的属性，称之为伪类，伪元素。
定义链接的伪类:link，:visited，:hover，:active等。
不被常使用的伪类，有:focus，:first-child，:lang等。
伪元素，比如：:first-letter，:first-line，:before和:after。
a:link {color:#ff0000}    /*未访问的链接*/
a.one:link{color:#ff00ff}   /*class="one" 的未访问的链接*/
a:visited {color:#ff0000}    /*已访问的链接*/
a.one:visited{color:#ff00ff}   /*class="one" 的已访问的链接*/
a:hover {color:#ff0000}    /*当有鼠标悬停在链接上*/
a.one:hover{color:#ff00ff}   /*class="one" 的有鼠标悬停在链接上*/
a:active {color:#ff0000}    /*被选择的链接*/
a.one:active{color:#ff00ff}   /*class="one" 的被选择的链接*/
:focus 伪类在元素获得焦点时向元素添加特殊的样式
如：a:focus{color:#00ff00}  /*获得焦点的链接*/
    input:focus{ color:yellow;}   如果已规定 ！DOCTYPE，那么Internet Explorer 8 (以及更高版本) 支持 :focus 伪类

:first-child  伪类向元素的第一个子元素添加样式
利用 :first-child 这个伪类，只有当元素是另一个元素的第一个子元素时才能匹配。例如，p:first-child 会选择作为另外某个元素第一个子元素的所有 p 元素。一般可能认为这会选择作为段落第一个子元素的元素，但事实上并非如此，如果要选择段落的第一个子元素，应当写为 p > *:first-child。

例子 1 - 匹配第一个 <p> 元素

在下面的例子中，选择器匹配属于任意元素的第一个子元素的 <p> 元素：

<style type="text/css">
p:first-child
{
font-weight:bold
}
</style>

<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
例子 2 - 匹配所有 <p> 元素中的第一个 <em> 元素

在本例中，选择器匹配属于 <p> 元素中的第一个子元素的 <em> 元素：
<style type="text/css">
p > em:first-child
{
font-weight:bold
}
</style>

<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
例子 3 - 匹配所有第一个子元素 <p> 元素中的所有 <em> 元素

在下面的例子中，选择器匹配属于其他元素的第一个子元素的 <p> 元素中的所有 <em>：
<style type="text/css">
p:first-child em
{
font-weight:bold
}
</style>

<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
浏览器支持

所有主流浏览器都支持 :first-child 伪类。

提示：为了保证 :first-child 伪类在 IE 中正常工作，必须声明 <!DOCTYPE>。

:first-child 伪类向元素的第一个子元素添加样式。
说明
利用 :first-child 这个伪类，只有当元素是另一个元素的第一个子元素时才能匹配。例如，p:first-child 会选择作为另外某个元素第一个子元素的所有 p 元素。一般可能认为这会选择作为段落第一个子元素的元素，但事实上并非如此，如果要选择段落的第一个子元素，应当写为 p > *:first-child。
实例
例子 1 - 匹配第一个 <p> 元素
在下面的例子中，选择器匹配属于任意元素的第一个子元素的 <p> 元素：
<style type="text/css">
p:first-child
{
font-weight:bold
}
</style>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>

例子 2 - 匹配所有 <p> 元素中的第一个 <em> 元素
在本例中，选择器匹配属于 <p> 元素中的第一个子元素的 <em> 元素：
<style type="text/css">
p > em:first-child
{
font-weight:bold
}
</style>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>


例子 3 - 匹配所有第一个子元素 <p> 元素中的所有 <em> 元素
在下面的例子中，选择器匹配属于其他元素的第一个子元素的 <p> 元素中的所有 <em>：
<style type="text/css">
p:first-child em
{
font-weight:bold
}
</style>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>
<p>I am a <em>strong</em> man. I am a <em>strong</em> man.</p>

浏览器支持
所有主流浏览器都支持 :first-child 伪类。
提示：为了保证 :first-child 伪类在 IE 中正常工作，必须声明 <!DOCTYPE>。

:lang 伪类向带有指定 lang 属性的元素添加样式。
说明
:lang 伪类根据元素的语言编码匹配元素。这种语言信息必须包含在文档中，或者与文档关联，不能从 CSS 指定。:lang 的处理与 |= 选择器相同。
实例
:lang 伪类允许您为不同的语言定义特殊的规则。在下面的例子中，:lang 类为带有值为 "no" 的 lang 属性的 q 元素定义引号的类型：
<html>
<head>
<style type="text/css">
q:lang(no)
  {
  quotes: "~" "~"
  }
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>
浏览器支持
所有主流浏览器都支持 :lang 伪类。
注释：如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 :lang 伪类。

:first-letter 伪元素向文本的第一个字母添加特殊样式。
这个伪元素用于指定一个元素第一个字母的样式。所有前导标点符号应当与第一个字母一同应用该样式。某些语言有一些要处理为单个字符的字母组合，如果是这样，用户代理可能会把首字母同时应用到这个字母组合。
在 CSS2.1 之前，:first-letter 只能与块级元素关联。CSS2.1 扩大了这个范围，可以与任何元素关联。可以应用到首字母的属性是有限的。
注释：下列属性应用于 :first-letter 伪元素：
font 属性
color 属性
background 属性
margin 属性
padding 属性
border 属性
text-decoration
vertical-align (仅当 'float' 为 'none' 时)
text-transform
line-height
float
clear
伪元素可与 CSS 类结合：
p.article:first-letter {color: #FF0000;}
<p class="article">A paragraph in an article</p>
本例将把所有 class="article" 的段落的第一个字母设置为红色。
实例
向段落的第一个字符添加特殊样式：
<html>
<head>
<style type="text/css">
p:first-letter
  {
  color:#ff0000;
  font-size:xx-large;
  }
</style>
</head>
<body>
<p>This is a text.</p>
</body>
</html>
浏览器支持
所有主流浏览器都支持 :first-letter 伪元素。

:first-line 伪元素向文本的首行添加特殊样式。
这个伪元素用于设置元素中的第一行文本的样式，而不论该行出现多少单词。
:first-line 只能与块级元素关联。可以应用到首字母的属性是有限的。
注释：下列属性应用于 :first-line 伪元素：
font 属性
color 属性
background 属性
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
伪元素可与 CSS 类结合：
p.article:first-line {color: #FF0000}
<p class="article">A paragraph in an article</p>
本例将把所有 class="article" 的段落的第一行字符设置为红色。
实例
向段落的第一个字符添加特殊样式：
<html>
<head>
<style type="text/css">
p:first-line
  {
  color:#ff0000;
  font-variant:small-caps;
  }
</style>
</head>
<body>
<p>This is a text.</p>
</body>
</html>
浏览器支持
所有主流浏览器都支持 :first-line 伪元素。

:before 伪元素在元素之前添加内容。
这个伪元素允许创作人员在元素内容的最前面插入生成内容。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。
实例
此样式会在每个 h1 元素之前播放一段声音：
h1:before
  {
  content:url(beep.wav);
  }
浏览器支持
所有主流浏览器都支持 :before 伪元素。

after顾名思义是在元素后面的意思，实质是在元素之后添加内容。

    这个伪元素允许制作人员在元素内容的最后面插入生成内容，需要和content属性一起使用，设置在对象后发生的内容。默认地，这个伪元素是inline行内元素，不过可以使用属性 display 改变这一点。  

    所有主流浏览器都支持 :after 伪元素，但对于IE来说，只有IE8以上版本支持。  

    下面举个例子，在CSS代码中插入：
<style type="text/css"> 
  h1:after {content:url(logo.gif)}  
</style>

    Html：

<h1>标题内容</h1>

    在显示时，标题内容后会插入一张图片。这就是伪元素:after的作用。

    伪元素:after另外一个常用的作用在原来的文章中曾经提到过，有些同学可能还记得，那就是清除浮动。

    在CSS中加入带有CSS伪类:after的内容：    

.clear:after {
  height:0;   
  content:".";   
  clear:both;   
  display:block;   
  visibility:hidden;   
}
    然后在外面的Div容器box中引用这个class，比如：  

<div id="box" class="clear">
  ……
  ……
</div>

在网上查的总结下

Zoe_Wang_ing

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS中存在一些比较特殊的属性,伪类，伪元素

CSS中存在一些比较特殊的属性，称之为伪类，伪元素。定义链接的伪类:link，:visited，:hover，:active等。不被常使用的伪类，有:focus，:first-child，:lang等。伪元素，比如：:first-letter，:first-line，:before和:after。a:link {color:#ff0000} /*未访问的链接*/a.one:
复制链接

扫一扫