CSS(三)-- 伪类选择器与伪元素选择器

目录

“伪”是什么?

1.  伪类选择器

2.  伪元素选择器


“伪”是什么?

  • “伪”是指该选择器用来修饰不在文档树中的部分。
  • 必读:超级详细解说

1.  伪类选择器

用于当已有元素处于的某个状态(如,鼠标悬浮)时,为其添加对应的样式,这个状态是根据用户行为而动态变化

实例演示:

1. 链接样式:可以用伪类选择器设置不同状态下的链接样式,如未访问过链接、访问过链接、鼠标悬停链接等。

a:link {
  color: blue;
}
 a:visited {
  color: green;
}
 a:hover {
  color: red;
}

2. 表单元素:可以用伪类选择器设置表单元素在不同状态下的样式,如焦点、悬停、选中等。

input:focus {
  background-color: yellow;
}
 input:hover {
  background-color: lightblue;
}
 input:checked {
  border: 2px solid red;
}

3. 第一个、最后一个、奇数偶数元素:可以用伪类选择器选择第一个、最后一个以及奇数偶数位置上的元素,并应用相应的样式。

li:first-child {
  font-weight: bold;
}
 li:last-child {
  font-style: italic;
}
 p:nth-child(odd) {
  color: blue;
}
 p:nth-child(even) {
  color: green;
}

4. 已被禁用的元素:可以用伪类选择器选取已经被禁用的表单元素,并应用相应的样式。

input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

伪类选择器的常用方法:

方法 说明
:hover 选择鼠标指针浮动在其上的元素
:visited 选择已访问的链接
:link

选择未访问的链接

:active 选择活动的链接
:focus 选择获取焦点的输入字段
:not 一个否定伪类,用于匹配不符合参数选择器的元素。
:first-child 匹配元素的第一个子元素。
:last-child 匹配元素的最后一个子元素。
:first-of-type 匹配属于其父元素的首个特定类型的子元素的每个元素。
:last-of-type 匹配元素的最后一个子元素。
:only-child 当元素是其父元素中唯一一个子元素时,:only-child 匹配该元素。
:only-of-type 当元素是其父元素中唯一一个特定类型的子元素时,:only-of-type 匹配该元素。

2.  伪元素选择器

用于创建一些不存在于文档树(即dom树)中的元素,并为其添加样式。

实例演示:

1. 插入内容:可以用伪元素选择器 ::before::after 在元素的前面或后面插入内容,比如加入引号、图标等。

p::before {
  content: "“";
}
p::after {
  content: "”";
}

2. 第一行、第一字母:可以用伪元素选择器 ::first-line::first-letter 给元素的第一行或第一个字母应用样式。

h1::first-letter {
  font-size: 2.5em;
  font-weight: bold;
}
p::first-line {
  color: red;
  font-weight: bold;
}

3. 清除浮动:可以用伪元素选择器 ::after 清除浮动影响,避免父元素因子元素浮动引起的高度塌陷问题。

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

4. 设置文本选择时的样式:可以用伪元素选择器 ::selection 给用户选择文本时的背景色、颜色等添加样式。

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

5. 使用 ::marker 伪元素选择器可以设置列表项的标记符号的样式,例如指定它的颜色或将它移动到列表项的外部。

ul li::marker {
  content:'★';
  color: red;
  margin-right:5px;
}

伪元素选择器的常用方法:

方法 说明
::before/:before :before 在被选元素前插入内容。需要使用 content 属性来指定要插入的内容。被插入的内容实际上不在文档树中。
::after/:after :after 在被元素后插入内容,其用法和特性与:before 相似。
::first-letter/:first-letter :first-letter 匹配元素中文本的首字母。被修饰的首字母不在文档树中。
::first-line/:first-line :first-line 匹配元素中第一行的文本。这个伪元素只能用在块元素中,不能用在内联元素中。
::selection ::selection 匹配用户被用户选中或者处于高亮状态的部分。在火狐浏览器使用时需要添加-moz 前缀。该伪元素只支持双冒号的形式。
::placeholder

::placeholder 匹配占位符的文本,只有元素设置了 placeholder 属性时,该伪元素才能生效。

该伪元素不是 CSS 的标准,它的实现可能在将来会有所改变,所以要决定使用时必须谨慎。

::backdrop ::backdrop 用于改变全屏模式下的背景颜色,全屏模式的默认颜色为黑色。该伪元素只支持双冒号的形式。

 继续学习之路:

CSS(一)-- 三种样式表

CSS(二)-- 选择器的运用(针对基本选择器和复合选择器的详细解析)

CSS(三)-- 伪类选择器与伪元素选择器

CSS(四)-- 针对字体、文本的常用基本属性

如果对你有帮助,请帮我点一下赞,我才有动力继续创作,谢谢!

你可能感兴趣的:(#,CSS,css,前端)