CSS选择器

选择器是css最重要的概念与使用技巧之一，可以通过css提供的不同选择器快速的对当前页面内的相应标签进行快速选择（选择器可以选择任意指定类型或者只当属性。。。的标签组

简单选择器

根据名称、id、class等进行指定标签的选择

通配符选择器

通过*代表全部标签

*{
/*   
    选择全部标签 进行样式操作
*/
}

元素（标签TagName）选择器

选择指定标签名称的标签（包含自定义标签

标签名{
/*
	选择当前页面标签名为指定名称的标签
*/
}

id选择器

通过对标签设置id属性并进行唯一赋值进行查找

#id{
/*
    为了与元素选择器区分，使用符号#代表书写的是一个id选择器
*/
}

注意：如果页面中存在多个id相同的标签，那么也会为选择这些标签，但是在进行样式书写是一般不建议使用id进行选择，如果必须使用id那么在当前页面id尽量不要重复，因为通常情况下，id是由js对指定标签进行使用的

class类选择器

通过对标签设置class属性进行相同class标签的查找

一个标签可以设置多个class值 并通过空格分隔

.className{
/*
	选择含有指定class属性对应值的标签
*/
}

组合选择器

可以将简单选择器进行组合通过一定的层级关系对标签进一步筛选

后代选择器 (空格)

拼接两个获多个简单选择器 通过空格设置之间的后代关系

select1 select2{
/*
	查找选择器1下所有的标签 符合选择器2的标签
*/
}

子代选择器 (>)

选择指定选择器下的子级标签选择器

select1>select2{
/*
	查找选择器1下所有的子标签 符合选择器2的标签
*/
}

相邻选择器(+)

相邻兄弟选择器匹配所有作为指定元素的相邻同级的元素。

select1+select2{
/*
	查找与选择器1选择的标签同级 并且符合选择器2选择的标签
*/
}

通用兄弟选择器 (~)

选择指定标签同级元素

select1~select2{
/*
	查找符合选择器1同级的所有标签 并且使用选择器2进一步筛选    
*/
}

属性选择器

通常情况下一般属性选择器与标签一同使用，常用于获取指定标签含有指定属性的标签选择

select1[att]{
/*
	 查找符合选择器1的所有标签拥有指定属性的标签
*/
}

select1[att="value"]{
/*
	 查找符合选择器1的所有标签拥有指定属性并且属性值为指定值的标签
*/
}

select1[att~="value"]{
/*
	 查找符合选择器1的所有标签拥有指定属性并且属性值包含指定值的标签（title=value v1或者type=value v2）
    必须是完整词汇
*/
}

select1[att*="value"]{
/*
	 查找符合选择器1的所有标签拥有指定属性并且属性值包含指定值的标签只要存在指定value即可
*/
}

select1[att|="value"]{
/*
	 查找符合选择器1的所有标签拥有指定属性并且属性值以指定值开头的标签 
    （要求是如果不为一个单词需要使用连字符 value-a1）
*/
}

select1[att^="value"]{
/*
	 查找符合选择器1的所有标签拥有指定属性并且属性值以指定值开头的标签 
*/
}

select1[att$="value"]{
/*
	查找符合选择器1拥有指定属性并且属性值以指定值结尾的标签    
*/    
}

伪类选择器

伪类用于定义元素的特殊状态。（例如a标签没被点击 鼠标移入 被点击。。。就是伪类）

select1:pseudoName{
/*
	查找符合选择器1对应的伪类状态的标签,相当提前设置好对应状态的样式，当对应标签变为对应状态是进行样式修改
*/
}

伪元素选择器

::befor文本前伪元素选择器

在文本前使用content进行额外的文本添加，在页面实际展示时添加文本，但是在页面源码查看时展示的::befor伪元素

select::befor{
	content:"添加字符串";
    /* 添加的字符串不会被浏览器解析*/
}

::after文本后伪元素选择器

在文本后使用content进行额外的文本添加，在页面实际展示时添加文本，但是在页面源码查看时展示的::after伪元素

select::after{
	content:"添加字符串";
    /* 添加的字符串不会被浏览器解析*/
}

::first-line首行伪元素选择器

选择指定块级元素文本的首行进行样式设置

select::first-line{
    /* 样式声明  设置的是满足指定伪元素的样式 */
}

::first-letter首行伪元素选择器

选择指定块级元素文本的首行进行样式设置

select::first-line{
    /* 样式声明  设置的是满足指定伪元素的样式 */
}

::first-letter首行伪元素选择器

选择指定块级元素文本首字符进行样式设置

select::first-lette{
    /* 样式声明  设置的是满足指定伪元素的样式 */
}

::selection文本选择伪元素选择器

选择当客户端用户进行文本选择对应字符进行样式设置

select::selection{
    /* 样式声明  设置的是满足指定伪元素的样式 */
}

::placeholder文本选择伪元素选择器

对占位符样式进行设置的选择器

::-webkit-input-placeholder { /* Edge */
  color: red;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: red;
}
::placeholder {
  color: red;
}
/*有些浏览器可能不识别这个伪元素 所以针对不同浏览器设置不同的伪元素进行占位符的设置 */

伪类选择器与伪元素选择器区别

在css1与css2中实际上对于伪类与伪元素的概念非常模糊（他自己都分不清伪类与伪元素），在css3之后对伪类与伪元素有了初步的划分

伪类选择器：就是一些标签元素的特殊状态选择，通过这些状态可以找到对应的标签元素进行样式设置

伪元素选择器：获取页面中不存在的元素进行样式设置，伪元素选择器选择的是标签中部分属性或文本设置对应的效果

css三大特性

3.1 层叠性

css的层叠性指的是对同一元素设置不同样式时，会在元素上层叠累加

如果设置相同样式，根据优先级进行覆盖，如果优先级相同根据书写顺序

3.2 继承性

指的是在对标签的父标签进行样式设置后子标签会对某些样式进行继承的过程

只有部分属性可以被后代标签继承（font字体属性，text文本属性，color颜色属性）

3.3 优先级

对于样式书写单独的样式没有优先级，优先级而是对选择器进行设置

通常使用权重进行优先级的判断

!important>行内样式>id选择器>类选择器=属性选择器=伪类选择器>标签选择器=伪元素选择器>通配符选择器

常用的计算方式为0 0 0 0 0

!important 1 0 0 0 0

id选择器 0 1 0 0 0

类选择器 0 0 1 0 0

标签选择器 0 0 0 1 0

标签选择器 0 0 0 0 1

当选择为单独选择器计算从前向后进行比较如果出现对应位置没有则优先级高

当使用组合选择器优先级根据选择器拆分相加计算 对应权重位加1

注意：权重进位方式ie在5以后使用255，但是其他主流浏览器进位方式大大的提升大约在65536

所以说无论是256进位还是65536进位实际开发过程中只需要记住id选择器永远大于类选择器权重