初识css选择器（基本选择器/复合选择器）第一章

本文链接：https://blog.youkuaiyun.com/qq_36260963/article/details/145846239

一、css基本选择器

通配选择器
元素选择器
类选择器
id 选择器

全局属性

1.1 通配选择器

作用：可以选中所有的html元素

语法

* {
    color: orange;
    font-size: 40px;
}

效果：

所有的元素颜色都变为橙色，字体大小变为40px

代码示例：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>通配选择器</title>
 <style>
    * {
      color: powderblue;
    }
 </style>
</head>
<body>
   <h2>今天天气很好</h2>
   <h3>今天是星期一</h3>
   <h3>明天是不是天气也很好</h3>
</body>
</html>

使用场景：全局默认样式清除，清除浮动。列如清除 h1~h6的默认样式，p标签。。。。一些标签的默认样式；

1.2 元素选择器

作用：为页面中 某种元素 统一设置样式

语法：

h1 {
  color: green;
  font-size: 40px;
}

效果：为所有指定的标签元素都加上相应的属性效果；

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>元素选择器</title>
  <style>
      p {
        color: red;
        font-size: 30px;
      }
  </style>
</head>
<body>
     <h2>有钱的人</h2>
     <p>张三</p>
     <p>李四</p>
     <p>王五</p>
     <p>赵六</p>
</body>
</html>

使用有一定的局限性，无法实现 差异化设置 ，所有的效果都一样

1.3 类选择器（class)

作用：根据元素的 class值，来选中某些元素
语法
```
.类名 {
   属性名: 属性值;
}
```
效果：为所有标签上加了class属性的元素都标记相应的样式

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>类选择器</title>
  <style>
      .person {
        color: red;
        font-size: 30px;
      }
  </style>
</head>
<body>
     <p class="person">张三</p>
     <p class="person">李四</p>
     <p class="person">王五</p>
     <p class="person">赵六</p>
</body>
</html>

注意点：

1. 元素的 class 属性值不带 . ，但 CSS 的类选择器要带 . 。
2. class 值，是我们自定义的，按照标准：不要使用纯数字、不要使用中文、尽量使用
英文与数字的组合，若由多个单词组成，使用 - 做连接，例如： left-menu ，且命名
要有意义，做到 “见名知意”。
3. 一个元素不能写多个 class 属性，下面是 错误示例：
<!-- 该写法错误，元素的属性不能重复，后写的会失效 -->
<h1 class="speak" class="big">你好啊</h1>
4. 一个元素的 class 属性，能写多个值，要用空格隔开，例如：
<!-- 该写法正确，class属性，能写多个值 -->
<h1 class="speak big">你好啊</h1>

1.4 id选择器

作用：根据元素的 id 属性，来精准的选中某个元素

语法

#id值 {
  属性名: 属性值;
}

/* 选中id值为earthy的那个元素 */
#earthy {
  color: red;
  font-size: 60px;
}

注意
- id 属性值：尽量由字母、数字、下划线( _ )、短杠( - )组成，最好以字母开头、不要包含空
  格、区分大小写。
- 一个元素只能拥有一个 id 属性，多个元素的 id 属性值不能相同。-
- 一个元素可以同时拥有 id 和 class 属性。

1.5 选择器总结

基本选择器	特点	用法
通配选择器	选中所有标签，一般用于清除样式	* {color:red}
元素选择器	选中所有同种标签，但是不能差异化选择	h1 {color:red}
类选择器	选中所有特定类名（ class 值）的元素 —— 使用频率很高。	.say {color:red}
ID 选择器	选中特定 id 值的那个元素（唯一的）。	#earthy {color:red}

二、css 复合选择器

复合选择器建立在基本选择器之上，由多个基础选择器，通过不同的方式组合而成。
复合选择器可以在复杂结构中，快速而准确的选中元素。

2.1 交集选择器

作用：选中同时符合多个条件的元素。

