html基础学习笔记： css选择器

html选择器

选择器，能够用来选中页面中所有指定的元素。所以选择器是一种单方向的物体，即：选择器-->元素。由于它的单方向性，导致了一个选择要选择多个不同的元素时会比较麻烦。

通配选择器

• 作用：可以用来选中页面中的全部的元素

• 语法：* {}

  *{
                color: red;
            }
  

选择器分组(并集选择器)

• 作用：通过选择器分组可以同时选中多个选择器对应的元素

• 语法：选择器1,选择器2,选择器N{}

  #p1 , .p2 , h1{
                background-color: yellow;
            }
  

复合选择器(交集选择器)

• 作用：可以选中同时满足多个选择器的元素

• 语法：选择器1选择器2选择器N{}

  span.p3{
                background-color: yellow;
            }
  

类选择器

• 作用：通过元素的class属性值选中一组元素

• 语法：.class属性值{}

  .p2{
                color: red;
            }
            
  .hello{
                font-size: 50px;
            }
  

id选择器

• 作用：通过元素的id属性值选中唯一的一个元素

• 语法：#id属性值{}

  #p1{
                font-size: 20px;
            }
  

元素选择器

• 作用：通过元素选择器可以选则页面中的所有指定元素

• 语法：标签名{}

  p{
                color: red;
  }
            
  h1{
                color: red;
  }
  

元素之间的关系

​ 父元素：直接包含子元素的元素
​ 子元素：直接被父元素包含的元素
​ 祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
​ 后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素
​ 兄弟元素：拥有相同父元素的元素叫做兄弟元素

后代元素选择器

• 作用：选中指定元素的指定后代元素

• 语法：祖先元素 后代元素{}

  /*
  * 选中id为d1的div中的p元素中的span元素
  */
  #d1 p span{
                font-size: 50px;
  }
  
  
  

子元素选择器

• 作用：选中指定父元素的指定子元素

• 语法：父元素 > 子元素

  div > span{
    background-color: yellow;
  }
  

• 语法二：:关键词

  /*
  * 为第一个p标签设置一个背景颜色为黄色
  *     :first-child 可以选中第一个子元素
  *     :last-child 可以选中最后一个子元素
  */
  body > p:first-child{
    background-color: yellow;
  }
  
  p:last-child{
    background-color: yellow;
  }
  
  /*
  * :nth-child 可以选中任意位置的子元素
  *         该选择器后边可以指定一个参数，指定要选中第几个子元素
  *         even 表示偶数位置的子元素
  *         odd 表示奇数位置的子元素
  *         
  */
  p:nth-child(odd){
    background-color: yellow;
  }
  
  /*
  * :first-of-type
  * :last-of-type
  * :nth-of-type
  *         和:first-child这些非常的类似，
  *         只不过child，是在所有的子元素中排列
  *         而type，是在当前类型的子元素中排列
  */
  p:first-of-type{
    background-color: yellow;
  }
  p:last-of-type{
    background-color: yellow;
  }
  

伪类选择器

• 作用：专门用来表示元素的一种的特殊的状态

• 语法：:关键词

  /*
  * 为没访问过的链接设置一个颜色为绿色
  *     :link
  *         - 表示普通的链接（没访问过的链接）
  */
  a:link{
    color: yellowgreen;
  }
  
  /*
  * 为访问过的链接设置一个颜色为红色
  *     :visited
  *         - 表示访问过的链接
  * 
  * 浏览器是通过历史记录来判断一个链接是否访问过,
  *     由于涉及到用户的隐私问题，所以使用visited伪类只能设置字体的颜色
  * 
  */
  a:visited{
    color: red;
  }
  
  /*
  * :hover伪类表示鼠标移入的状态
  */
  a:hover{
    color: skyblue;
  }
  
  /*
  * :active表示的是超链接被点击的状态
  */
  a:active{
    color: black;
  }
  
            /*
             * :hover和:active也可以为其他元素设置
             * IE6中，不支持对超链接以外的元素设置:hover和:active
             */
            p:hover{
                background-color: yellow;
            }
            
            p:active{
                background-color: orange;
            }
  
  /*
  * 文本框获取焦点以后，修改背景颜色为黄色
  */
  input:focus{
    background-color: yellow;
  }
  
  /**
  * 为p标签中选中的内容使用样式
  *     可以使用::selection为类
  *     注意：这个伪类在火狐中需要采用另一种方式编写::-moz-selection
  */
  
  /**
  * 兼容火狐的
  */
  p::-moz-selection{
    background-color: orange;
  }
  
  /**
  * 兼容大部分浏览器的
  */
  p::selection{
    background-color: orange;
  }
  

