每日一练 CSS选择器整理

标签选择器

比如： 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