css基本选择器

最新推荐文章于 2024-07-25 14:15:14 发布

SSS4362

最新推荐文章于 2024-07-25 14:15:14 发布

阅读量93

点赞数 3

分类专栏： java web基础知识文章标签： css 前端 html

本文链接：https://blog.csdn.net/SSS4362/article/details/125454917

版权

java web基础知识专栏收录该内容

18 篇文章 0 订阅

订阅专栏

css选择器

基本选择器

1 标签选择器

a.语法

标签名{
   样式名1:样式值1;
   样式名2:样式值2;
}
/* 
  这个是对所有相同标签名的标签进行美化操作
*/

b.不加标签选择器的效果

在这里插入图片描述

c.加标签选择器的效果

在这里插入图片描述

d.源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标签选择器的使用</title>
    <style type="text/css">
        span{
          color: brown;
        }
    </style>
</head>
<body>
      <div id="box">
        <span>早安</span>
        <div>
            <span>各位</span>
        </div>
      </div>
      <span>祝你好运</span>
</body>
</html>

2 类选择器

a.语法

(先在标签里面新建class属性并对其赋值)

.class值{
    样式1:样式值1
    样式2:样式值2
    样式3:样式值3
    .....
}

b.不加类选择器的效果

在这里插入图片描述

c.加类选择器的效果

在这里插入图片描述

d.源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类选择器的使用</title>
    <style type="text/css">
        .f{
          color: seagreen;
        }
    </style>
</head>
<body>
      <div id="box">
        <span class="f">早安</span>
        <div>
            <span class="f">各位</span>
        </div>
      </div>
      <span>祝你好运</span>
</body>
</html>

3 id选择器

a.语法(先给标签设置id属性)

#id值{
  样式名1:样式值1;
  样式名2:样式值2;
  ....
}

b.不加id选择器的效果

在这里插入图片描述

c.加id选择器的效果

在这里插入图片描述

d.源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>id选择器的使用</title>
    <style type="text/css">
        /* #luck{
          color: pink;
        } */
    </style>
</head>
<body>
      <div>
        <span>早安</span>
        <div>
            <span>各位</span>
        </div>
      </div>
      <span id="luck">祝你好运</span>
</body>
</html>

4.通配符选择器

a.语法

*{
   样式名:样式值1;
   样式名:样式值2;
   ......
}

b.不加通配符选择器的效果

在这里插入图片描述

c.加通配符选择器的效果

在这里插入图片描述

d.源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通配符选择器</title>
   <style type="text/css">
      *{
        color: purple;
        background-color: orange;
      }
   </style>
</head>
<body>
    <div>
        <div class="one" id="content">坚持,不只是为了离梦想更近一步</div>
        <div><span>
            每天进步一点点,量变总会带来质变的
        </span></div>
        <div>
            <span>挣钱是为了保护想保护的人</span>
        </div>
    </div>
</body>
</html>