-
单选按钮和复选按钮都具有选中和未选中状态。“:checked”表示的是选中状态。
查看全部 -
“:disabled”选择器刚好与“:enabled”选择器相反，用来选择不可用表单元素。
通过“:disabled”选择器，给不可用输入框设置明显的样式。
查看全部 -
可用（“:enabled”）和不可用（“:disabled”）
可用输入框样式设置：
input[type="text"]:enabled { background: #ccc; border: 2px solid red; }查看全部 -
:only-of-type选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素
.wrapper > div:only-of-type { background: orange; }查看全部 -
:only-child匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。
查看全部 -
:last-of-type它选择的是父元素下的某个类型的
最后一个子元素。div最后一个元素背景为橙色：.wrapper > div:last-of-type{
background: orange;
}
查看全部 -
:nth-of-type(n)它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用“:nth-of-type(n)”选择器。
查看全部 -
":first-of-type"选择器类似于“:first-child”选择器，不同之处其主要用来定位一个父元素下的某个类型的第一个子元素,:first-child指定第一个元素
将容器“div.wrapper”中的第一个div元素背景设置为橙色:
.wrapper >div:first-of-type {
background: orange;
}
查看全部 -
“:nth-last-child(n)”和"nth-child(n)"相似，区别是last从某父元素的最后一个子元素开始计算。
查看全部 -
“:nth-child(n)”选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd奇数、even偶数)，参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。
ol > li:nth-child(even){
background: green;
}
查看全部 -
:last-child与first-child作用类似，选择器选择的是元素的最后一个子元素
查看全部 -
:first-child选择器表示的是选择父元素的第一个子元素的元素E。
ol > li:first-child{ color: red; }有序列表的序列号1变为红色
查看全部 -
点击指定链接后指定段落产生变化
示例代码
<div class="menuSection" id="brand">
<h2><a href="#brand">Brand</a></h2>
<p>content for Brand</p>
</div>
#brand:target p {
background: orange;
color: #fff;
}
查看全部 -
：empty选择器控制没有任何内容的（空格是内容）
查看全部 -
：not 除什么之外的
input:not([type="submit"]){ border:1px solid red; }除input类型submit外
div：not([id="footer"]){
background: orange;
}
除div#footer外
查看全部
举报