CSS选择器

元素选择器

/* 使用元素选择器为所有段落元素应用样式 */p {  color: blue;  font-size: 16px;  text-align: center;  margin: 10px;  padding: 5px;  background-color: #f0f0f0;}

类选择器

/* 使用类选择器为具有类名 "important" 的元素应用样式 */.important {  font-weight: bold;  color: red;  background-color: yellow;}

ID选择器

/* 使用ID选择器为具有ID "special-paragraph" 的元素应用样式 */#special-paragraph {  font-weight: bold;  color: blue;  background-color: yellow;}

后代选择器

/* 使用后代选择器为容器内的段落应用样式 */.container p {  font-weight: bold;  color: blue;}/* 使用后代选择器为容器内的列表项应用样式 */.container ul li {  list-style-type: square;}

子选择器

/* 使用子选择器为父元素内的直接子列表项应用样式 */.parent > li {  font-weight: bold;  color: blue;}/* 使用子选择器为子元素内的直接子列表项应用样式 */.child > li {  list-style-type: square;}

通配符选择器

* {  margin: 0;  padding: 0;  box-sizing: border-box;}

属性选择器

a[href="https://www.example.com"] {  text-decoration: none;  color: #0077b5;}

伪类选择器

1. :hover 伪类选择器：选择鼠标悬停在元素上的状态。

a:hover {  color: red;  text-decoration: underline;}

2. :visited 伪类选择器：选择已访问过的链接。

a:visited {  color: purple;}

3. :first-child 伪类选择器：选择元素的第一个子元素。

li:first-child {  font-weight: bold;}

伪元素选择器

1. ::before 伪元素选择器：在元素的前面插入内容。

p::before {  content: ">>";  color: blue;}

2. ::after 伪元素选择器：在元素的后面插入内容。

button::after {  content: " (Click me)";  color: green;}

3. ::first-line 伪元素选择器：选择元素的第一行文本。

p::first-line {  font-weight: bold;}