交集有并且的含义（通俗理解：即…又… 的意思），例如：年轻且长得帅。
语法：选择器1选择器2选择器n {} 他们紧紧挨在一起

实列

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>交集选择器</title>
  <style>
      .rich {
         color: gold;
      }
      .beauty {
         color: pink;
      }

      /* 并集选择器    标签+class 挨在一起  */
      p.beauty {
         color: green;
      }

  </style>
</head>
<body>
    <h2 class="rich">土豪张三</h2>
    <h2 class="beauty">明星李四</h2>
    <br>
    <p class="beauty">小狗旺财</p>
    <p class="beauty">小猪佩奇</p>
</body>
</html>

注意点：
1. 有标签名，标签名必须写在前面。
2. id 选择器、通配选择器，理论上可以作为交集的条件，但实际应用中几乎不用 —— 因为没
  有意义。
3. 交集选择器中不可能出现两个元素选择器，因为一个元素，不可能即是 p 元素又是 span 元
  素。
4. 用的最多的交集选择器是：元素选择器配合类名选择器，例如： p.beauty 。

2.2 并集选择器

作用：选中多个选择器对应的元素，又称：分组选择器。

所谓并集就是或者的含义（通俗理解：要么…要么… 的意思），例如：给我转10万块钱
或者我报警。

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

多个选择器通过 **, ** 连接，此处 , 的含义就是：或。

实列

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>并集选择器</title>
  <style>
      .rich {
         color: gold;
      }
      .beauty {
         color: pink;
      }
      .dog {
        color: blue;
      }
      .pig {
        color: skyblue
      }

      /* 都拥有相同的样式  以 逗号, 分割 */
      .rich
      ,.beauty
      ,.dog
      ,.pig {
         font-size: 50px;
         background-color: aliceblue;
         width: 200px;
      }
     
  </style>
</head>
<body>
    <h2 class="rich">土豪张三</h2>
    <h2 class="beauty">明星李四</h2>
    <h2>破产王老五，不加任何样式</h2>
    <br>
    <p class="dog">小狗旺财</p>
    <p class="pig">小猪佩奇</p>
</body>
</html>

注意点：
1. 并集选择器，我们一般竖着写。
2. 任何形式的选择器，都可以作为并集选择器的一部分。
3. 并集选择器，通常用于集体声明，可以缩小样式表体积。

2.3 后代选择器

后代包含子，孙子，重孙子

作用：选中指定元素中，符合要求的后代元素。
语法：选择器1 选择器2 选择器3 … 选择器n {} （先写祖先，再写后代）

选择器之间，用空格隔开，空格可以理解为：" xxx 中的"，其实就是后代的意思。
选择器 1234…n ，可以是我们之前学的任何一种选择器。

示列

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>后代选择器</title>
  <style>
      ol li {
         color: green;
      }
      /* 后代选择器可以写很多后代  */
      ol li a {
         color: aqua;
      }

      ul li {
         color: red;
      }

      ul li a {
         color: yellow;
      }

      /* class为subject下的li元素并且有front-end的class */
      .subject li.front-end {
         color: skyblue;
      }
      
      .subject div.front-end {
         color: red;
      }

  </style>
</head>
<body>
   <ol>
      <li>抽烟</li>
      <li>喝酒</li>
      <li>烫头</li>
      <li>
         <a href="#">打豆豆</a>
      </li>
   </ol>
   <hr>
   <ul>
      <li>张三</li>
      <li>李四</li>
      <li>王五</li>
      <li>
         <a href="#">赵六</a>
      </li>
   </ul>
   <hr>
   <ol class="subject">
      <li class="front-end">java</li>
      <div class="front-end">前端介绍，学好前端走天下！！！</div>
      <li>前端</li>
      <li>鸿蒙</li>
   </ol>
</body>
</html>

注意
1. 后代选择器，最终选择的是后代，不选中祖先。
2. 儿子、孙子、重孙子，都算是后代。
3. 结构一定要符合之前讲的 HTML 嵌套要求，例如：不能 p 中写 h1 ~ h6 。

