当前位置：首页 > news >正文

CSS基础巩固-选择

news 来源：原创 2025/5/30 7:07:59

前缀符号（后面会具体介绍）

优先级

同时应用样式到多个类上

属性选择器

伪类

伪元素

关系选择器

后代选择器

子代选择器

邻接兄弟

通用兄弟

注：本文以MDN为基础

添加CSS样式文件

就像创业平台 index.html 里面开头的 <link rel="stylesheet" href=" 样式文件路径 ">

想对一片区域内的元素应用样式

定义类 class

比如 <div class=" "> , <li class=" ">

前缀符号（后面会具体介绍）

. 类选择器（同一个类可以被多个元素使用，用于标识一组相似的元素）

# ID选择器（一个页面只能有一个相同的ID）

无前缀元素选择器

* 通用选择器

[ ] 属性选择器（比如 <div class="not box"> 会被 div[class~="box"] 选中，因为后面的选择器是匹配 class属性中含有box单词的 div元素

: 伪类选择器

:: 伪元素选择器

空格后代选择器

> 子选择器

+ 相邻兄弟选择器

~ 通用兄弟选择器

优先级

!important声明 > 内联样式 > #ID > .类 > 元素 > *

同时应用样式到多个类上

逗号分隔

A,B{
}

属性选择器

[属性] 只要含有这个属性就匹配

[属性=“值"] 属性值等于值

[属性~="值"] 属性中包含某个词（空格分隔）

[属性|="值"] 属性以值开头或等于值

[属性^="值"] 属性以值开头

[属性$="值"] 属性值以“值”结尾

[属性*="值"] 属性值包含“值”（和～区别：不一定要空格分隔）

伪类

用于选择处于特定状态的现有元素

/* 状态伪类 */
a:hover { color: red; }           /* 鼠标悬停状态 */
input:focus { border: blue; }     /* 获得焦点状态 */
button:disabled { opacity: 0.5; } /* 禁用状态 *//* 结构伪类 */
li:first-child { font-weight: bold; }  /* 第一个子元素 */
tr:nth-child(even) { background: #f0f0f0; } /* 偶数行 *//* 内容伪类 */
p:empty { display: none; }        /* 空内容元素 */
div:not(.special) { color: black; } /* 排除特定类 */

伪元素

创建和样式化虚拟元素

伪元素并不会修改DOM，只是在渲染层面

/* 内容伪元素 */
.quote::before {content: """;font-size: 2em;color: #ccc;
}.quote::after {content: """;font-size: 2em;color: #ccc;
}/* 选择伪元素 */
p::first-line {font-weight: bold;color: blue;
}p::first-letter {font-size: 2em;float: left;
}/* 占位符伪元素 */
input::placeholder {color: #999;font-style: italic;
}