选择器
·简单选择器
标签选择器
p{color:blue;}
类选择器 .className
.special{color:red;}
.stress{font-weight:bold;}
-. 开头
-字母、数字、-、_
-className必须以字母开头
-区分大小写
-出现多次
id选择器 #id
#banner{color:black;}
-# 开头
-字母、数字、-、_
-id必须以字母开头
-区分大小写
-只出现一次
通配符选择器
*{color:blue;}
属性选择器
[att]
[disabled]{background-color:#eee;}
[att=val]
[type=button]{color:blue;}
id选择器其实就是属性选择器的特例
#nav{} == [id=nav]{}
[att~=val]表示属性里面包含了这么一个值,这个值以空格分隔
[class~=sports]{color:blue;}
类选择器就是这种选择器的一个特例
.sport{} == [class~=sports]{}
[att|=val]
[lang|en]{color:red;}选中lang属性等于以en或en-开头的这些元素
[att^=val]以某个值开头的属性选择器
[href^="#"]{color:red;}
[att$=val]以什么结尾的一些元素
[href$=pdf]{color:red;}
[att*=val]属性值包含某些值的
[href*="lady.163.com"]{color:pink;}
·伪类选择器
a:link{color:gray;}选中页面中所有的链接
a:visited{color:red}表示访问过的链接
a:hover{color:green}鼠标移上去的样式
a:active{color:orange}用户鼠标点击上去的样式
input:enabled{color:#ccc;}
input:disabled{color:#ddd;}
input:checked{color:#red;}
li:first-child{color:red;}
li:last-child{color:red;}
li:nth-child(even){color:red;}
li:nth-child(3n+1){color:red;}
li:nth-last-child(3n+1){color:red;}
:only-child{color:red;} 选中只有一个子元素的项
dd:first-of-type{color:red;}选中第一个这种类型的元素
dd:last-of-type{color:red;}
dd:nth-of-type(even){color:red;}
dd:nth-last-of-type(2n){color:red;}
span:only-of-type{color:red;}
:empty选中没有子元素的元素
:root选中html根标签
:not()选中不包含某个选择器的一些元素
:target选中被锚点选为目标的目标元素
:lang()选中language的值是某些特殊值的一些元素
