css之选择器

常用选择器

元素选择器

• 语法：标签名{}
• 例子：p{}

id选择器

• 语法：#id属性值{}
• 例子：#xxx{}

类选择器

• 语法：.class属性值{}
• 例子：.xxx{}

通配选择器

• 语法：*
• 例子：*{}

复合选择器

交集选择器

• 作用：同时满足多个条件
• 语法：选择器1选择器2选择器3……选择器n{}
• 例子：div.hello{}
• 值得注意：交集选择器如果有元素选择器，必须使用元素选择器开头

并集选择器

• 作用：同时选择多个元素
• 语法：选择器1, 选择器2, 选择器3, ……, 选择器n{}
• 例子：h1, span{}

关系选择器

子元素选择器

• 作用：选中指定父元素的指定子元素
• 语法：父元素 > 子元素
• 例子：div > span {}

后代选择器

• 作用：选中指定元素内的指定后代元素
• 语法：祖先 后代
• 例子：div span{}

兄弟选择器（两种）

• 选择下一个兄弟
  • 语法：前一个 + 下一个
• 选择下边所有的兄弟
  • 语法：兄 ~ 弟

**属性选择器**

• 语法：
  • [属性名] 选择含有指定属性的元素
  • [属性名=属性值] 选择含有指定属性和属性值的元素
  • [属性名^=属性值] 选择属性值以指定值开头的元素
  • [属性名$=属性值] 选择属性值以指定值结尾的元素
  • [属性名*=属性值] 选择属性值中含有某值的元素
• 例子：
  • p[title]{}
  • p[title=abc]{}
  • [title^=abc]{}
  • [title$=abc]{}

**伪类选择器**

• 语法：一般都是使用 : 开头

  • :first-child 第一个子元素

  • :last-child 最后一个子元素

  • :nth-child( ) 选中第n个子元素

    • n 第n个
    • 2n 或 even 表示选中偶数位的元素
    • 2n+1 或 odd 表示选中奇数位

  • 例子：

    ul > li:first-child{
    	color: red;
    }
    
    ul > li:last-child{
    	color: red;
    }
    
    ul > li:nth-child(even){
    	color: red;
    }
    …………
    

  但是:nth-child()是根据所欲元素排序的，为了对指定类型排序操作，所以又有

  • :first-of-type

  • :last-of-type

  • :nth-of-type()

  • 例子

    ul > li:first-of-type{
    	color: red;
    }
    
    /* 这里 :not() 也是一个用法
    ul > li:not(:nth-of-type(3)){
    	color: red;
    }
    

• 伪类拓展补充：

  • :link 用来表示没访问过的链接（正常链接）

    a:link{
    	color: red;
    	font-size: 50px;
    }
    

  • :visited 用来表示访问过的链接（由于隐私的原因，所有visited这个伪类只能修改链接的颜色）

    a:visited{
    	color: red;
    }
    

  • :hover 用来表示鼠标移入的状态

    a:hover{
    	color:red;
    	font-size: 50px;
    }
    

  • :active 用来表示鼠标点击

    a:active{
    	color: red;
    	font-size: 50px;
    }
    

**伪元素选择器**

• 语法：使用 :: 开头

  • ::first-letter 表示第一个字母
  • ::first-line 表示第一行
  • ::selection 表示选中的内容
  • ::before 元素的开始
  • ::after 元素的最后（before 和 after必须结合 content 属性来使用）

• 例子：

  p::first-letter{
  	font-size: 50px;
  }
  
  p::first-line{
  	background-color: red;
  }
  
  p::selection{
  	background-color: red;
  }
  
  p::before{
  	content: 'abc';
  	color: red;
  }
  
  p::after{
  	content: 'haha'
  	color: red;
  }
  

最后，选择器的优先级：

内联样式 > id选择器 > 类和伪类选择器 > 元素选择器 > 通配选择器 > 继承的样式

注意：

1. 交集选择器优先级可相加。
2. 分组选择器优先级不可相加。
3. 样式后加 ! important，则优先级最高，甚至超过内联样式。