css选择器

css选择器

一，标签选择器

作用：根据指定的标签名称，在当前界面中找到所有该名称的标签，然后设置属性

格式：
标签名称{
		属性:值；
	                 }

注意点：

  -标签选择器选中的是当前界面中所有的标签，而不能单独选中某一个标签
  -标签选择器无论标签藏的多深都能选中
  -只要是html中的标签就可以作为标签选择器

二，id选择器

作用：根据指定的id名称找到对应的标签，然后设置属性

格式：
#id名称{
	  属性:值;
     		     }

注意点：

  -在同一个界面中id的名称是不可以重复的
  -在编写id选择器时一定要在id名称前面加上#
  -id的名称只能由字母或数字或下划线a-z 0-z _
  -id名称不能是html标签的名称
  -在企业开发中一般情况下如果仅仅是为了设置样式，我们不会使用id，因为在前段开发中id是留给js使用的

三，类选择器（也就是class选择器）

作用：根据指定的类名称找到对应的标签，然后设置属性

格式：
类名{
	  属性:值;
     		     }

注意点：

  -每一个html标签都有一个属性叫做class，也就是说每个标签都可以设置类名
  -在同一个界面中class的名称是不可以重复的
  -在编写class选择器时一定要在class名称前面加上"."
  -类名的命名规范和id名称的命名规范一样
  -类名就是专门用来给某个特定的标签设置样式的
  -在html中每个标签可以同时绑定多个类名

四，后代选择器

作用：找到指定标签的所有后代标签，设置属性

格式：
标签名称1 标签名称2{
	  属性:值;
     		     }
注释：先找到名称叫做标签一的标签，然后在这个标签下面去查找所有名称叫做标签名称二的标签，然后设置属性

注意点：

   -后代选择器必须用空格隔开
   -后代不仅仅是儿子，也包括重孙子，只要最终是放到指定标签中的都是后代
   -后代选择器不仅仅可以使用标签名称，还可以使用其他选择器
   -后代选择器可以不断的往下延伸

五，子元素选择器

作用：找到指定标签中所有特定的直接子元素，设置属性

格式：
标签名称1>标签名称2{
	  属性:值;
     		     }
注释：先找到名称叫做"标签名称1"的标签，然后在这个标签中查找所有直接子元素名称叫做"标签名称2"的元素

注意点：

-子元素选择器只会查找儿子，不会查找其他被嵌套的标签
-子元素选择器之间需要用>符号链接，并且不能有空格
-子元素选择器不仅仅可以使用标签名称，还可以使用其他选择器
-子元素选择器可以通过>符号一直延续下去

六，交集选择器

作用：给所有选择器选中的标签中，相加的那部分标签设置属性

格式：
选择器1选择器2{
	  属性:值;
     		     }

注意点：

   -选择器和选择器之间没有任何的连接符号
   -选择器可以使用标签名称/id名称/class名称
   -交集选择器仅仅作为了解，企业开发中用的并不多

七，并集选择器

作用：给所有选择器选中的标签设置属性

格式：
选择器1,选择器2{
	  属性:值;
     		     }

注意点：

   -并集选择器和必须使用,来连接
   -选择器可以使用标签名称/id名称/class名称

八，兄弟选择器（分两种）

相邻兄弟选择器（CSS2）：

作用：给指定选择器后面紧跟的那个选择器选中的标签设置属性

格式：
选择器1+选择器2{
	  属性:值;
     		     }

注意点：

   -相邻兄弟选择器必须通过+连接
   -相邻兄弟选择器只能选中紧跟其后的那个标签

通用兄弟选择器（CSS3）：

作用：给指定选择器后面的所有选择器选中的

格式：
选择器1~选择器2{
	  属性:值;
     		     }

注意点：

    -通用兄弟选择器必须用~连接
    -通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签，无论有没有隔开都能选中

九，序选择器（CSS3新增加的选择器最具有代表性的）

同级别的第几个：

:first-child 选中同级别的第一个标签
:last-child 选中同级别中的最后一个标签
:nth-child(n) 选中同级别中的第n个标签
:nth-last-child(n) 选中同级别中的倒数第n个标签
:only-child 选中父元素中唯一的元素
:nth-child(odd) 选中同级别中的所有奇数标签
:nth-child(even) 选中同级别中的所有偶数标签
:nth-child(xn+y) x和y是用户自定义的，而n是一个计数器，从0开始递增

注意点：

    -注意点：不区分类型

同类型的第几个：

:first-of-type 选中同级别中类型的第一个标签
:last-of-type 选中同级别中类型的最后一个标签
:nth-of-type(n) 选中同级别中类型的第n个标签
:nth-last-of-type(n) 选中同级别中类型的倒数第n个标签
:only-of-type 选中父元素中唯一类型的某个标签

注意点：

    -注意点：区分类型

十，属性选择器

作用：根据指定的属性名称找到对应的标签，然后设置属性

1、[attribute]
作用：根据指定的属性名称找到对应的标签，然后设置属性
2、[attribute=value]
作用：找到有指定属性，并且属性的取值等于value的标签，然后设置属性
最常见的应用场景那就是用于区分input属性
input[type=password]{}
<input type="text" name="" id="">
<input type="password" name="" id="">
3、属性的取值是以什么开头的  （掌握css3）
[attribute|=value]  CSS2
[attribute^=value]  CSS3
两者之间的区别
css2中的只能找到value开头，并且value是被-和其它内容隔开的
css3中的只要是以value开头的都可以找到，无论有没有被隔开
4、属性的取值是以什么结尾的
[attribute$=value]CSS3
5、属性的取值是否包含某个特定的值的
[attribute~=value]CSS2
[attribute*=value]CSS3
两者之间的区别
css2中的只能找到独立的单词，也就是包含value，并且value是被空格断开的
css3中的只要包含value就可以找到

十一，通配符选择器

作用：给当前界面上所有的标签设置属性

格式：
*{
	  属性:值;
     		     }

注意点：

  由于通配符选择器时设置界面上所有的标签的属性，所以在设置之前会遍历所有的标签，如果当前界面上的标签比较多，那么性能就会比较差，所以在企业开发中一般不会使用通配符选择器