CSS的选择器和CSS3的选择器对比

这里我说的CSS就是在CSS3之前的的版本的CSS1和CSS2，到现在没有人就会这么去叫CSS1或CSS2。

在以前的CSS里面的选择器：

css里面的基本选择器有：ID选择器就是在元素(标签)上面加上一个id的属性给一个名字，在样式表上面使用时就是用元素(标签)上面id属性的名字签名加上#。
元素选择器(标签选择器)就是使用标签名在样式表上面使用。
类选择器就是和id选择器差不多就是把#换成.就行了。
全局选择器也叫通配符选择器这个选择器就是单纯的使用一个*就行了。
子代选择器的使用方法就是例：#div2 > span{}。
后代选择器的使用方法就是例：#div1 span{}。
群组选择器就是使用逗号给选择器分开就行了。
伪类选择器有很多
例：

//设置超链接未被访问前的样式
a:link {}
//设置超链接已经访问过时的样式
a:visited {}
//设置鼠标浮上元素时的样式
a:hover {}
//设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式。
a:active {}
//设置对象在成为输入焦点（该对象的onfocus事件发生）时的样式。
//注意：webkit内核浏览器会默认给:focus状态的元素加上outline的样式。
a:focus {}
//匹配使用特殊语言的a元素，这个小括号里面是填写的在元素上面设置的lang属性的名字
a:lang(fr) {}
//匹配父元素的第一个子元素a
//注意：在使用这个的时候必须你的这个元素要为他的父级元素的第一个儿子，否则就不会被选中就会失效
a:first-child {}

注意：

a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后
可靠的顺序是：l(link)ov(visited)e h(hover)a(active)te, 即用喜欢(love)和讨厌(hate)两个词来概括

在CSS3里面的选择器：

在CSS3里面的所有都是在之前的CSS版本上面新增的选择器和伪类选择符：
在之前的CSS版本上面新增的选择器和没有提到的选择器：

没有提到的相邻选择器：

例：

//选择紧贴在E元素之后F元素，元素E与F必须同属一个父级。
//注意：这个里面的相邻选择符就是只找到E后面的一个F元素
E+F {}

在CSS3里面新增的兄弟选择符

例：

//选择E元素后面的所有兄弟元素F，元素E与F必须同属一个父级。
//注意:选择的只是同级的元素F，后代中的元素F不会被选择。
E~F {}

在CSS3里面新增的属性选择器

[标签上面的属性]、[标签上面的属性=“属性值”]、[属性~=“属性值”]、[属性|=“属性值”]、[属性^=“属性值”]、[属性$=“属性值”]、[属性*=“属性值”]
例：

//这个就是中括号里面的是表示元素上面有这个属性的标签全部选中
div[class] {
     color: #f40;
}

//这样写的意思是表示并且的意思，就是表示元素上面有alt和title这样的属性的标签元素
[alt][title] {
    border: 5px solid #f00;
}

例：

//这个表示在p标签上面并且有着class属性并且class的属性名为p1的标签
p[class='p1'] {
    font-size: 30px;
}

例：

//这个表示img标签上面有着class属性，并且它的第一个属性名为单独有的一个属性名
img[class~="imgTarget"] {
    width: 50px;
    height: 50px;
}

例：

//这个表示在img标签上面有着class属性并且他的属性名的第一个单词为b
//注意：这个属性名必须为完整的单词
img[class |='b'] {
    border: 5px solid #00f;
    width: 100px;
    height: 100px;
}

例：

//这个的意思是img标签上面有class属性并且他的属性是以a开头的属性值
img[class^='a'] {
    border: 5px solid #f00;
}

例：

//这个刚好和上面的^=的意思相反的，就是找到class属性里面的属性值是以a结尾的标签
img[class$='a'] {
    border: 5px solid #ff0;
}

例：

//这个的意思是匹配属性值中包含指定值的每个元素
img[class*="img"] {
    width: 100px;
    height: 100px;
}

在CSS3里面新增的伪类选择器

:first-child 、:last-child 、:first-of-type 、:not(:first-of-type) 、:last-of-type 、:first-of-type 、:nth-child(2) 、:nth-of-type(2)、:nth-last-child(1)、:nth-last-of-type(even) 、:nth-of-type(odd)、:only-child、:empty 、:checked、:disabled、:root
例：

//这个是找到class名为listA 下面的第一个子级标签
.listA h1:first-child {
    background-color: #f00;
}

例：

//这个是找到class名为listA 下的li的最后一个
.listA li:last-child {
    background-color: #ff0;
}

例：

//这个是找到class名为listA 下面的li的第一个
.listA li:first-of-type {
    background-color: #abcedf;
}

例：

//这个是找到class名为listA 下面的不是第一个li的其他li
.listA li:not(:first-of-type) {
    color: #f22;
}

例：

//这个是找到class名为listA下面的最后一个h1
.listA h1:last-of-type {
    background-color: #ff0;
    font-size: 16px;
}

例：

//这个是找到class名为listA下面的第一个h1
.listA h1:first-of-type {
    font-size: 18px;
}

例：

//匹配属于其父元素中第n个子元素  子元素相对整洁（没有其他的标签乱入）
.listB li:nth-child(2) {
    background-color: #f00;
}

例：

//找到指定的子元素再排序
.listB li:nth-of-type(2) {
    background-color: #f40;
}

例：

//这个就是找到ul下面的倒数的第一个li元素
.listB li:nth-last-child(1) {
    background-color: #00f;
}

例：

//倒数的偶数数个元素 
.listC li:nth-last-of-type(even) {
      color: aqua;
}

例：

//正数的第偶数个元素 
.listC li:nth-of-type(even) {
      color: #8080f4f4;
}

例：

//正数的第奇数个元素
.listC li:nth-of-type(odd) {
      background-color: #f40;
}

注意：
循环使用的样式：
(xn+y)
n自然数 固定不变 css是从1开始的
x每次循环总共包括几种样式
y样式在循环中所处的位置

例：

//匹配属于其父元素中唯一的资源 
ul li:only-child {
     background-color: #0f0;
     color: #999;
     font-size: 30px;
}

例：

//匹配没有子元素的元素，也不能包括文本元素
ul:empty {
    width: 100px;
    height: 100px;
    background-color: #00f;
}

例：

//被选中的 
form input:checked {
      margin: 0 50px;
}

例：

这个是input框被禁的样式
input:disabled {
     border: 1px solid #f20;
     background-color: #fcc;
     box-shadow: 1px 2px 3px #f20;
}

例：

//这个是input框被又不被禁的样式 
input:enabled {
     background-color: green;
}

例：

//根标签选择器 html文件中的文杰点是html和html这个标签选择器的效果等同
//root可以单独使用也可以，用的效果和html标签同等效果
:root {
 	background-color: purple;
}

例：

//找到class属性名为wrapper的内容的首个字符 
 .wrapper:first-letter {
       font-size: 20px;
       //字体加粗
       font-weight: bold;
       color: #f00;
}

例：

//找到class属性名为wrapper的内容设置第一行的样式。
.wrapper::first-line {
    font-weight: bold;
}

例：

//被用户选中的部分，只能改变背景颜色和文本颜色 */
.wrapper::selection {
   background-color: #fd6433;
}

例：

//url带有后面由锚点名称 指向文档内某个具体的元素，这个被链接的元素就是目标元素。可用于选取当前活动的目标元素。
div:target {
   top: 0;
   left: 0;
}

CSS3就是在原有的CSS2和CSS1的基础上面新增了一些新的选择器和伪类选择器，更加方便了我们的页面的开发。