CSS选择器

目录

1.选择器的定义

2.选择器的种类

（1）通用选择器

（2）元素类型选择器

 (3)含有“类”的选择器

（4）ID选择器

（5）伪类和伪元素

（6）后代选择器

（7）子代关系选择器

（8）邻接选择器

（9）通用选择器

---

在CSS中，选择器可以指定我们想要样式化的HTML元素，下面我们将会详细介绍各种选择器。

1.选择器的定义

在上一篇文章我们已经提到过选择器，他是CSS规则的第一部分，用来指明要对哪类元素进行样式化。

2.选择器的种类

（1）通用选择器

通用选择器的开头是一个“*”，它里面的属性将会改变所有的HTML元素。

（2）元素类型选择器

元素类型选择器的开头是你想要样式化的HTML元素，它里面的属性会改变所有你指定的元素。

 (3)含有“类”的选择器

含“类”的选择器的开头是“.”加“类名” ，当我们在元素的开始标签添加类之后，我们便可以用CSS规则给他样式化。

    
Hello

（4）ID选择器

ID选择器的用法和类选择器很类似，它则是在开头添加“#”加上ID名来进行样式化。

    
Hello

那么类选择器和ID选择器的区别是什么呢？

	类选择器	ID选择器
唯一性	一个类名可以被多个元素共用	一个元素只能有一个ID
使用目的	为HTML元素添加样式	用于HTML文档的头部，主体部分
CSS优先级	优先级低	优先级高

（5）伪类和伪元素

①伪类：它会选择处于待定状态的元素，例如当你的鼠标指针悬浮在待定元素上面，它会表现的像你在HTML文档中应用了一个类来对他的属性进行改变，伪类减少了类的使用，使得你的代码更易于维护。

伪类是以冒号开头。

②伪元素：它不会创建一个新的元素，它会在现有元素的基础上对他进行样式化。

伪元素会以双冒号开头

比如，我们想要让所有的

元素后面都添加一个句号

    
    
    
    


    
Hello
    
My name is Sue
    
Good morning

这样我们点开浏览器后每个

元素后面都加上了句号：

常见的伪元素有：

伪元素	用途
::before	在元素前面插入内容
::after	在元素后面插入内容
::first-line	向文本的第一行添加特殊样式
::first-letter	向文本的首字母添加特殊样式

（6）后代选择器

后代选择器我们会用空格来连接两个选择器，例如：

    
Hello!Nice to meet you !
    hahaha

上面的例子我们用空格把

和两个选择器组合在一起，意思就是选中所有的在

元素里面的元素，对其进行样式化（而下方的另一个就不会被样式化）

（7）子代关系选择器

在子代关系选择器中，我们用大于号去连接两个选择器，这个选择器会选择离父元素继承关系最近的子元素。

    

        
我是1
        
我是2
        
我是3
        

            
我是4
            
我是5
        
    

在上面的例子中，我们让离

继承关系最近的
• 元素进行样式化，而继承关系更远的4和5则无法被样式化

  （8）邻接选择器

  邻接选择器我们通常用”+“连接两个选择器，他会选择紧随元素1后面的元素2

  
      
  我是标题
      
  我是1
      
  我是2
      
  我是3
  

  上面的例子则是选择离

  最近的

  元素，对其进行样式化。

  （9）通用选择器

  有的元素可能被其他元素隔断，但如果我们也想要对他进行样式化，我们可以使用通用选择器。

  通用选择器会用”~“来连接两个选择器。

  
      
  我是标题
      
  我是1
      one
      
  我是2
      two
      
  我是3
  

  这样

  后的同级

  元素就会被样式化

  以上就是CSS选择器的一些基本内容:)