标签选择器
比如: div{ color: #000;} 表示页面内所有的div中的文字的颜色都会变成黑色。
classname选择器
比如 .class{ color: #000;} 表示当前根目录下的所有classname为class的标签中的文字都是黑色,其他目录建议一层一层的写。
ID选择器
比如 #class{ color: #000;} 表示当前页面所有ID为 class的标签的文字颜色为黑色。
css后代选择器(名称为w3school所复制,感谢)
比如.class span{ color: #000;}表示标签class为class中的所有span标签的文字颜色为黑色
子元素选择器(名称为w3school所复制,感谢)
h1 > span{ color: #000;}表示根目录下第一个h1标签中的span标签字体颜色变成黑色,其他不变。
相邻兄弟选择器(名称为w3school所复制,感谢)
<ul>
<li></li>
<li></li>
<li></li>
</ul>
li+li{ color:#000;}
这样的效果ul中除了第一个li其他的li中的字体颜色都是黑色,因为用这个选择器的结合符,只能选择第二个元素,所以以此类推,除了第一个其他的都没问题。
[id*=div]{
所有包含div的id的属性
}
[id^=div]{
首字母为div的id的属性选择
}
[id$=div]{
结束字母为div的id的属性选择器
}
伪类选择器(名称为w3school所复制,感谢)
li:active{ color:#000;} 当某个li标签被激活之后所要添加的样式
input:focus{ color:#000;} 当某个input获取焦点之后的样式
li:hover{ color:#000;} 当鼠标悬浮在某个li标签上面的时候所改变的元素
a:link{ color:#000;} 给超链接添加固定的样式,也就是默认刚打开网页之后的样式
a:visited{ color:#000;} 给已经访问过的连接添加样式,a标签中的字体颜色将变为黑色
a:hover{ color:#000;} 当鼠标悬浮到a标签上方的时候,标签中的字体颜色将变为黑色
a:active{ color:#000;} 标签被选定之后,其字体颜色将变为黑色。也就是当鼠标点下还未抬起的时候的样式
注意事项:
提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
提示:在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
提示:伪类名称对大小写不敏感。
标签前后的文字样式
li:before{ content: "你好", color:#000;}表示在li标签最前面加上“你好”两个字,并且字体颜色为黑色。
li:after{ content: "你好", color:#000; }表示与上面相反的作用
元素子标签按序选择器
li:nth-child(1){}意思是第一个li元素
li:nth-child(2n+1){}意思是 1 3 5 7等元素
li:last-child{} 意思是最后一个元素
伪元素
li:first-line{}选中li标签中的第一行文字
li:first-letter{}选中li标签中的第一个首字母
:hover{ background-color:#000; } 表示当前根目录的全部背景颜色为黑色
div *:not(h1){} 表示DIV中所有的元素但是不包含H1标签下的元素的选中方法
:empty{}表示选中标签中没有任何内容的标签进行样式处理
:target{} 表示页面内跳转的时候,跳转到哪个区域哪个区域就会执行当前样式
input的选择
input[type="text"]:enabled{}
input[type="text"]:disabled{}
表示type类型为text的input中选中能用的和不能用的选中方法
原地址:http://blog.csdn.net/u013161218/article/details/78119943