分类

基础选择器

  • 标签(元素)选择器
  • 类选择器
  • id选择器
  • 通用选择器

高级选择器

  • 后代
  • 子代
  • 组合
  • 交集
  • 伪类


基础选择器

标签选择器

顾名思义就是通过标签名来选择元素：
示例：

  1. p {
  2.   color: red;
  3. }

将所有的p标签设置字体颜色为红色。

ID选择器

ID属性的作用：标识唯一的标签
通过元素的ID值选择元素：

  1. #i1 {
  2.   color: red;
  3. }

将id值为i1的元素字体颜色设置为红色。

类选择器

类属性的作用：标识标签
通过样式类选择元素：
示例：

  1. .c1 {
  2.   color: red;
  3. }

将所有样式类含.c1的元素设置字体颜色为红色。

通用选择器

使用*选择所有元素：

  1. * {
  2.       margin: 0;
  3. }

Demo

Demo1

id属性只能指定一个id选择器

  1. /* index.css */
  2. p{
  3.     color: orange;
  4.     font-size: 14px;
  5.     font-weight: bold;
  6. }
  7. #peiqi{
  8.     color: green;
  9. }
  10. #jj{
  11.     color: red;
  12. }
  13. .active{
  14.     color: gray;
  15. }
  16. .title{
  17.     font-size: 30px;
  18. }
  19. p{
  20.     color: orange;
  21.     font-size: 14px;
  22.     font-weight: bold;
  23. }
  24. #peiqi{
  25.     color: green;
  26. }
  27. #jj{
  28.     color: red;
  29. }
  30. .active{
  31.     color: gray;
  32. }
  33. .title{
  34.     font-size: 30px;
  35. }
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>css的基础选择器</title>
  5.     <link rel="stylesheet" type="text/css" href="css/index.css">
  6. </head>
  7. <body>
  8.     <!-- class -->
  9.     <div id="container">
  10.         <h3 class="active title">抖音</h3>
  11.         <p>
  12.             年后，一股抖音风火爆了社媒，抖音上的博主带火了小猪佩奇。他们的标志是"<br>
  13.             <span class="active">手带小猪佩奇手表，身披小猪佩奇纹身</span>"，于是就诞生了"<span id="peiqi">小猪佩奇身上纹，掌声送给社会人</span>"。
  14.         </p>
  15.         <p>
  16.             估计<span id="jj">林俊杰</span>本人都没想过，《醉赤壁》一句最不起眼的台词竟然成了众多网友口中的一个梗，最优秀的要属毛爷爷的表情包和这个梗的完美结合。
  17.         </p>
  18.     </div>
  20. </body>
  21. </html>

image.png

Demo2

类选择器的使用场景
class属性可指定多个类选择器

  1. /* common_class.css  */
  2. .lv{
  3.     color: green;
  4. }
  5. .big{
  6.     font-size: 20px;
  7. }
  8. .bold{
  9.     font-weight: bold;
  10. }
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title></title>
  5.     <link rel="stylesheet" type="text/css" href="common_class.css">
  6. </head>
  7. <body>
  8.     <!-- 绿色  20px -->
  9.     <p  class="lv big">MJJ</p>
  10.     <!-- 绿色 粗 -->
  11.     <p  class="lv bold">MJJ</p>
  12.     <!-- 粗 20px -->
  13.     <p  class="big bold">MJJ</p>
  14. </body>
  15. </html>

高级选择器

后代选择器

因为HTML元素可以嵌套，所以我们可以从某个元素的后代查找特定元素，并设置样式：

  1. div p {
  2.   color: red;
  3. }

从div的所有后代中找p标签，设置字体颜色为红色。

子代选择器

  1. div>p {
  2.   color: red;
  3. }

从div的直接子元素中找到p标签，设置字体颜色为红色。

组合选择器

  1. h3,span{
  2.     color: gray;
  3.     font-size: 14px;
  4. }

逗号分隔

交集选择器

使用较少，用于将两个选择器的共有属性抽离出来，减少重复代码

  1. h2{
  2.     color: red;
  3.   font-size: 14px;
  4. }
  5. .active{
  6.   font-size: 14px;
  7.     font-weight: lighter;
  8. }
  1. h2{
  2.     color: red;
  3. }
  4. .active{
  5.     font-weight: lighter;
  6. }
  7. h2.active{
  8.     font-size: 14px;
  9. }

伪类选择器

常用的几种伪类选择器。

  1. /*没有被访问过a的状态*/
  2. a:link{
  3.     color: orange;
  4. }
  5. /*访问过后的a的状态*/
  6. a:visited{
  7.     color: green;
  8. }
  9. /*鼠标悬浮时a的状态*/
  10. a:hover{
  11.     color: black;
  12. }
  13. /*鼠标摁住时a的状态*/
  14. a:active{
  15.     color:  purple;
  16. }
  17. span{
  18.     color: gray;
  19. }
  20. span:hover{
  21.     color: red;
  22. }
  23. div:hover{
  24.     background-color: green;
  25. }
  26. div:hover span{
  27.     color: white;
  28. }