最适合网络开发者的网站

CSS 参考

CSS 参考 CSS 浏览器支持 CSS 选择器 CSS 函数 CSS 参考 Aural CSS Web 安全字体 CSS 后备字体 CSS 动画 CSS 单位 CSS PX-EM 转换器 CSS 颜色 CSS 颜色值 CSS 默认值 CSS 实体

CSS 特性

强调色 对齐内容 对齐项目 对齐自身 全部 动画片 动画延迟 动画导演 动画持续时间 动画填充模式 动画迭代次数 动画名称 动画播放状态 动画计时功能 背景滤镜 背面可见性 背景 背景附件 背景混合模式 背景剪辑 背景颜色 背景图 背景原点 背景位置 背景重复 背景尺寸 边界 下边框 边框底部颜色 边框左下角半径 边框右下角半径 边框底部样式 边框底部宽度 边界折叠 边框颜色 边框图像 边框图像起始 边框图像重复 边框图像切片 边框图像源 边框图像宽度 左边框 左边框颜色 左边框样式 左边框宽度 边框半径 右边框 右边框颜色 右边框样式 右边框宽度 边框间距 边框样式 上边框 边框顶部颜色 边框左上角半径 边框右上半径 边框顶部样式 边框顶部宽度 边框宽度 底部 盒子装饰打破 盒子阴影 盒子大小 休息后 休息前 闯入 标题侧 插入符号颜色 @字符集 清除 夹子 剪辑路径 颜色 列数 列填充 柱间隙 列规则 列规则颜色 列规则样式 列规则宽度 列跨度 列宽 内容 反增 反复位 光标 方向 展示 空单元格 筛选 柔性 弹性基础 弹性方向 弹性流 弹性生长 弹性收缩 弹性包裹 漂浮 字体 @font-face 字体系列 字体功能设置 字体字距调整 字体大小 字体大小调整 字体拉伸 字体样式 字体变体 字体变体大写 字体粗细 差距 网格 网格区域 网格自动列 网格自动流 网格自动行 网格列 网格列末端 网格列间隙 网格列开始 网格间隙 网格行 网格行末端 网格行间隙 网格行开始 网格模板 网格模板区域 网格模板列 网格模板行 悬挂标点 高度 连字符 图像渲染 @进口 隔离 对齐内容 @keyframes 左边 字母间距 行高 列表样式 列表样式图像 列表样式位置 列表样式类型 利润 下边距 左边距 右边距 上边距 遮罩图像 掩码模式 掩码来源 掩膜位置 掩码重复 遮罩尺寸 最大高度 最大宽度 @媒体 最小高度 最小宽度 混合模式 对象适合 客体位置 不透明度 命令 孤儿 大纲 轮廓颜色 轮廓偏移 大纲样式 轮廓宽度 溢出 溢出包装 溢出-x 溢出 填充 内边距底部 左填充 右填充 顶部填充 分页符后 分页符之前 分页符内部 看法 视角起源 指针事件 位置 引号 调整大小 正确的 行距 滚动行为 制表符大小 表格布局 文本对齐 文本最后对齐 文字修饰 文字装饰颜色 文字修饰线 文字装饰风格 文字修饰粗细 文本缩进 文字对齐 文本溢出 文字阴影 文本转换 顶部 转换 变换原点 变换风格 过渡 转换延迟 过渡持续时间 过渡属性 转换时序函数 unicode-bidi 用户选择 垂直对齐 能见度 空白 寡妇 宽度 单词中断 字间距 自动换行 写作模式 z 索引


初学者的 CSS 课程

尿素

CSS 选择器 参考


CSS 选择器

在 CSS 中,选择器是用于选择想要设置样式的元素的模式。

使用我们的 CSS 选择器测试器 来演示不同的选择器。

