文章目录
一、伪类
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中伪类使用单冒号,伪元素使用双冒号)