CSS的选择器都有哪些【汇总详解】

html/css 2023-06-14 280次浏览

前言

CSS选择器是用来选择网页中一个或多个元素的模式。在CSS中,使用选择器来选取需要设置样式的HTML元素,然后通过CSS属性来设置这些元素的样式。可以使用CSS选择器来更改网站的外观,使其更加美观和易于阅读。以下是一些常见的CSS选择器:

  1. 标签选择器(tag selector)

选择指定标记符的元素,如 div、p、h1 等。

div {
  color: #333;
  font-size: 16px;
}
  1. 类选择器(class selector)

通过 class 属性选择元素。

.content {
  color: #666;
  font-size: 14px;
}
  1. ID 选择器(id selector)

通过 id 属性选择元素。

#header {
  background-color: #333;
  color: #fff;
}
  1. 后代选择器(descendant selector)

选择指定元素的所有后代元素。

.container p {
  color: #666;
  font-size: 14px;
}
  1. 子元素选择器(child selector)

选择指定元素的直接子元素。

.container > p {
  color: #666;
  font-size: 14px;
}
  1. 通配符选择器(universal selector)

匹配页面上的所有元素。

* {
  box-sizing: border-box;
}
  1. 属性选择器(attribute selector)

选择含有特定属性值的元素。

a[target="_blank"] {
  color: #007aff; /* iOS blue */
}
  1. 伪类选择器(pseudo-class selector)

选择元素特定的状态,如 hover、active 和 focus 等。

a:hover {
  text-decoration: underline;
}
  1. 伪元素选择器(pseudo-element selector)

选择元素特定的位置,如 before 和 after 等。

h1::after {
  content: "!";
}

以上是一些常见的CSS选择器,使用它们可以快速地选择网页中的不同元素,并设置对应的样式。

CSS的选择器都有哪些【汇总详解】

喜欢 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址