css 选择器

• 优先级

!important>行内样式>ID选择器>类、伪类、属性>元素、伪元素>继承>通配符

• 通配符选择器

*{
    margin:0;
    padding:0;
}

• 元素（标签）选择器

p{
    color:red;
}

• class选择器

.warning{
    color:red;
}

• ID选择器

#warning{
    color:red;
}

• 属性选取器

<ul> 
    <li temp>1</li>
    <li temp="jp">2</li> 
    <li temp="jp efj">3</li> 
    <li temp="jp123">4</li> 
    <li temp="321jp">5</li> 
    <li temp="j">6</li> 
</ul>
    1.[attribute]
       [temp]{ background-color:red; } // 选取拥有'temp'属性的元素,全部都会选中

    2.[attribute=value]
    
       [foo=jp]{ background-color:red; } // 选取拥有'foo'属性同时属性值只等于'jp'元素,选中元素2   
    3.[attribute~=value]
    
       [foo~=jp]{ background-color:red; } // 选取拥有'foo'属性同时属性值包含'jp'元素,选中元素2、3 
    4.[attribute^=value]
    
       [foo^=jp]{ background-color:red; } // 选取拥有'foo'属性同时属性值以'jp'开头的元素,选中元素2、3、4
    5.[attribute$=value]
    
       [foo$=jp]{ background-color:red; } // 选取拥有'foo'属性同时属性值以'jp'结尾的元素,选中元素2、5     
    6.[foo*=abc]
     
       [foo*=jp]{ background-color:red; } // 选取拥有'foo'属性同时属性值中包含'jp'的所有元素,选中元素2、3、4、5       

• 后代选择器

// 选择 ul 元素内部的所有 li 元素。
ul li{ 
    border: 1px solid red; 
    }

• 子选择器

// 选择父元素为'.parent'的所有'p'元素。
.parent>p{ 
    border: 1px solid red; 
    }

• 相邻兄弟选择器

// 选择紧接在'h1'元素之后的一个'p'元素。
h1+p{ 
    color:red;
}

• 一般兄弟选择器

// 选择前面有'h1'元素的每个'p'元素。
h1~p{ 
    color:red;
}

• 伪类选择器

  1. :nth-child(n) 孩子选择器,n第几个孩子，从1开始；

     // 第1个'li'元素
     li :nth-child(1){ 
        color:red; 
     }
     ul li: nth-child(even)  //偶数
     ul li: nth-child(odd)， //奇数
     ul li: nth-child(2n)，  //偶数，也可以说是2的倍数
     ul li: nth-child(2n+1)  //奇数，也可以说是2的倍数+1
     ul li: nth-child(n + 2)  //第2个开始
     ul li: nth-child(-n + 2) //前2个，包含2
     

  2. :nth-of-type(n) 同类型的第n个元素，

     // 'div'下的第2个'p'元素
     div p:nth-of-type(2){ 
        color: red;
     }
     

  3. element:first-child

     // 选择属于父元素的第一个子元素。 等同 :nth-child(1)
     

  4. element:last-child

     // 选择属于父元素的最后一个子元素。
     

  5. :not()

     // 假定有个列表，每个列表项都有一条底边线，但是最后一项不需要底边线。
      li:not(:last-child) {
         border-bottom: 1px solid #ddd;  // 排除最后一个其他都要这个样式
      }
     

  • 鼠标移动到链接上：a:hover
  • 鼠标未选择过：a:link
  • 鼠标点击过链接：a:visited
  • 鼠标正在按下链接：a:active
  • 获得光标的输入表单：input:focus