选择器 例子 示例说明
.班级 。介绍 选择所有带有 class="intro" 的元素
.类1.类2 .名称1.名称2 选择所有同时满足 名称1名称2 在其类属性内设置
.类1 .类2 .名称1 .名称2 选择所有元素 名称2 是元素的后代,名称1
#ID #名 选择 id="firstname" 的元素
* * 选择所有元素
元素 选择全部<p>元素
元素.class p.介绍 选择全部<p>带有 class="intro" 的元素
元素,元素 分红,页 选择全部<div>元素和所有<p>元素
元素 元素 分页 选择全部<p>里面的元素<div>元素
元素>元素 div &gt; p 选择全部<p>父元素是<div>元素
元素+元素 div + p 选择第一个<p>紧接着的元素<div>元素
元素1~元素2 选择每一个<ul>元素前面有一个<p>元素
[属性] [目标] 选择具有目标属性的所有元素
[属性=价值] [目标=_空白] 选择所有带有 target="_blank" 的元素
[属性~=价值] [标题~=花] 选择 title 属性包含单词“flower”的所有元素
[属性|=价值] [lang|=zh] 选择所有 lang 属性值为“en”或以“en-”开头的元素
[属性^=价值] 一个[href^="https"] 选择<a>href 属性值以“https”开头的每个元素</a>
[属性$=价值] 一个[href$=".pdf"] 选择<a>href 属性值以“.pdf”结尾的每个元素</a>
[属性*=价值] 一个[href*="w3schools"] 选择<a>href 属性值包含子字符串“w3schools”的每个元素</a>
:积极的 答:活跃 选择活动链接
::后 p::之后 在每个内容后面插入一些内容<p>元素
::前 p::之前 在每个内容前插入一些内容<p>元素
:已检查 输入:已检查 选择每个已检查的<input>元素
:默认 输入:默认 选择默认<input>元素
:已禁用 输入:已禁用 选择每一个残疾人<input>元素
:空的 p:空 选择每一个<p>没有子元素(包括文本节点)
:启用 输入:启用 选择每个启用的<input>元素
:第一个孩子 p:第一个孩子 选择每一个<p>父元素的第一个子元素
::首字母 p::首字母 选择每个的第一个字母<p>元素
::第一行 p::第一行 选择每个的第一行<p>元素
:first-of-type p:第一个类型 选择每一个<p>第一个元素<p>其父元素
:重点 输入:焦点 选择具有焦点的输入元素
:全屏 :全屏 选择处于全屏模式的元素
:徘徊 悬停 鼠标悬停时选择链接
:在范围内 输入:在范围内 选择具有指定范围内的值的输入元素
:不定 输入:不确定 选择处于不确定状态的输入元素
:无效的 输入:无效 选择所有具有无效值的输入元素
: 朗 (语言) p: 语言 (it) 选择每一个<p>元素的 lang 属性等于“it”(意大利语)
:最后一个孩子 p:最后一个孩子 选择每一个<p>父元素的最后一个子元素
:last-of-type p:最后一种类型 选择每一个<p>最后一个元素<p>其父元素
:关联 一条链接 选择所有未访问的链接
::标记 ::标记 选择列表项的标记
:不是(选择器) :不(p) 选择所有不属于<p>元素
:nth-child(n) p:第 n 个子项(2) 选择每一个<p>父元素的第二个子元素
:倒数第 n 个孩子(n) p:倒数第 n 个孩子(2) 选择每一个<p>从最后一个子元素开始算起,是其父元素的第二个子元素
:第 n 个最后类型的(n) p:第 n 个最后类型的值(2) 选择每一个<p>第二个元素<p>其父元素的元素,从最后一个子元素开始算起
:nth-类型(n) p:第 n 个类型(2) 选择每一个<p>第二个元素<p>其父元素
:only-of-type p:only-of-type 选择每一个<p>唯一元素<p>其父元素
:唯一的孩子 p:独生子女 选择每一个<p>父元素的唯一子元素
:选修的 输入:可选 选择没有“必需”属性的输入元素
:超出范围 输入:超出范围 选择值超出指定范围的输入元素
::占位符 输入::占位符 选择指定了“占位符”属性的输入元素
:只读 输入:只读 选择指定了“readonly”属性的输入元素
:读写 输入:读写 选择未指定“readonly”属性的输入元素
:必需的 输入:必填 选择指定了“required”属性的输入元素
:根 :根 选择文档的根元素
::选择 ::选择 选择用户选择的元素部分
:目标 #新闻:目标 选择当前活动的 #news 元素(单击包含该锚点名称的 URL)
:有效的 输入:有效 选择所有具有有效值的输入元素
:访问过 已访问 选择所有访问过的链接