css选择器

1.选择器

1.1.兄弟选择器

使用方法：

  css2        选择器1+选择器2{     

                 属性:值;

                 }

给指定选择器后面紧跟的那个选择器选中的标签设置属性，只能选中紧跟的，不能选中被隔开的

css3        选择器1~选择器2{

              属性:值;

              }

给指定选择器后面所有选择器选中的所有标签设置属性，后面选中的所有标签，无论有没有被隔开都可以选中。

1.2.序选择器

使用方法：

   :first-child               选中同级别中的第⼀个标签

   :last-child               选中同级别中的最后⼀个标签

   :nth-child(n)           选中同级别中的第n 个标签

   :nth-child(odd)        选中同级别中的所有奇数

   :nth-child(even)      选中同级别中的所有偶数

   :nth-child(xn+y)     x 和 y 是用户自定义的 ,而 n 是⼀个计数器 ,从0 开始递增

1.3.动态伪类选择器

使用方法：

           :link 修改从未被访问过状态下的样式

           :visited 修改被访问过的状态下的样式

           :hover 修改鼠标悬停在 a 标签上状态下的样式

           :active 修改鼠标长按状态下的样式

a标签的伪类选择器可以单独出现也可以一起出现，如果一起出现，有着严格的顺序要求。默认状态：link>visited>hover>active  要遵守爱恨原则

1.4.否定伪类

使用方法：p:not(.hello){

                background-color: yellow;

              }

可以从已经选中的元素中剔除某些元素

1.5.伪元素选择器

使用方法：

::after   表示元素的最后边的部分，⼀般需要结合content这个样式⼀起使用，通过content可以向 after 的位置添加⼀些内容。

::before 表示元素最前边的部分，⼀般需要结合content这个样式⼀起使用，通过content可以向 before 的位置添加⼀些内容

::first-letter  为第⼀个字符来设置⼀个样式

::first-line    为第⼀行设置⼀个样式

1.6.属性选择器

使用方法：

1.6.1.特定属性值

              [attribute=value]{

                  属性: 值；

                 }

      找到有指定属性 , 并且属性的取值等于 value 的标签 , 然后设置属性

1.6.2.属性的取值是以什么开头的

          [attribute|=value] CSS2

         [attribute^=value] CSS3

CSS2 中的只能找到 value 开头 , 并且 value 是被 - 和其它内容隔开的，而CSS3中的只要是以 value 开头的都可以找到 , 无论有没有被 - 隔开。

1.6.3.属性的取值是以什么结尾的

[attribute$=value] CSS3

1.6.4.属性的取值是否包含某个特定的值

         [attribute~=value] CSS2

         [attribute*=value] CSS3

CSS2 中的只能找到独立的单词 , 也就是包含 value, 并且 value 是被空格隔开的，CSS3中的只要包含 value 就可以找到。

1.7.通配符选择器

使用方法：*{

                 属性 : 值 ;

                }

给当前界面上的所有标签设置属性，如果当前界面上的属性较多，那性能就会比较差，所以企业开发一般不用这个选择器。

1.8.组合选择器

多个选择器组合使用。例如 "div.one" 表示 class 为 one 的 div 元素

2.css三大特性

2.1.继承性

给父元素设置一些属性，子元素也可以使用，并不是所有的属性都可以继承, color/font-/text-/line-开头的属性才可以继承，不仅是儿子可以继承，只要是后代都可以继承。

特殊性：a标签的文字颜色和下划线是不能继承的,当做子元素

              h标签的文字大小不能继承的，在做子元素

2.2.层叠性

层叠性就是CSS处理冲突的一种能力，层叠性只有在多个选择器选中"同⼀个标签", 然后⼜设置了"相同的属性", 才会发生层叠性。

2.3.优先级

当多个选择器选中同⼀个标签 , 并且给同⼀个标签设置相同的属性时, 如何层叠就由优先级来确定

2.3.1优先级判断的三种方式

2.3.1.1间接选中

如果是间接选中 , 那么就是谁离目标标签比较近就听谁的

2.3.1.2直接选中（相同选择器）

如果都是直接选中 , 并且都是同类型的选择器 , 那么就是谁写在后面就听谁的

2.3.1.3直接选中（不同选择器）

按照优先级来判断： id> 类 > 标签 > 通配符 > 继承 > 浏览器默认

2.3.2.!important

用于提升某个直接选中标签的选择器中的某个属性的优先级的, 可以将被指定的属性的优先级提升

为最高。

!important 只能提升被指定的属性的优先级 , 其它的属性的优先级不会被提升，!important必须写在属性值的后面，分号前面，!important前⾯的感叹号不能省略，但是⼀般建议不使用"!important",因为它会改变级联的工作方式，使得调试变得困难。

2.3.3.优先级权重

内联样式，如 : style="..." ，权值为 1000 。

ID 选择器，如： #content ，权值为 0100 。

类，伪类、属性选择器，如 .content ，权值为 0010 。

标签选择器、伪元素选择器，如 div p ，权值为 0001 。

通配符、复合选择器（ + 、 > 、 ~ 等）、否定伪类（： not ）没有影响，权值为0000 。

  继承的样式没有权值