css选择器

• 简单选择器

  • 元素选择器
    根据标签名来选中指定元素
    语法：标签名｛｝
    例：p{}，h1{}，div{}
  • id选择器
    通过元素的id属性来确定指定元素
    id是唯一的，区别大小写
    语法：#id属性值 {}
    例：#left{}、#top{}
  • class选择器
    通过元素的class属性来确定指定元素
    class属性值可以重复，可以通过class属性值来为元素分组设置样式。
    一个元素可以指定多个class属性值 ，值与值之间用空格隔开
    语法：.属性值｛｝
    例：.left{}、.top{}
  • 通配选择器
    选择页面中的所有元素
    语法：*{}

• 复合选择器

  • 交集选择器
    选中同时选择符合多个条件的元素
    语法：选择器1选择器2选择器3
    注意：如果其中有元素选择器，元素选择器必须放在第一个
    例：

    div.left{
    			color:red;
    		}
    .top.left.right{
    			color:red;
    		}
    

  • 并集选择器
    同时选择多个选择器对应的元素
    语法：选择器1,选择器2,选择器3
    例：

    div, h1{
    			color:red;
    		}
    

• 关系选择器

  • 子元素选择器
    选择指定父元素的指定子元素
    语法：父元素 > 子元素
    例：div > span {}
  • 后代元素选择器
    待批指定父元素中的所有指定子元素
    语法：父元素 子元素
    例：div span {}
  • 兄弟元素选择器
    例：p + span{} 选中p元素后的span元素
    例：p ~ span{} 选中p元素后的所有span元素

• 属性选择器
  元素名[属性名]：选择含有指定属性的元素
  元素名[属性名=属性值]：选择含有指定属性和属性值的元素
  元素名[属性名^=属性值]：选择含有指定属性和以指定值开头的元素
  元素名[属性名$=属性值]：选择含有指定属性和以指定值结尾的元素
  元素名[属性名*=属性值]：选择含有指定属性并含有指定值的元素

  p[title]{
  	color: chocolate;
  }
  
  p[title="no1"]{
      font-size: 20px;
  }
  
  p[title^="no"]{
      font-style: italic;
  }
  
  p[title$="no"]{
      font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
  }
  
  p[title*="no"]{
      text-align: center;
  }
  

• 伪类选择器
  不存在的类选择器，它用来描述一个元素的特殊状态

  • first-child 第一个子元素
  • last-child 最后一个子元素
  • nth-child(n)  选中第N个子元素
    • 2n 或 even 选中偶数位子元素
    • 2n+1 或 odd 选中奇数位子元素

  <style>
  	ul>li:first-child{  /* 而且必须是li元素,样式才会使用    */
  				color: red;
  	}
  	ul>li:last-child{
  				color:green;
  	}
  	ul>li:nth-child(2n+1){
  				color: rosybrown;
  	}
  </style>
  

  以上都是根据父元素中所有的子元素进行排序

  • first-of-type 第一个子元素
  • last-of-type 最后一个子元素
  • nth-of-type(n) 第n个子元素
    • 2n 或 even 选中偶数位子元素
    • 2n+1 或 odd 选中奇数位子元素

    <style>
    	ul>li:first-of-type{
    				color: red;
    	}
    	ul>li:last-of-type{
    				color:green;
    	}
    	ul>li:nth-of-type(2n+1){
    				color: rosybrown;
    	}
    	ul>li:not(:nth-child(3)){
    				color:red;
    	}
    </style>
    

  以上都是根据同类型的子元素之间进行排序

  • not() 除了这个元素都选中

    <style>
    	ul>li:not(:nth-child(3)){
    				color:red;
    	}
    </style>