css选择器

css选择器

css中最常见的就是选择器，学好选择器对于样式布局都有很大帮助。
css选择器就是指定css要作用的标签，就是选择哪个容器。
css的选择器可以分为两大类：基本选择器和扩展选择器（也叫高级选择器），其中基本选择器有三种，分别为：HTML选择器、ID选择器、Class类选择器，高级选择器有四种，分别为：后代选择器、交集选择器、并集选择器、伪类选择器。
一个标签可以被多个选择器选择，css有着非常严格的计算公式，能够处理冲突，一个标签可以被多个css选择器选择，共同作用，这就是“层叠式”的第一层含义。

一.基本选择器
1.HTML选择器：
HTML选择器也叫标签选择器，选择的是页面上所有这种类型的标签，描述的是“共性”。如body、ul、li、table等。
注意：
①所有的标签都可以是选择器；
②选择的是所有，而不是一个，所以即使这个标签藏得看不见，也可以被选择，描述的是“共性”，不能描述“个性”。

2.ID选择器：
用#定义，ID选择器针对某一个特殊的标签使用，只能使用一次，虽然在HTML页面中定义两个相同的id样式也可以显示，这是非法的，且id选择器更多的不是用来定义样式，id是js用的，js要通过id属性得到标签，即使不是一个类型，也不能使用同一个id。
id选择器的名字可以任取，但是要注意①只能有字母、数字、下划线；②必须以字母开头；③不能和标签同名；④大小写严格区分。
注意：
①针对某个特殊标签使用，只能使用一次；

3.Class类选择器：
用圆点.定义，针对你想要的所有标签使用。
要多使用class少使用id，类上样式，id上行为，class属性交给css使用，id属性交给js使用。
注意：
①类选择器可以被多种标签使用；
②同一个标签可以使用多个类选择器，用空格隔开，这样子是为了让不同的样式叠加在一起，如class=“classone classtwo”；
③不要试图用一个类名把某个标签的所有样式都写完，每一个类要尽可能小，要有“公共”的概念，能让更多标签使用。

二.高级选择器
1.后代选择器：
定义的时候用空格隔开，如A B，表示所有属于A元素后代的B元素，空格代表后代。这是一种共性、特性的平衡，当要把某一个部分的所有进行样式改变，就可以使用后代选择器，描述的是祖先结构。
注意：
①这两个标签不一定是连续紧挨着的，只要保持一个后代的关联就可以。

2.交集选择器：
中间没有空格，一般以标签名开头，常见的有div.class1。
注意：
①是交集，是在一个<>中的，才可以使用。

3.并集选择器：
定义时候用逗号隔开，三种选择器都可以一起使用。

4.伪类选择器
对于元素的不同状态，定义不同的样式信息。
伪类选择器又可以分为静态伪类和动态伪类，静态伪类只能用于超链接，动态伪类针对所有标签都适用。

a{}和a:link{}区别：
① a{}定义的样式针对所有的超链接（包括锚点）；
② a:link{}定义的样式针对所有写了href属性的超链接（不包括锚点）。

动态伪类：
（1）focus聚焦：某个标签获得焦点的时候，如点击某个文本框输入文字获得焦点，可以定义文本框和文字的属性；
（2）hover盘旋：鼠标放到某个标签上的时候；
（3）active长按：点击某个标签没有松鼠标时。

三.一些特殊选择器
1.子代选择器：
用符号>表示，只能时父子关系，不能是后代关系。

2.序选择器：
对于列表而言，多用于无序列表，如ul li:first-child,ul li:last-child。

3.下一个兄弟选择器：
用符号+表示选择下一个兄弟，紧挨着的第一个兄弟（元素）。