CSS选择器

标签选择器：（作用：根据指定的标签名称，在当前界面中找到所有该名称的标签，然后设置属性）
格式：
标签的名称{
属性名称： 属性值；
}
1.标签选择器选中的是当前界面中所有的标签，而不能选中某一个标签，
2.标签选择器无论标签藏得多深都能选中
3.只要是HTML中的标签就可以作为标签选择器

id选择器：（作用：根据指定的id名称找到对应的标签，然后设置属性）
格式：
#id名称{
属性：值
}
注意：1.任何一个HTML标签都有id属性
2.在同一个界面中id的名称是不可以重复的
3.在编写id选择器时一定要在id名称前面加上#
4.id命名规范：id的名称只能由字母，数字，下划线组成（不能以数字开头）
5.id名称不能是HTML标签
6.在企业开发中，一般情况下如果仅仅是为了设置样式，我们不会使用id，因为在前端开发中id是留给js使用的

类选择器：（作用：根据指定的类名称找到对应的标签，然后设置属性）
格式：
.类名{
属性：值；
}
注意：1.任何一个HTML标签都有class属性,每个标签都可以设置类名
2.在同一个界面中class的名称是可以重复的
3.在编写类选择器时一定要在clsaa名称前面加上.
4.类名命名规范：class的名称只能由字母，数字，下划线组成（不能以数字开头）
5.类名就是专门用来给某个特定的标签设置样式的
6.在HTML中每个标签可以同时绑定多个类名
<标签名称 class=“类名1 类名2 。。。”>

注：
id相当于人的身份证不可以重复，class相当于人的名称
一个HTML标签只能绑定一个id名称，可以绑定多个class名称
id选择器以#开口，class选择器以 . 开头
id一般情况下是给js使用的

后代选择器：（作用：找到指定标签的所有特定的后代标签，设置属性）
格式：
标签名称1 标签名称2{
属性：值；
}
可以 1.div p{ }
2. #abc .aaa{ }
3. .sss #ccc{ }
4. div ul li p{ } 可以一直延续下去
先找到叫做标签名称1的标签，然后再在这个标签下面去查所有的名称叫做标签名称2的标签，然后再设置属性
注：
1.后代选择器必须用空格隔开
2.后代不仅仅是儿子，也包括孙子/重孙子，只要最终放到指定标签中的都是后代
3.后代选择器不仅仅可以使用标签名称，还可以使用其他选择器
4.可以使用标签名称/id名称/class名称作为选择器

子元素选择器：（作用：找到指定标签中所有特定的直接子元素，然后设置属性）
格式：
标签名称1>标签名称2{
属性：值；
}
先找到名称叫做标签名称1的标签，然后在这个标签中查找所有直接子元素名称叫做标签名称2的元素
注：
1.子元素选择器只会查找儿子，不会查找其他被嵌套的标签
2.子元素选择器之间需要用>符号连接，并且不能有空格
3.子元素选择器不仅仅可以使用标签名称，还可以使用其他选择器
4.div>ul>li>p,子元素选择器可以通过>符号一直延续下去
5.可以使用标签名称/id名称/class名称作为选择器
后代选择器和子元素选择器都可以通过各自的连接符号一直延续下去
选择器1 选择器2 选择器3 选择器4{ }
选择器1>选择器2>选择器3>选择器4{ }

交集选择器：(了解—不常用）（作用：给所有选择器中的标签中相交的那部分标签设置属性）
格式：
选择器1选择器2{
属性：值；
}
例如：p.abc{ }—找p标签和class=abc相交的部分
注：
1.选择器和选择器之间没有任何的连接符号
2.选择器可以使用标签名称/id名称/class名称

并集选择器：（作用：给所有选择器选中的标签设置属性）
格式：
选择器1，选择器2{
属性：值;
}
例如：.aaa，.vvv{ }
注：
1.并集选择器必须使用逗号隔开
2.选择器可以使用标签名称/id名称/class名称

兄弟选择器：
相邻兄弟选择器：（作用：给指定选择器1后面紧跟的那个选择器2选中的标签设置属性）
格式：
选择器1+选择器2{
属性：值；
}
注：
1.相邻兄弟选择器只能选中紧跟其后的那个标签，不能选中被隔开的标签

通用兄弟选择器：（作用：给指定选择器1后面的所有选择器2选中的所有标签设置属性）
选择器1~选择器2{
属性：值；
}
注：
1.选中的是指定选择器1后面某个选择器2选中的所有标签，无论有没有隔开都可以选中

序选择器：{1.同级别的第几个，2.同类型的第几个）
1.同级别第几个
：first-child 同级别的第一个标签
：last-child 选中同级别中的最后一个标签
：nth-child(n) 选中同级别中的第n个标签
：nth-last-child(n) 选中同级别中的倒数第n个标签
：only-child 选中父元素中唯一的元素
：nth-child(odd) 选中同级别中所有的奇数
：nth-child(evev) 选中同级别中的所有偶数
：nth-child（xn+y）【x和y是用户自定义的，而n是一个计数器，从0开始递增】
例如：p：first-of-type （同级别第一个并且是p标签的设置为属性值，不是p标签的话不设置值）
注：不区分类型

2.同类型的第几个
：first-of-type 选中同级别中同类型的第一个标签
：last-of-type 选中同级别中同类型的最后一个标签
：nth-of-type(n) 选中同级别中同类型的第n个标签
：nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签
：only-of-type 选中父元素中唯一类型的某个标签
：nth-of-type(odd) 选中同级别中同类型的所有奇数
：nth-of-type(even) 选中同级别中同类型的所有偶数
例如：p：first-of-type

属性选择器：（作用：根据指定的属性名称找到对应的标签，然后设置属性）
格式：
[attribute]
作用：根据指定的属性名称找到对应的标签，然后设置属性
例如 p[id] { } 先找到所有p标签，再在p标签中找到有id属性的
[attribute=value]
作用：找到有指定属性，并且属性的取值等于value的标签
例如 p[class=cc] 找到所有的p标签，找到p标签中class属性等于cc的
最常见的应用场景就是用于区分input属性
属性的取值是以什么开头的
[attribute|=value] (css2)
[attribute^=value] (css3)例如： img[alt^=abc] 找到img标签，找到里面alt属性的值以abc开头的
区别：
css2中的只能找到value开头，并且是被“—”和其他内容隔开的
css3中的只要是以value开头的都可以找到，无论有没有被“—”隔开
属性的取值是以什么结尾的
[attribute$=value]
属性的取值是否包含某个特定的值的
[attribute~=value] （css2）
[attribute*=value]（css3）
区别：
css2中的只能找到独立的单词，包含value并且value是被空格隔开的
css3的只要是包含value就可以找到

通配符选择器：（作用：给当前界面上所有的标签设置属性）
格式：
*{
属性：值；
}

伪元素选择器：（作用：给指定标签的内容前面添加一个子元素或者给指定标签的内容后面添加一个子元素）
格式：
标签名称::before{
属性名称：值；
}
例子：
div::before{
content:“内容”; //指定添加的子元素中存储的内容
}
div::after{
content:“内容”;
visibility:hidden；//隐藏添加的子元素
}