Learning Path
浏览 CSS 参考手册 相关教程与章节。
HTML、CSS、JavaScript、浏览器 API、前端框架与 UI 工程。
教程
319
CSS3 :first-of-type 选择器 完整CSS选择器参考手册 实例 选择的 p 元素是其父元素的第一个 p 元素： [mycode3 type='css'] p:first-of-type { background:#ff0000; } [/mycode3] 尝试一下 » 定义和用法 :first-of-type 选择器匹配元素其父级是特定类型的第一个子元素。 提示: 和 :n..
CSS :first-child 选择器 完整CSS选择器参考手册 实例 匹配 <p> 的父元素的第一个<p>元素 [mycode3 type='css'] p:first-child { background-color:yellow; }[/mycode3] 尝试一下 » 定义和用法 :first-child 选择器匹配其父元素..
CSS :first-letter 选择器 完整CSS选择器参考手册 实例 每个 <p>元素的第一个字母选择的样式： p:first-letter { font-size:200%; color:#8A2BE2; } 尝试一下 » 定义和用法 :first-letter选择器用来指定元素第一个字母的样式。 提示: :first-letter选择器可以使用以..
CSS :first-line 选择器 完整CSS选择器参考手册 实例 每个<p>元素的第一行选择的样式： p:first-line { background-color:yellow; } 尝试一下 » 定义和用法 :first-line选择器用来指定选择器第一行的样式。 注意::first-line选择器可以使用以下属性： font propertie..
CSS :focus 选择器 完整CSS选择器参考手册 实例 一个输入字段获得焦点时选择的样式： input:focus { background-color:yellow; } 尝试一下 » 定义和用法 :focus选择器用于选择具有焦点的元素。 提示: :focus选择器接受键盘事件或其他用户输入的元素。 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 ..
CSS3 element1~element2 选择器 完整CSS选择器参考手册 实例 设置同一父元素下的 p 元素之后的每一个 ul 元素的背景颜色： p~ul { background:#ff0000; } 尝试一下 » 定义和用法 element1~element2 选择器匹配出现在 element1 后面的 element2。 element1 和 element2 这两种元素必须具有..
CSS :hover 选择器 完整CSS选择器参考手册 实例 选择鼠标移到链接上的样式： [mycode3 type='css'] a:hover { background-color:yellow; } [/mycode3] 尝试一下 » 定义和用法 :hover在鼠标移到链接上时添加的特殊样式。 提示: :hover 选择器器可用于所有元素，不仅是链接。 提示: :link 选择器设..
CSS #id Selector 完整CSS选择器参考手册 实例 为 id='firstname' 元素添加指定样式: #firstname { background-color:yellow; } 尝试一下 » 定义和用法 #id选择器指定具有ID的元素的样式。 浏览器支持 所有主流浏览器都支持 #id 选择器。 完整CSS选择器参考手册..
CSS :in-range 选择器 完整CSS选择器参考手册 实例 输入的值在指定区间内时，设置指定样式: input:in-range { border:2px solid yellow; } 尝试一下 » 定义和使用 :in-range 选择器用于标签的值在指定区间值时显示的样式。 注意： :in-range 选择器只作用于能指定区间值的元素，例如 input 元素中的 ..
CSS :invalid 选择器 完整CSS选择器参考手册 实例 如果 input 元素中的值是非法的，设置样式为红色： [mycode3 type='css'] input:invalid { border:2px solid red; }[/mycode3] 尝试一下 » 定义和使用 :invalid 选择器用于在表单元素中的值是非法时设置指定样式。 注意： :invali..
CSS :lang 选择器 完整CSS选择器参考手册 实例 每个<p>元素lang属性值等于'it(Italian)' 的选择的样式： p:lang(it) { background:yellow; } 尝试一下 » 定义和用法 :lang 向带有指定 lang 属性开始的元素添加样式。 注意: 值是整个单词，单独像lang='en..
CSS3 :last-child 选择器 完整CSS选择器参考手册 实例 指定父元素中最后一个p元素的背景色： [mycode3 type='css'] p:last-child { background:#ff0000; } [/mycode3] 尝试一下 » 定义和用法 :last-child 选择器用来匹配父元素中最后一个子元素。 提示: p:last-child 等同于 p:nth-last..
CSS3 :last-of-type 选择器 完整CSS选择器参考手册 实例 指定其父级的最后一个p元素的背景色： p:last-of-type { background:#ff0000; } 尝试一下 » 定义和用法 :last-of-type选择器匹配元素其父级是特定类型的最后一个子元素。 提示: 和:nth-last-of-type(1)是一个意思。 浏览器支持 表格中的数字表示支持..
CSS :link 选择器 完整CSS选择器参考手册 实例 选择未访问链接样式： a:link { background-color:yellow; } 尝试一下 » 定义和用法 :link向未访问的链接添加特殊的样式。 注意: :link 选择器对已经访问的链接没有样式。 提示: 使用 :visited 选择器设置访问过的页面链接的样式，:hover选择器当有鼠标悬停在其上的链接样式，..
CSS3 :not 选择器 完整CSS选择器参考手册 实例 为每个并非 <p> 元素的元素设置背景颜色： [mycode3 type='css'] :not(p) { color: #ff0000; } [/mycode3] 尝试一下 » 定义和用法 :not(selector) 选择器匹配每个元素是不是指定的元素/选择器。 CSS 的 :not 伪类允许你选..
CSS3 :nth-child() 选择器 完整CSS选择器参考手册 实例 指定每个 p 元素匹配的父元素中第 2 个子元素的背景色： [mycode3 type='css'] p:nth-child(2) { background:#ff0000; } [/mycode3] 尝试一下 » 定义和用法 :nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制。 n ..
CSS3 :nth-last-child() 选择器 完整CSS选择器参考手册 实例 指定每个 p 元素匹配同类型中的倒数第 2 个同级兄弟元素背景色： [mycode3 type='css'] p:nth-last-child(2) { background:#ff0000; } [/mycode3] 尝试一下 » 定义和用法 :nth-last-child(n) 选择器匹配属于其元素的..
CSS3 :nth-last-of-type() 选择器 完整CSS选择器参考手册 实例 指定每个p元素匹配同类型中的倒数第2个同级兄弟元素背景色： p:nth-last-of-type(2) { background:#ff0000; } 尝试一下 » 定义和用法 :nth-last-of-type(n)选择器匹配同类型中的倒数第n个同级兄弟元素。 n 可以是一个数字，一个关键字，或者一个..
CSS3 :nth-of-type() Selector 完整CSS选择器参考手册 实例 指定每个p元素匹配同类型中的第2个同级兄弟元素的背景色： p:nth-of-type(2) { background:#ff0000; } 尝试一下 » 定义和用法 :nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。 n可以是一个数字，一个关键字，或者一个公式。 提示: 请参阅 :n..
CSS3 :only-child 选择器 完整CSS选择器参考手册 实例 匹配属于父元素中唯一子元素的 p 元素: [mycode3 type='css'] p:only-child { background:#ff0000; } [/mycode3] 尝试一下 » 定义和用法 :only-child 选择器匹配属于父元素中唯一子元素的元素。 浏览器支持 表格中的数字表示支持该属性的第一..
CSS3 :only-of-type 选择器 完整CSS选择器参考手册 实例 指定属于父元素的特定类型的唯一子元素的每个 p 元素：： [mycode3 type='css'] p:only-of-type { background:#ff0000; } [/mycode3] 尝试一下 » 定义和用法 :only-of-type 代表了任意一个元素，这个元素没有其他相同类型的兄弟元素。 ..
CSS :optional 选择器 完整CSS选择器参考手册 实例 如果 input 元素没有设置 'required' 属性，设置其为黄色: input:optional { background-color: yellow; } 尝试一下 » 定义和使用 :optional 选择器在表单元素是可选项时设置指定样式。 表单元素中如果没有特别设置 require..
CSS :out-of-range 选择器 完整CSS选择器参考手册 实例 输入的值在指定区间外时，设置指定样式: input:out-of-range { border:2px solid red; } 尝试一下 » 定义和使用 :out-of-range 选择器用于标签的值在指定区间之外时显示的样式。 注意： :out-of-range 选择器只作用于能指定区间之外值的元素，..
CSS :read-only 选择器 完整CSS选择器参考手册 实例 如果 input 元素设置了 'readonly' 属性，设置输入框样式为黄色: input:read-only { background-color: yellow; } 尝试一下 » 定义和使用 :read-only 选择器用于选取设置了 'readonly' 属性的元素..