伪类---伪元素知识汇总

一、伪类

1、anchor伪类

1.1 anchor伪类

​ 作用：给链接的不同状态设置样式

1.2 anchor伪类的种类

a:link {color:#FF0000;} 	/* 未访问时的链接状态 */
a:visited {color:#00FF00;}  /* 已访问的链接状态 */
a:hover {color:#FF00FF;} 	/* 鼠标覆盖链接状态 */
a:active {color:#0000FF;} 	/* 已选中的链接状态（点击时跳转前的样式） */

1.3 使用时的注意事项

• CSS固有的定义中
  • a:hover必须在a:link和a:visited之后
  • a:active必须置于a:hover之后
  • 伪类的名称不分大小

2、搭配使用

2.1 结合CSS类配合使用

//html
<div>
	<a class="red" href="链接" target="_blank">这是一个链接</a>
</div>

//CSS
a.red:visited{
	color: brown;
}

2.2 搭配元素使用

2.2.1任何元素的第一个子元素 p 元素

p:first-child
{
    color:blue;
}

2.2.2 所有p元素的第一个 i 元素

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

2.2.3 第一个子元素p元素中所有的i元素

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

3、所有的伪类（W3school上的汇总）

选择器	例子	例子描述
:active	a:active	选择活动的链接。
:checked	input:checked	选择每个被选中的 input元素。
:disabled	input:disabled	选择每个被禁用的 input 元素。
:empty	p:empty	选择没有子元素的每个 p元素。
:enabled	input:enabled	选择每个已启用的 input 元素。
:first-child	p:first-child	选择作为其父的首个子元素的每个 p 元素。
:first-of-type	p:first-of-type	选择作为其父的首个p 元素的每个 p元素。
:focus	input:focus	选择获得焦点的 input 元素。
:hover	a:hover	选择鼠标悬停其上的链接。
:in-range	input:in-range	选择具有指定范围内的值的 input元素。
:invalid	input:invalid	选择所有具有无效值的 input元素。
:lang(language)	p:lang(it)	选择每个 lang 属性值以 “it” 开头的 p 元素。
:last-child	p:last-child	选择作为其父的最后一个子元素的每个p 元素。
:last-of-type	p:last-of-type	选择作为其父的最后一个p 元素的每个 p 元素。
:link	a:link	选择所有未被访问的链接。
:not(selector)	:not§	选择每个非 p 元素的元素。
:nth-child(n)	p:nth-child(2)	选择作为其父的第二个子元素的每个p 元素。
:nth-last-child(n)	p:nth-last-child(2)	选择作为父的第二个子元素的每个p 元素，从最后一个子元素计数。
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择作为父的第二个p 元素的每个p 元素，从最后一个子元素计数
:nth-of-type(n)	p:nth-of-type(2)	选择作为其父的第二个p 元素的每个p 元素。
:only-of-type	p:only-of-type	选择作为其父的唯一 p 元素的每个 p 元素。
:only-child	p:only-child	选择作为其父的唯一子元素的 p 元素。
:optional	input:optional	选择不带 “required” 属性的 input元素。
:out-of-range	input:out-of-range	选择值在指定范围之外的 input元素。
:read-only	input:read-only	选择指定了 “readonly” 属性的 input 元素。
:read-write	input:read-write	选择不带 “readonly” 属性的 input 元素。
:required	input:required	选择指定了 “required” 属性的 input 元素。
:root	root	选择元素的根元素。
:target	#news:target	选择当前活动的 #news 元素（单击包含该锚名称的 URL）。
:valid	input:valid	选择所有具有有效值的 input 元素。
:visited	a:visited	选择所有已访问的链接。

二、伪元素

CSS伪元素作用：设置元素指定部分的样式

1、伪元素举例

1.1 ::first-line伪元素----为文本首行添加样式

1.1.1 书写方式

标签元素名称::first-line{
	需要设置的样式
}

1.1.2 ::first-line使用的属性

• ::first-line伪元素只能应用于块级元素

• 使用其的属性

  • 字体、颜色、背景

  • word-spacing----指定字之间的空间，—30像素

    p{
    	word-spacing:30px;
    }
    

  • letter-spacing----元素字母之间的间距

    h1 {
    	letter-spacing:2px
    }
    

  • text-decoration----添加到文本的修饰，下划线、上划线、删除线等

    h1 {text-decoration: none;/*没有文本装饰*/}
    h2 {text-decoration: underline red;/*红色下划线*/}
    h3 {text-decoration: underline wavy red;/*红色波浪形下划线*/}等等
    

  • vertical-align----元素的垂直对齐方式

  • text-transform----转换不同元素中的文本

  • line-height

  • clear----指定段落的左侧或右侧不允许浮动的元素

    img
    {
        float:left;
    }
    p.clear
    {
        clear:both;
    }
    

1.2 ::first-letter伪元素----为文本首字母添加样式

1.2.1 书写方式

标签元素名称::first-letter{
	需要设置的样式
}

1.2.2 ::first-letter使用的属性

• ::first-letter 伪元素只适用于块级元素。
• 使用其的属性
  • 字体、颜色、背景
  • 外边距、内边距、边框
  • text-decoration
  • vertical-align（仅当 “float” 为 “none”）
  • text-transform
  • line-height
  • float
  • clear

1.3 ::before伪元素----在元素内容之前添加内容

h1::before {
  content: url(smiley.gif);
}

1.4 ::after伪元素----在元素内容之后添加内容

h1::after {
  content: url(smiley.gif);
}

1.5 ::selection元素----用户鼠标选中文本添加样式

::selection {
  color: red; 
  background: yellow;
}

2、 伪元素结合CSS使用

//和伪类一样，直接标签后跟着选择器
p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

3、所有的伪元素（W3school上的汇总）

选择器	例子	例子描述
::after	p::after	在每个p 元素之后插入内容。
::before	p::before	在每个p 元素之前插入内容。
::first-letter	p::first-letter	选择每个 p 元素的首字母。
::first-line	p::first-line	选择每个p 元素的首行。
::selection	p::selection	选择用户选择的元素部分。

三、伪类和伪元素的区别

• 在CSS2和CSS1中，伪类和伪元素都使用了单冒号语法。（为了接收后面兼容，CSS2和CSS1接收单冒号）
• 在CSS3中，双冒号取代了伪元素的单冒号标签。（原因：区别伪类和伪元素，在CSS3中伪类使用单冒号，伪元素使用双冒号）