CSS中常见选择器及其用法

刺骨的言语ヽ痛彻心扉 2024-03-16 16:22 31阅读 0赞

#### 文章目录 ####

*  CSS选择器
 *  前言
 *   *  1. 基础选择器
     *   *  1.1 标签选择器
         *  1.2 类选择器
         *  1.3 id选择器
         *  1.4 通配符选择器
     *  2. 复合选择器
     *   *  2.1 后代选择器
         *  2.2 子选择器
         *  2.3 并集选择器
         *  2.4 伪类选择器

## CSS选择器 ##

## 前言 ##

之前介绍过HTML中常见标签的用法，以下将介绍CSS中不同选择器的使用。CSS是用来实现页面的样式规则，可以起到美化页面的作用。通过标签选择器可以选中对HTML中对应的标签等设置特定的样式，通过类选择器可以设置同一类元素的样式，以下将详细介绍。

### 1. 基础选择器 ###

#### 1.1 标签选择器 ####

特点：能快速为同一类型的标签都选择出来，但是不能差异化选择。

**实例：以下是对所有的p标签，div标签设置css样式，不会差异化。**

#### 1.2 类选择器 ####

特点: 可以差异化表示不同的标签，可以让多个标签的都使用同一个样式。  
注意事项：

*  类名用 . 开头。
 *  下方的标签使用 class 属性来调用。
 *  一个类可以被多个标签使用, 一个标签也能使用多个类(类名用空格分割, 这种做法可以让代码更好复用)。
 *  如果是长的类名, 可以使用 - 分割。
 *  不要使用纯数字, 或者中文, 以及标签名来命名。

**实例：以下就是对class为blue的div标签1设置样式，标签2无关**

#### 1.3 id选择器 ####

id选择器与类选择器类似，它的特点如下：

*  CSS 中使用 \# 开头表示 id 选择器。
 *  id 选择器的值和 html 中某个元素的 id 值相同。
 *  html 的元素 id 不必带 \# 。
 *  **id 是唯一的, 不能被多个标签使用，而类选择器可以被多个标签使用不唯一。**

**实例：通过id选择器为ha对div标签设置样式**

#### 1.4 通配符选择器 ####

**使用 \* 的定义, 表示选取所有的标签，以下表示页面所有内容都是红色。**

*{
     color：red；
    }

### 2. 复合选择器 ###

#### 2.1 后代选择器 ####

后代选择器又叫包含选择器（可以由任何基础选择器组合）， 选择某个父元素中的某个子元素，我们通常使用的列表标签就可以使用后代选择器定义css样式。

注意事项：

> 元素1 元素2\{样式声明\}

*  元素 1 和 元素 2 要使用空格分割
 *  元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素 1

**实例：以下是将li标签设为红色，同时后代标签也可以实现对“孙子” 的设置如以下**

<ul>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
    </ul>
    
    <ol>
    <li>ddd</li>
    <li>eee</li>
    <li>fff</li>
    </ol>
    
    <style>
    ol li {
          
    color: red;
    }
    
    //设置父子孙也有效
    ul li a {
          
    color: yellow;
    }
    //或者直接写孙子
    ul a {
          
    color: yellow;
    }
    </style>

#### 2.2 子选择器 ####

子选择器和后代选择器类似, 但是只能选择子标签。  
注意事项：

> 元素1>元素2\{ 样式声明\}

*  使用大于号分割
 *  只能选“亲儿子”, 不能“选孙子”元素

**实例： 以下就只对连接1起效了，如果是后代选择器就会对两个链接都起效。**

<div class="two">
    <a href="#">链接1</a>
    <p><a href="#">链接2</a></p>
    </div>
    
    <style>
    .two>a {
          
    color: red;
    }
    </style>

#### 2.3 并集选择器 ####

用于选择多组标签  
注意事项：

> 元素1， 元素2\{样式声明\}

*  通过 逗号 分割等多个元素.
 *  表示同时选中元素 1 和 元素 2
 *  任何基础选择器都可以使用并集选择器.
 *  并集选择器建议竖着写. 每个选择器占一行. (最后一个选择器不能加逗号)

**实例：将苹果和香蕉的颜色改成红色,将鸭梨和橙子也改成红色。**

<div>苹果</div>
    <h3>香蕉</h3>
    
    <ul>
    <li>鸭梨</li>
    <li>橙子</li>
    </ul>
    
    <style>
    div, h3{
          
    color:red;
    }
    div,
    h3,
    ul>li {
          
    color:red;
    }
    </style>

#### 2.4 伪类选择器 ####

1.  链接伪类选择器

> a:link 选择未被访问过的链接  
> a:visited 选择已经被访问过的链接  
> a:hover 选择鼠标指针悬停上的链接  
> a:active 选择活动链接(鼠标按下了但是未弹起)

**实例：其中实际开发中hover使用的较多**

<a href="#">小猫</a>
    
    <style>
    a:link {
          
    color: black;
    /* 去掉 a 标签的下划线 */
    text-decoration: none;
    } 
    a:visited {
          
    color: green;
    } 
    a:hover {
          
    color: red;
    } 
    a:active {
          
    color: blue;
    }
    </style>

1.  ：force 伪类选择器  
    **实例：以下被选中的表单的字体就会变成红色**

<div class="three">
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
    </div>
    
    <style>
    .three>input:focus {
          
    color: red;
    }
    </style>