2.4 子代选择器

作用：选中指定元素中，符合要求的子元素

子代选择器又称：子元素选择器、子选择器,直属一代，爸爸 -》儿子这种
语法：选择器1 > 选择器2 > 选择器3 > … 选择器n {}

选择器之间用 > 隔开， > 可以理解为：" xxx 的子代"，其实就是儿子的意思。
选择器 1234…n ，可以是我们之前学的任何一种选择器。

示列

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>子代选择器</title>
  <style>
      /* 子只指儿子   不包含孙子 */
      div>a {
         color: red;
      }
      /* 实际上是a元素  */
      div>p>a {
         color: green;
      }
      .foot>a {
        color: chocolate;
      }
  </style>
</head>
<body>
    <div>
        <a href="#">张三</a>
        <a href="#">李四</a>
        <a href="#">王五</a>
        <p>
           <a href="#">赵六</a>
           <div class="foot">
               <a href="#">孙七</a>
           </div>
        </p>
    </div>
</body>
</html>

注意：
1. 子代选择器，最终选择的是子代，不是父级。
2. 子、孙子、重孙子、重重孙子 … 统称后代！，子就是指儿子。

2.6 兄弟选择器

相邻兄弟选择器：

作用：选中指定元素后，符合条件的相邻兄弟元素

所谓相邻，就是紧挨着他的下一个，简记：睡在我下铺的兄弟。
语法：选择器1+选择器2 {}

示列：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>兄弟选择器</title>
  <style>
      /* 跟div 紧紧相邻的元素  相邻选择器*/
      div+p {
        color: red;
      }
      
      p+p {
        color: green;
      }

      /* 通用选择器   h2所有的兄弟都变颜色*/
      h2~p {
        color: green;
      }

      li+li {
        color: gold;
      }

  </style>
</head>
<body>
    <div>尚硅谷</div>
    <p>前端</p>
    <p>java</p>
    <p>UI</p>


    <hr>
    <h2>职业</h2>
    <p>teacher</p>
    <p>worker</p>
    <p>salewomen</p>

    <ul>
        <li>我的</li>
        <li>秒杀</li>
        <li>主页</li>
    </ul>
</body>
</html>

通用兄弟选择器
- 语法：选择器1~选择器2 {} 。
- 示列
  
  /* 选中div后的所有的兄弟p元素 */
  div~p {
  color:red;
  }
注意：两种兄弟选择器，选择的是下面的兄弟。

2.7 属性选择器

作用：选中属性值符合一定要求的元素
语法：
1. [属性名] 选中具有某个属性的元素。
2. [属性名=“值”] 选中包含某个属性，且属性值等于指定值的元素。
3. [属性名^=“值”] 选中包含某个属性，且属性值以指定的值开头的元素。
4. [属性名$=“值”] 选中包含某个属性，且属性值以指定的值结尾的元素。
5. [属性名*=“值”] 选择包含某个属性，属性值包含指定值的元素。

示列

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>属性选择器</title>
  <style>
     /* 写法一： 找到元素具有title属性 被选中*/
      /* [title] {
          color: red;
      } */
      /* 写法二：选中具有属性 title并且属性值为atguigu2的元素 */
      /* [title="atguigu2"] {
         color: red;
      } */

      /* 写法三 选中具有属性 title 并且属性值值以字母a 开头的元素 */
      /* [title^="a"] {
        color: red;
      } */

      /* 写法四：选中具有title属性，且属性值以字母 u结尾的元素  */
      /* [title$="u"] {
         color: red;
      } */

      /* 写法5 ：  选中具有title属性，且属性值包含字母 g 的元素*/
      [title*="g"] {
          color: red;
      }
  </style>
</head>
<body>
    <div title="atguigu1">尚硅谷1</div>
    <div title="atguigu2">尚硅谷2</div>
    <div title="guigu">尚硅谷3</div>
    <div title="guigu">尚硅谷4</div>
    <div title="guigu">尚硅谷5</div>
</body>
</html>