css 伪类选择器

伪类选择器:

  • -:focus :向拥有键盘输入焦点的元素添加样式。
  • -:first-child:伪类来选择元素的第一个子元素
  • -:link:向未被访问的链接添加样式。
  • -:visited:向已被访问的链接添加样式。
  • -:hover: 当鼠标悬浮在元素上方时,向元素添加样式。
  • -:active: 向被激活的元素添加样式。
  • -:lang:向带有指定 lang 属性的元素添加样式。

例子:

a:link {color: #FF0000}		/* 未访问的链接 */
a:visited {color: #00FF00}	/* 已访问的链接 */
a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
a:active {color: #0000FF}	/* 选定的链接 */

注意:
a:hover 必须被置于a:linka:visited 之后,才是有效的。

:first-child

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

p > i:first-child {
  font-weight:bold;
  }

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

p:first-child i {
  color:blue;
  } 

:lang

:lang 伪类使你有能力为不同的语言定义特殊的规则。在下面的例子中,:lang 类为属性值为 no q 元素定义引号的类型:

<html>
<head>

<style type="text/css">
q:lang(no)
   {
   quotes: "~" "~"
   }
</style>

</head>

<body>
<p>文字<q lang="no">段落中的引用的文字</q>文字</p>
</body></html>
posted @ 2020-09-21 14:40  JunCode  阅读(143)  评论(0编辑  收藏  举报