1、基本选择器

2、分组选择器

3、通配符选择器

4、类选择器

5、ID选择器

6、属性选择器

7、后代选择器

8、子元素选择器

9、相邻兄弟选择器

10、伪类

11、伪元素

 

1、基本选择器
 
如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身： 
html {color:black;}

h1 {color:blue;}

h2 {color:silver;}
 
2、分组选择器 
 h2, p {color:gray;}

 h2 元素和段落都有灰色
 
3、通配符选择器
  
 * {color:red;}

 使文档中的每个元素都为红色：
 
4、类选择器
 
类选择器允许以一种独立于文档元素的方式来指定样式。
该选择器可以单独使用，也可以与其他元素结合使用。

.important {color:red;}
p.important {color:red;}
只有引用了important类的段落显示为红色文本
.important.warning {silver;}
同时包含important和warning类的元素

5、ID 选择器

 

#intro {font-weight:bold;}
类选择器和 ID 选择器可能是区分大小写的
 
6、属性选择器 
6.1简单属性选择
 [title] {color:red;}
 把包含标题（title）的所有元素变为红色
 a[href] {color:red;}
 对有 href 属性的锚（a 元素）应用样式
 a[href][title] {color:red;}
 同时有 href 和 title 属性的 HTML 超链接的文本设置为红色
6.2根据具体属性值选择
 a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}   将指向 Web 服务器上某个指定文档的超链接变成红色   与简单属性选择器类似，可以把多个属性-值选择器链接在一起来选择一个文档。   a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}
6.3属性与属性值必须完全匹配
 
This paragraph is a very important warning.
    p[class="important warning"]   根据部分属性值选择   p[class~="important"] {color: red;}   class 属性中包含 important 的元素
6.4子串匹配属性选择器


   
   
   
   
     
    
    
    
             
     
     
     
     
             
      
      
      
      
 
             
      
      
      
      
 
         
     
     
     
     
         
     
     
     
     
             
      
      
      
      
       
       
       
       
                 
        
        
        
         
         
 
          
类型
 
          
描述
 
         
 
         
 
          
[abc^="def"]
 
          
选择 abc 属性值以 "def" 开头的所有元素
 
         
 
         
 
          
[abc$="def"]
 
          
选择 abc 属性值以 "def" 结尾的所有元素
 
         
 
         
 
          
[abc*="def"]
 
          
选择 abc 属性值中包含子串 "def" 的所有元素
 
         
 
                     
       
       
       
       
             
 
             
      
      
      
      
 
         
     
     
     
     
     
    
    
    
     
   
   
   
   


7、后代选择器
 h1 em {color:red;}
 只对 h1 元素中的 em 元素应用样式
8、子元素选择器
 h1 > strong {color:red;}
 这个规则会把第一个 h1 下面的 strong 元素变为红色，但是第二个 strong 不受影响：
 
This is very important.
 
This is really very important.
9、相邻兄弟选择器
 h1 + p {margin-top:50px;}
 增加紧接在 h1 元素后出现的段落的上边距
 这个选择器读作：“选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素”。
 li + li {font-weight:bold;}
 上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。
 
10、伪类


   
   
   
   
     
    
    
    
             
     
     
     
     
             
      
      
      
      
属性 
             
      
      
      
      
描述
         
     
     
     
     
         
     
     
     
     
             
      
      
      
      
:active 
             
      
      
      
      
向被激活的元素添加样式。
         
     
     
     
     
         
     
     
     
     
             
      
      
      
      
:focus
             
      
      
      
      
向拥有键盘输入焦点的元素添加样式
         
     
     
     
     
         
     
     
     
     
             
      
      
      
      
:hover
             
      
      
      
      
当鼠标悬浮在元素上方时，向元素添加样式。
         
     
     
     
     
         
     
     
     
     
             
      
      
      
      
:link
             
      
      
      
      
向未被访问的链接添加样式。
         
     
     
     
     
         
     
     
     
     
             
      
      
      
      
:visited
             
      
      
      
      
向已被访问的链接添加样式。 
         
     
     
     
     
         
     
     
     
     
             
      
      
      
      
:first-child
             
      
      
      
      
向元素的第一个子元素添加样式。
         
     
     
     
     
         
     
     
     
     
             
      
      
      
      
:lang
             
      
      
      
      
向带有指定 lang 属性的元素添加样式。
         
     
     
     
     
     
    
    
    
     
   
   
   
   


 
11、伪元素


   
   
   
   
     
    
    
    
             
     
     
     
     
             
      
      
      
      
属性
             
      
      
      
      
描述
         
     
     
     
     
         
     
     
     
     
             
      
      
      
      
:first-letter
             
      
      
      
      
向文本的第一个字母添加特殊样式。
         
     
     
     
     
         
     
     
     
     
             
      
      
      
      
:first-line
             
      
      
      
      
向文本的首行添加特殊样式
         
     
     
     
     
         
     
     
     
     
             
      
      
      
      
:before
             
      
      
      
      
在元素之前添加内容。
         
     
     
     
     
         
     
     
     
     
             
      
      
      
      
:after
             
      
      
      
      
在元素之后添加内容。
         
     
     
     
     
     
    
    
    
     
   
   
   
   


容CSS选择器，所以学会CSS选择器以后可以然后入手jquery选择器基本上没有什么门槛