CSS伪类选择器

最新推荐文章于 2022-06-07 14:13:37 发布

Markuces

最新推荐文章于 2022-06-07 14:13:37 发布

阅读量582

点赞数

分类专栏：每周总结

每周总结专栏收录该内容

8 篇文章 0 订阅

订阅专栏

原来学习过css伪类选择器，前几天写css发现自己并不熟悉了。这两天把它捡起来复习一下

css伪类选择器是用于向某些元素添加特定的效果。

锚伪类：

包括四种状态，活动状态，未被访问状态，已被访问状态，悬停效果。

example：

a:link {color: #FF0000}		
a:visited {color: #00FF00}	
a:hover {color: #FF00FF}	
a:active {color: #0000FF}

fist-chlid伪类

选择元素的第一个子元素。

example:

第一个颜色变红。

<html>
<head>
<style type="text/css">
p:first-child {
  color: red;
  } 
</style>
</head>

<body>
<p>some text</p>
<p>some text</p>
</body>
</html>

所有的第一个加粗。


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


<body>
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
</body>
</html>

第一个子元素下的所有

<html>
<head>
<style type="text/css">
p:first-child i {
  color:blue;
  } 
</style>
</head>

<body>
<p>some <i>text</i>. some <i>text</i>.</p>
<p>some <i>text</i>. some <i>text</i>.</p>
</body>
</html>

first-letter伪元素

向文本首字母添加样式。

p:first-letter
  {
  color:#ff0000;
  font-size:xx-large;
  }

：before，：after类

在元素的前面之后添加内容；