简单选择器

选择器

·简单选择器

标签选择器

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的值是某些特殊值的一些元素