本文共 2474 字，大约阅读时间需要 8 分钟。

JavaWeb学习——CSS的选择器学习

1.CSS基础选择器

我们利用基础选择器，为下面的元素设置样式：

我是一只快乐的小青蛙
    
红尘来去一场梦
    
你好世界！

①标签选择器

标签选择器是将HTML标签作为选择器名的一种选择器

h1{           color: red;       }

效果显示：

h1,h2,p{           color: yellow;       }

效果展示：

②id选择器

id选择器是给标签添加id属性，然后通过id选择器给标签设置样式

#a{            color: red;        }

效果展示：

③类选择器

类选择器是给多个标签元素设置同一个class属性，让它们成为一类。然后用过类选择器给其添加样式：

.class1{            border: 1px black solid;        }

效果展示：

2.CSS高级选择器

①层次选择器

层次选择器中又有四种选择器：

• (1)后代选择器（包含选择器）

  选择ul标签下的所有p标签（只要是在ul标签下的p标签都会被选择）：

       
      
        
  Java
      
        
  PHP
      
        
  Python
      
        
  C#
      
        
  C++
       

  ul p{            color: red;        }

  效果展示：

  

• (2)子选择器

  选择ul标签下的第一层的p标签（只能选择到ul标签的儿子，不能深入到下一层）：

       
      
        
  你好啊子选择器
      
        
  Java
      
        
  PHP
      
        
  Python
      
        
  C#
      
        
  C++
       

  效果展示：

  
  注意区分后代选择器和子选择器！！！！

• (3)相邻兄弟选择器

  选择span标签相邻的下一个h1标签：

  相邻兄弟选择器
      span标签    
  相邻兄弟选择器
      
  相邻兄弟选择器

  #a+h1{            color: red;        }

  效果展示：

  
  如果span相邻的下一个标签不是h1标签，那么相邻兄弟选择器就会失效：

  相邻兄弟选择器
      span标签    
  你好
      
  相邻兄弟选择器
      
  相邻兄弟选择器

  #a+h1{            color: red;        }

  效果展示：

  

• (4)通用兄弟选择器

  选择span标签后面的所有是h1的兄弟标签：

通用兄弟选择器
    span标签    
你好
    
通用兄弟选择器
    
通用兄弟选择器

#a~h1{            color: red;        }

效果展示：

②结构伪类选择器

使用结构为类选择器给下面标签设置样式

   
    
    
1
    
    
2
    
    
3
    
    
4
    
    
5
   

• (1)E:first-child

  作为父元素的第一个子元素的元素E

  选择 ul 下的所有 li 标签的第一个子节点：

  ul li:first-child{	            background: red;	        }

  效果展示：

  

• (2)E:last-child

  作为父元素的最后一个子元素的元素E

  选择 ul 下的所有 li 标签的最后一个子节点：

  ul li:last-child{            background: red;        }

  效果展示：

  

• (3)E F:nth-child(n)

  选择父级元素E的第n个子元素F，（n可以是1、2、3），关 键字为even（偶数位置）、odd（奇数位置）

  选择 ul 下的所有 li 标签的偶数位置节点：

  ul li:nth-child(even){            background: red;        }

  效果展示：

  

• (4)E:first-of-type

  选择父元素内具有指定类型的第一个E元素

  ul li:first-of-type{            background: red;        }

  效果展示：

  

• (5)E:last-of-type

  选择父元素内具有指定类型的最后一个E元素

  ul li:last-of-type{            background: red;        }

  效果展示：

  

• (6)E F:nth-of-type(n)

  选择父元素内具有指定类型的第n个F元素

ul li:nth-of-type(4){            background: red;        }

效果展示：

③属性选择器（常用）

• (1)选择p标签中id为a的标签

  中国
      
  美国
      
  日本
      
  韩国
      
  朝鲜

  p[id=a]{            color: red;        }

  效果展示：

  

• (2)选择p标签中class为class1的标签

  中国
      
  美国
      
  日本
      
  韩国
      
  朝鲜

  ```         p[class*=class1]{             color: red;         } ```

  效果展示：

  

• (3)选择a标签中href属性以http开头的标签

  百度一下        搜狗搜索        网易        西开

  a[href^=http]{            color: red;        }

  效果展示：

  

• (4))选择a标签中href属性以cn结尾的标签

  a[href$=cn]{            color: red;        }

  效果展示：

  

转载地址：http://saiwi.baihongyu.com/