1.1css选择器

1.1.1选择器

常见的类选择器、标签选择器等。

1.1.2选择符

第一种：后代关系--空格（ ） .container img { width : 100px; }
第二种：父子关系--尖括号（>） ol > li { width : 100px; }
第三种：相邻兄弟关系--加号（+）button + button { margin : 10px; }
第四种：兄弟关系--弯弯（~） button ~ button { margin : 100px; }
第五种：列关系--双管道（||） .col || td { background-color : blue; }

1.1.3伪类

前面有一个冒号的是伪类 （:） a:hover { color : blue; }

1.1.4伪元素

前面有两个冒号的是伪元素（::） .container::before{ color:blue;}
常见的有::before , ::after , ::first-letter , ::first-line

1.2css选择器的作用域

以前只有全局，现在存在局部作用域。

1.3css选择器的命名空间

<p>文字<a href>点击刷新</a></p>
<p>svg<svg><a xlink:href><path d="..."/></a></svg></p>
@namespace "http://www.aaa.org/1999/xhtml";
@namespace  svg  "http://www.aaa.org/1999/xhtml";
svg | a { color : black; }
a { color : red; }

可以被各种选择器替代，遇到大规模冲突场景时，这是一种解决方法。

2.无效的css选择器特性与实际应用

当出现浏览器不支持的伪类时，同时并列的全部选择器都会失效。
解决办法：
可以将并列的语句分开书写；
也可以在不支持的伪元素之前加上浏览器内核前缀，例如 -webkit- 。