CSS笔记 - CSS选择器

CSS选择器

目录

• CSS选择器
  • 1. 常用选择器
    • 1.1 元素选择器
    • 1.2 id选择器
    • 1.3 class类型选择器
    • 1.4 通配选择器
  • 2. 复合选择器
    • 2.1 交集选择器
    • 2.2 并集选择器
  • 3. 关系选择器
    • 3.1 子元素选择器
    • 3.2 后代元素选择器
    • 3.3 兄弟元素选择器
  • 4. 属性选择器
  • 5. 伪类选择器
    • 5.1 常见伪类
    • 5.2 超链接伪类
  • 6. 伪元素选择器

1. 常用选择器

1.1 元素选择器

• 根据标签名来选中指定的元素

  语法：标签名{}

  div{
  	border: 1px solid red;
  }
  
  span{
  	border: 2px solid yellow;
  }
  

1.2 id选择器

• 根据元素的id属性值选中一个元素

  语法：#id属性值{}

  #id001{
  	border: 1px solid red;
  }
  
  #id002{
  	border: 2px solid yellow;
  }
  

1.3 class类型选择器

• 根据元素的class属性值选中一组元素

  语法：.class属性值

  .class001{
  	border: 1px solid red;
  }
  
  .class002{
  	border: 2px solid yellow;
  }
  

1.4 通配选择器

• 选中页面中的所有元素

  语法：*{}

2. 复合选择器

2.1 交集选择器

• 同时选中符合多个条件的元素

  语法：选择器1选择器2选择器n{}

  （交集选择器中如果有元素选择器，必须使用元素选择器开头）

  /*div元素中有red的class类型的元素*/
  div.red{
  	font-size: 30px;
  }
          
  /*同时具有a,b,c的class类型的元素*/
  .a.b.c{
  	color: blue;
  }
  

2.2 并集选择器

• 同时选中多个选择器对应的元素

  语法：选择器1,选择器2,选择器n{}

  （交集选择器中如果有元素选择器，必须使用元素选择器开头）

  /*选中h1元素和span元素*/
  h1,span{
  	font-size: 30px;
  }
  

3. 关系选择器

• 元素关系

  • 父元素：直接包含子元素的元素叫做父元素

  • 子元素：直接被父元素包含的元素是子元素

  • 祖先元素：直接或间接包含后代元素的元素叫做祖先元素

    ​ 祖先元素不一定是父元素，父元素一定是祖先元素

  • 后代元素：直接或间接被祖先元素包含的元素叫做后代元素

    ​ 子元素一定是后代元素，后代元素不一定是子元素

  • 兄弟元素：拥有相同父元素的元素是兄弟元素

3.1 子元素选择器

• 选中指定父类元素的指定子元素

  语法：父元素 > 子元素

  div.box > span{
  	color: orange;
  }
  
  div > p > soan{
  	color: red;
  }
  

3.2 后代元素选择器

• 选中指定元素内的指定后代元素

  语法：祖先 后代

  div span{
  	color: red;
  }
  

3.3 兄弟元素选择器

• 选择下一个兄弟

  语法：前一个 + 下一个

• 选择下面所有兄弟

  语法：兄 ~ 弟

p + span{
	color: red;
}

p ~ span{
	color: red;
}

4. 属性选择器

• 根据属性名和属性值选中指定元素

  语法：

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

  p[title]{
  	color: red;
  }
  
  p[title=abc]{
  	color: red;
  }
  
  p[title^=abc]{
  	color: red;
  }
  
  p[title$=abc]{
  	color: red;
  }
  

5. 伪类选择器

5.1 常见伪类

• 伪类用来描述一个元素的特殊状态，如：第一个子元素、被点击的元素等

  语法：:要选中的伪类

  常见的伪类：

  • :first-child 第一个子元素

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

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

    • n 选中第n个元素
    • 2n 选中偶数位的元素
    • 2n+1 选中奇数位的元素

    以上这些伪类都是根据所有的子元素进行排序

  • :first-of-type、:last-of-type、:nth-of-type()

    这几个伪类的功能和上述的类似，但他们是在同类型元素中进行排序

  • not() 否定伪类，将符合条件的元素从选择器中去除

  ul > li:first-child{
  	color: red;
  }
  ul > li:nth-child(2n+1){
  	color: red;
  }
  ul > li:first-of-type{
  	color: red;
  }
  ul > li:not(:nth-child(3)){
  	color: red;
  }
  

5.2 超链接伪类

• :link 用来表示没访问过的链接

• :visited 用来表示访问过的链接

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

• :active 用来表示鼠标点击

  a:link{
  	color: red;
  }
  a:visited{
  	color: red;
  }
  a:hover{
  	color: red;
  }
  a:active{
  	color: red;
  }
  

6. 伪元素选择器

• 伪元素，表示页面中一些特殊的，并不真实存在的元素

• 语法：元素::伪元素

  常见的伪元素：

  • ::first-letter：表示第一个字母

  • ::first-line：表示第一行

  • ::selection：表示选中的内容

  • ::before：元素的开始

    ::after：元素的末尾

    before和after必须结合content属性使用

  p::first-letter{
  	color: red;
  }
  
  p::first-line{
  	color: red;
  }
  
  p::selection{
  	color: red;
  }
  
  div::before{
  	content: 'hi';
  	color: red;
  }
  
  div::after{
  	content: 'haha';
  	color: blue;
  }