伪元素

• 作用：表示元素中的一些特殊的位置

• 语法：:关键词 (与伪类选择器语法一致，也可以说就是一种伪类选择器)

  /*
  * 为p中第一个字符来设置一个特殊的样式
  */
  
  p:first-letter {
    color: red;
    font-size: 20px;
  }
  /*
  * 为p中的第一行设置一个背景颜色为黄色
  */
  
  p:first-line {
    background-color: yellow;
  }
  
  /*
  * :before表示元素最前边的部分
  *     一般before都需要结合content这个样式一起使用，
  *     通过content可以向before或after的位置添加一些内容
  * 
  * :after表示元素的最后边的部分
  */
  p:before{
    content: "我会出现在整个段落的最前边";
    color: red;
  }
  
  p:after{
    content: "我会出现在整个段落的最后边";
    color: orange;
  }
  

属性选择器

• 作用：根据元素中的属性或属性值来选取指定元素

• 语法：

  ​ [属性名] 选取含有指定属性的元素
  ​ [属性名="属性值"] 选取含有指定属性值的元素
  ​ [属性名^="属性值"] 选取属性值以指定内容开头的元素
  ​ [属性名$="属性值"] 选取属性值以指定内容结尾的元素
  ​ [属性名*="属性值"] 选取属性值以包含指定内容的元素

  /*
  * 为所有具有title属性的p元素，设置一个背景颜色为黄色
  */
  p[title]{
    background-color: yellow;
  }
  
  /*
  * 为title属性值是hello的元素设置一个背景颜色为黄色
  */
  p[title="hello"]{
    background-color: yellow;
  }
  
  /*
  * 为title属性值以ab开头的元素设置一个背景颜色为黄色
  */
  p[title^="ab"]{
    background-color: yellow;
  }
  
  /*
  * 为title属性值以c结尾的元素设置一个背景颜色
  */
  p[title$="c"]{
    background-color: yellow;
  }
  
  /*
  * 为title属性值中包含字母c的元素设置一个背景颜色
  */
  p[title*="c"]{
    background-color: yellow;
  }
  

兄弟元素选择器

• 作用：选中一个元素后紧挨着的指定的兄弟元素

• 语法：前一个 + 后一个

  /*
  * 为span后的一个p元素设置一个背景颜色为黄色
  * 
  */
  
  span + p{
    background-color: yellow;
  }
  
  /*
  * 选中后边的所有兄弟元素
  *     语法：前一个 ~ 后边所有   
  */
  span ~ p{
    background-color: yellow;
  }
  

否定伪类选择器

• 作用：从已选中的元素中剔除出某些元素

• 语法：:not(选择器)

  /*
  * 为所有的p元素设置一个背景颜色为黄色，除了class值为hello的
  * 
  */
  p:not(.hello){
    background-color: yellow;
  }
  
  /*
  * 为所有的p元素设置一个背景颜色为黄色，除了id值为p1的
  * 
  */
  p:not(#p1){
    background-color: yellow;
  }
  

样式的继承

​ 像儿子可以继承父亲的遗产一样，在CSS中，祖先元素上的样式，也会被他的后代元素所继承。利用继承，可以将一些基本的样式设置给祖先元素，这样所有的后代元素将会自动继承这些样式。

​ 但是并不是所有的样式都会被子元素所继承，比如：背景相关的样式都不会被继承 边框相关的样式 定位相关的。

样式的优先级

当使用不同的选择器，选中同一个元素时并且设置相同的样式时，这时样式之间产生了冲突，最终到底采用哪个选择器定义的样式，由选择器的优先级（权重）决定，优先级高的优先显示。

• 优先级的规则

  内联样式 ， 优先级 1000

  id选择器，优先级 100

  类和伪类， 优先级 10

  元素选择器，优先级 1

  通配 ， 优先级 0*

  继承的样式，没有优先级

• 当选择器中包含多种选择器时，需要将多种选择器的优先级相加然后在比较，但是注意，选择器优先级计算不会超过他的最大的数量级，如果选择器的优先级一样，则使用靠后的样式。

• 并集选择器的优先级是单独计算

  div , p , #p1 , .hello{
    
  } 
  /*
  * 每一个选择器的优先级将单独计算
  */
  

• 可以在样式的最后，添加一个!important，则此时该样式将会获得一个最高的优先级，将会优先于所有的样式显示甚至超过内联样式，但是在开发中尽量避免使用!important。

  .p1{
    color: yellow;
    background-color: greenyellow !important;
  }