css选择器

目录

1、基本选择器

1、标签选择器

2、类选择器

3、ID选择器

4、通配

5、!improtent

2、层次选择器

1、后代

2、子代

3、相邻兄弟

4、后面所有兄弟

3、结构选择器

1、A B:first-child

2、A B:first-of-type

3、A B:last-child

4、A B:last-of-type

5、A>B:nth-child(num)

6、A>B:nth-of-type(num)

7、A:not(条件)

​编辑 

4、总结

---

1、基本选择器

1、标签选择器

基本语法：标签名 {}

2、类选择器

基本语法：.类名 {}

类名设置在标签内部。

3、ID选择器

基本语法：#id {}

每个标签都有且仅有一个id。

4、通配

基本语法：* {}

表示选中所有的标枪设置样式

5、!improtent

基本语法： 选择器 { 属性：值 !improtent; ...   }

表示是最高级别的，后面是不可修改的，一般情况下，不推荐使用!improtant来提高优先级。

这里要说一个权重的问题，以为不同的选择器所代表的优先级不同，一般是通配<标签<类<ID<!importent。

1.这是没有写!importent，所以根据权重来看是ID选择器生效。

2.这是添加了!importent后，提高了通配的优先级，导致本来处于最低优先级的通配生效，而ID选择没有生效。

  

2、层次选择器

其中A、B表示标签

1、后代

基本语法：A空格B 

表示选中A里面的B

2、子代

基本语法：A>B

表示选中A里面的子代B（其中子代表示第一代）

3、相邻兄弟

基本语法：A+B

表示选中A后面相临的第一个兄弟元素

4、后面所有兄弟

基本语法：A～B

表示选中A后面所有的B元素

3、结构选择器

其中A、B均表示选择器。

1、A B:first-child

在A中选择第一个元素，并且这个元素与B相同。

 注：这里要记住一点，是先拿取元素后，进行比较，如果不是，代表没有选中。下面last-child也是。 

2、A B:first-of-type

在A中选择出所有与B相同且同级别的元素，并且选择第一个。

这里就会出现上面一个问题，当我们拿取第一个元素不是B后，会出现失效，之后我们就可以换成first-of-type的属性。先把所有B同级别的选出来，再选第一个。

3、A B:last-child

在A中选择最后一个元素，这个元素与B相同，反之没有选中。

4、A B:last-of-type

在A中选出所有与B相同且同级别的元素，并且选中最后一个。这里同第二个类似，只是选中第一个和最后一个区别。

5、A>B:nth-child(num)

在A中选择出第num个元素，并且这个元素与B相同。

注：这里也会先进行比较，如果不是，表示没有选中。 

6、A>B:nth-of-type(num)

在A中选出所有与B相同且同级别的元素，并选中第num个元素

7、A:not(条件)

除了符合条件选中的其他元素。

4、总结

 这里只是简单进行了一部分常用选择器的介绍，后面还有一些不常用的因为使用习惯，可能需要各位自己进行了解。并且上面的内容可能会出现错误，欢迎大家进行纠错。