概述

+ 概述

CSS选择器是用于选择 HTML 元素并为其应用样式的一种机制.
常见的 CSS 选择器: 元素选择器(Element Selector), 类名选择器(Class Selector), ID选择器(ID Selector), 后代选择器(Descendant Selector), 相邻兄弟选择器(Adjacent Sibling Selector), 通用选择器(Universal Selector), 伪类选择器, 伪元素选择器, 属性选择器.

选择器种类

+ 元素选择器

通过指定 HTML 元素的名称来选择元素

p {
  /* CSS 样式 */
}

+ 类名选择器

用于选择具有特定类名的 HTML 元素.
类选择器以点号 (.) 开头, 后跟类名
类选择器可以为页面中的多个元素定义相同的样式,可以为同一个元素应用多个样式.

.button {
  /* CSS 样式 */
}

多个类元素定义相同样式

同一样式应用多个元素

.my-class .special {
    /* CSS 样式 */
}

.item-1, .item-2 {
    /* CSS 样式 */
}

+ ID 选择器

用于选择具有特定 ID 属性的 HTML 元素.
ID 选择器以井号 (#) 开头, 后跟 ID 名称.
ID 选择器应该是唯一的.ID 选择器通常用于为特定元素应用唯一的样式.

#my-id {
  /* CSS 样式 */
}

<html>
<head>
<style type="text/css">
#intro {
	font-weight:bold;
}
</style>
</head>

<body>
<p id="intro">This is a paragraph of introduction.</p>

<p>This is a paragraph.</p>

</body>
</html>

+ 后代选择器

用于选择特定元素的后代元素.
后代选择器使用空格分隔两个选择器,第一个选择器表示父元素,第二个选择器表示后代元素.

div p {
  /* CSS 样式 */
}

+ 相邻兄弟选择器

相邻兄弟选择器可选择紧接在另一个元素后的元素，且二者具有相同的父亲元素.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>相邻兄弟选择器</title>
    <style type="text/css">
        h1+p{
            color:red;
        }
    </style>
</head>
 
<body>
    <p>Hello word!</p>
    <p>Hello word!</p>
    <h1>Hello word!</h1>
    <p>Hello word!</p>
    <p>Hello word!</p>
    <p>Hello word!</p>
    <p>Hello word!</p>
</body>
</html>

+ 通用选择器

通用选择器是一个星号(*),用于匹配文档中的任何元素.

div * {
  /* CSS 样式 */
}

index.html

style.css

<!DOCTYPE html>
<html>
  <head>
    <title>Hello, World!</title>
    <link rel="stylesheet" href="styles.css" />
    <script src="script.js"></script>
  </head>
  <body>
    <h1 class="title">Hello World! </h1>
    <p id="currentTime"></p>
    <p class="warning">
    <span lang="en-us">A green span</span> in a red paragraph.
    </p>
    <p id="maincontent" lang="en-gb">
    <span class="warning">A red span</span> in a green paragraph.
    </p>
  </body>
</html>

* [lang^="en"] {
  color: green;
}

*.warning {
  color: red;
}

*#maincontent {
  border: 1px solid blue;
}

.floating {
  float: left;
}

/* automatically clear the next sibling after a floating element */
.floating + * {
  clear: left;
}

+ 伪类选择器

:hover 当鼠标悬停在元素上时的样式.

a:hover {
  /* CSS */
}

:active 当元素被用户激活(如点击)时的样式.

a:active {
  /* CSS */
}

+ 伪元素选择器

::before 伪元素用于在元素内容之前插入内容.

.alert::before {
  /* CSS 样式 */
}

::after 伪元素用于在元素内容之后插入内容.

.alert::after {
  /* CSS 样式 */
}

::first-letter 伪元素用于设置块级元素的第一个字母的样式，允许使用首字下沉等设计元素.

p::first-letter {
  /* CSS 样式 */
}

+ 属性选择器

属性选择器使用方括号([])表示,内部包含属性名和可选的属性值.
属性选择器允许根据元素的属性及其属性值来选择元素,并为其应用样式.

<!-- 选择所有具有 data-text 属性的元素，并为其应用样式.-->
[data-text] {
 /* CSS 样式 */
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
[title]
{
color:red;
}
</style>
</head>

<body>
<h2 title="Hello world">Hello world</h2>
<a title="W3School" href="http://w3school.com.cn">W3School</a>
</body>
</html>

在线测试

+ 在线测试

Markdown 编辑器