CSS :invalid 选择器
实例
如果 input 元素中的值是非法的，设置样式为红色：
input:invalid
{
border:2px solid red;
}
定义和使用
:invalid 选择器用于在表单元素中的值是非法时设置指定样式。
注意： :invalid 选择器只作用于能指定区间值的元素，例如 input 元素中的 min 和 max 属性，及正确的 email 字段, 合……继续阅读 »
2年前 (2022-09-04) 243浏览 0评论
0个赞
CSS :valid 选择器
实例
如果 input 元素中输入的值为合法的，设置其为黄色:
input:valid
{
background-color: yellow;
}
定义和使用
:valid 选择器在表单元素的值需要根据指定条件验证时设置指定样式。
注意: :valid 选择器只作用于能指定区间值的元素，例如 input 元素中的 min 和 max 属性，及正确的 email 字段, ……继续阅读 »
2年前 (2022-09-04) 120浏览 0评论
0个赞
CSS :optional 选择器
实例
如果 input 元素没有设置 “required” 属性，设置其为黄色:
input:optional
{
background-color: yellow;
}
定义和使用
:optional 选择器在表单元素是可选项时设置指定样式。
表单元素中如果没有特别设置 required 属性即为 optional 属性。
注意:……继续阅读 »
2年前 (2022-09-04) 124浏览 0评论
0个赞
CSS :required 选择器
实例
如果 input 元素设置了 “required” 属性，设置其为黄色:
input:required
{
background-color: yellow;
}
定义和使用
:required 选择器在表单元素是必填项时设置指定样式。
表单元素可以使用 required 属性来设置必填项。
注意： :required 选择器……继续阅读 »
2年前 (2022-09-04) 134浏览 0评论
0个赞
CSS :read-only 选择器
实例
如果 input 元素设置了 “readonly” 属性，设置输入框样式为黄色:
input:read-only
{
background-color: yellow;
}
定义和使用
:read-only 选择器用于选取设置了 “readonly” 属性的元素。
表单元素可以设置 “rea……继续阅读 »
2年前 (2022-09-04) 86浏览 0评论
0个赞
CSS :in-range 选择器
实例
输入的值在指定区间内时，设置指定样式:
input:in-range
{
border:2px solid yellow;
}
定义和使用
:in-range 选择器用于标签的值在指定区间值时显示的样式。
注意： :in-range 选择器只作用于能指定区间值的元素，例如 input 元素中的 min 和 max 属性。
浏览器支持
表格中的数字……继续阅读 »
2年前 (2022-09-04) 136浏览 0评论
0个赞
CSS :read-write 选择器
实例
如果 input 元素不是只读，即没有 “readonly” 属性，设置输入框样式为黄色:
input:read-write
{
background-color: yellow;
}
定义和使用
:read-write 选择器用于匹配可读及可写的元素。
注意: 目前, 在大多浏览器中, :read-write 选择器只使……继续阅读 »
2年前 (2022-09-04) 114浏览 0评论
0个赞
CSS :out-of-range 选择器
实例
输入的值在指定区间外时，设置指定样式:
input:out-of-range
{
border:2px solid red;
}
定义和使用
:out-of-range 选择器用于标签的值在指定区间之外时显示的样式。
注意： :out-of-range 选择器只作用于能指定区间之外值的元素，例如 input 元素中的 min 和 max 属性……继续阅读 »
2年前 (2022-09-04) 126浏览 0评论
0个赞
CSS3 ::selection 选择器
实例
将选定的文本红色：
::selection
{
color:#ff0000;
}
::-moz-selection
{
color:#ff0000;
}
定义和用法
::selection选择器匹配元素中被用户选中或处于高亮状态的部分。
::selection只可以应用于少数的CSS属性：color, background, cursor,和……继续阅读 »
2年前 (2022-09-04) 89浏览 0评论
0个赞
CSS3 :checked 选择器
实例
为所有选中的输入元素设置背景颜色：
input:checked {
height: 50px;
width: 50px;
}
定义和用法
:checked 选择器匹配每个选中的输入元素（仅适用于单选按钮或复选框）。
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
选择器
:checked
4.0
9.0
3.5
3.……继续阅读 »
2年前 (2022-09-04) 137浏览 0评论
0个赞
CSS3 :not 选择器
实例
为每个并非<p>元素的元素设置背景颜色：
:not(p)
{
background:#ff0000;
}
定义和用法
:not(selector) 选择器匹配每个元素是不是指定的元素/选择器。
浏览器支持
表格中的数字表示支持该选择器的第一个浏览器的版本号。
选择器
:not()
4.0
9.0
3.5
3.2
9.6
……继续阅读 »
2年前 (2022-09-04) 134浏览 0评论
0个赞
CSS3 :disabled 选择器
实例
设置所有type=”text”的禁用的输入元素的背景颜色：
input[type=”text”]:disabled
{
background:#dddddd;
}
定义和用法
:disabled 选择器匹配每个禁用的的元素（主要用于表单元素）。
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。……继续阅读 »
2年前 (2022-09-04) 101浏览 0评论
0个赞
CSS3 :target 选择器
实例
Highlight active HTML anchor:
:target
{
border: 2px solid #D4D4D4;
background-color: #e5eecc;
}
定义和用法
＃ 锚的名称是在一个文件中链接到某个元素的URL。元素被链接到目标元素。
:target选择器可用于当前活动的target元素的样式。
……继续阅读 »
2年前 (2022-09-04) 139浏览 0评论
0个赞
CSS3 :enabled 选择器
实例
设置所有type=”text”的启用的输入元素的背景颜色：
input[type=”text”]:enabled
{
background:#ffff00;
}
定义和用法
:enabled 选择器匹配每个启用的的元素（主要用于表单元素）。
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
……继续阅读 »
2年前 (2022-09-04) 169浏览 0评论
0个赞
CSS3 :empty 选择器
实例
指定空的p元素的背景色：
p:empty
{
background:#ff0000;
}
定义和用法
:empty选择器选择每个没有任何子级的元素（包括文本节点）。
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
选择器
:empty
4.0
9.0
3.5
3.2
9.6
……继续阅读 »
2年前 (2022-09-04) 2505浏览 0评论
0个赞
CSS3 :last-child 选择器
实例
指定父元素中最后一个p元素的背景色：
p:last-child
{
background:#ff0000;
}
定义和用法
:last-child 选择器用来匹配父元素中最后一个子元素。
提示: p:last-child 等同于 p:nth-last-child(1)。
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
选择器
……继续阅读 »
2年前 (2022-09-04) 197浏览 0评论
0个赞
CSS3 :root 选择器
实例
设置HTML文档的背景色：
:root
{
background:#ff0000;
}
定义和用法
:root选择器用匹配文档的根元素。
在HTML中根元素始终是HTML元素。
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
选择器
:root
4.0
9.0
3.5
3.2
9.6
……继续阅读 »
2年前 (2022-09-04) 170浏览 0评论
0个赞
CSS3 :nth-last-of-type() 选择器
实例
指定每个p元素匹配同类型中的倒数第2个同级兄弟元素背景色：
p:nth-last-of-type(2)
{
background:#ff0000;
}
定义和用法
:nth-last-of-type(n)选择器匹配同类型中的倒数第n个同级兄弟元素。
n 可以是一个数字，一个关键字，或者一个公式。
提示:请参阅::nth-last-ch……继续阅读 »
2年前 (2022-09-04) 105浏览 0评论
0个赞
CSS3 :nth-of-type() Selector
实例
指定每个p元素匹配同类型中的第2个同级兄弟元素的背景色：
p:nth-of-type(2)
{
background:#ff0000;
}
定义和用法
:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。
n可以是一个数字，一个关键字，或者一个公式。
提示: 请参阅 :nth-child() 选择器。该选择器匹配父元……继续阅读 »
2年前 (2022-09-04) 94浏览 0评论
0个赞
CSS3 :nth-last-child() 选择器
实例
指定每个 p 元素匹配同类型中的倒数第 2 个同级兄弟元素背景色：
p:nth-last-child(2)
{
background:#ff0000;
}
定义和用法
:nth-last-child(n) 选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。
n可以是一个数字，一个关键字，或者一个公式。
……继续阅读 »
2年前 (2022-09-04) 140浏览 0评论
0个赞
CSS3 :nth-child() 选择器
实例
指定每个 p 元素匹配的父元素中第 2 个子元素的背景色：
p:nth-child(2)
{
background:#ff0000;
}
定义和用法
:nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制。
n 可以是一个数字，一个关键字，或者一个公式。
提示: 请参阅选择器。该选择器匹配同类型中的第 n 个同级兄弟元素。
……继续阅读 »
2年前 (2022-09-04) 115浏览 0评论
0个赞
CSS3 :only-of-type 选择器
实例
指定属于父元素的特定类型的唯一子元素的每个 p 元素：：
p:only-of-type
{
background:#ff0000;
}
定义和用法
:only-of-type 代表了任意一个元素，这个元素没有其他相同类型的兄弟元素。
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
选择器
:only-of-type……继续阅读 »
2年前 (2022-09-04) 99浏览 0评论
0个赞
CSS3 :only-child 选择器
实例
匹配属于父元素中唯一子元素的 p 元素:
p:only-child
{
background:#ff0000;
}
定义和用法
:only-child 选择器匹配属于父元素中唯一子元素的元素。
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
选择器
:only-child
4.0
9.0
3.5
3.2
9.6
……继续阅读 »
2年前 (2022-09-04) 129浏览 0评论
0个赞
CSS3 :first-of-type 选择器
实例
选择的 p 元素是其父元素的第一个 p 元素：
p:first-of-type
{
background:#ff0000;
}
定义和用法
:first-of-type 选择器匹配元素其父级是特定类型的第一个子元素。
提示: 和 :nth-of-type(1) 是一个意思。
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
选择器……继续阅读 »
2年前 (2022-09-04) 286浏览 0评论
0个赞
CSS3 :last-of-type 选择器
实例
指定其父级的最后一个p元素的背景色：
p:last-of-type
{
background:#ff0000;
}
定义和用法
:last-of-type选择器匹配元素其父级是特定类型的最后一个子元素。
提示: 和:nth-last-of-type(1)是一个意思。
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
选择器
……继续阅读 »
2年前 (2022-09-04) 132浏览 0评论
0个赞
CSS3 [attribute*=value] 选择器
实例
设置class属性值包含”test”的所有div元素的背景颜色：
div[class*=”test”]
{
background:#ffff00;
}
定义和用法
[attribute*=value] 选择器匹配元素属性值包含指定值的元素……继续阅读 »
2年前 (2022-09-04) 161浏览 0评论
0个赞
CSS3 [attribute^=value] 选择器
实例
设置class属性值以”test”开头的所有div元素的背景颜色：
div[class^=”test”]
{
background:#ffff00;
}
定义和用法
The [attribute^=value]
选择器匹配元素属性值带指定的值开始的元素。
浏览器支持
所有主流浏览器都支……继续阅读 »
2年前 (2022-09-04) 96浏览 0评论
0个赞
CSS3 [attribute$=value] 选择器
实例
设置class属性值以”test”结尾的所有div元素的背景颜色：
div[class$=”test”]
{
background:#ffff00;
}
定义和用法
[attribute$=value] 选择器匹配元素属性值带指定的值结尾的元素。
浏览器支持
所有主流浏览器都支持[at……继续阅读 »
2年前 (2022-09-04) 117浏览 0评论
0个赞
CSS3 element1~element2 选择器
实例
设置同一父元素下的 p 元素之后的每一个 ul 元素的背景颜色：
p~ul
{
background:#ff0000;
}
定义和用法
element1~element2 选择器匹配出现在 element1 后面的 element2。
element1 和 element2 这两种元素必须具有相同的父元素，但 element2 不必紧跟在……继续阅读 »
2年前 (2022-09-04) 84浏览 0评论
0个赞
CSS :after 选择器
实例
每个<p>元素之后插入内容：
p:after
{
content:"– Remember this";
}
定义和说明
:after 选择器向选定元素的最后子元素后面插入内容。
使用content 属性来指定要插入的内容。
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
选择器
::af……继续阅读 »
2年前 (2022-09-04) 113浏览 0评论
0个赞
