CSS标签

娃哈哈哈哈呀

已于 2023-06-01 11:30:14 修改

阅读量83

点赞数 1

分类专栏： CSS 文章标签： html css

于 2021-07-12 09:59:24 首次发布

本文链接：https://blog.csdn.net/karlaofsky/article/details/118636077

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

基础选择器：四种（标签，类，id，通配符）

标签选择器

作用：可以选择相同的签比如p

特点：不能差异化

使用情况：较多

用法：p{color: red;}

操作如下：

<!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>
        p {
            color: green;
        }

        div {
            color: hotpink;
        }
    </style>

</head>

<body>
    <p>男生</p>
    <p>男生</p>
    <p>男生</p>
    <div>女生</div>
    <div>女生</div>
    <div>女生</div>
</body>

</html>

类选择器

作用：可以选出1个或者多个标签

特点：根据需求选择

使用情况：非常多

用法：.nav {color: red;}

口诀：样式点定义，结构类class调用一个或多个用开发最常用

操作如下：

<!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>
        .red {
            color: red;
        }

        .memeda {
            color: blue;
        }
    </style>

</head>

<body>
    <ul>
        <li class="red">劳霞明</li>
        <li class="red">螺蛳粉</li>
        <li class="memeda">陈万祥</li>
        <li class="memeda">牛肉面</li>
    </ul>
    <div class="red">刀削面</div>
</body>

</html>

id选择器

作用：一次只能选择1个标签

特点: ID属性只能在每个HTML文档中出现一次

使用情况：搭配js

用法：#nav{color:red;}

口诀：样式#定义，结构id调用，只能用一次，别人切勿使用

操作如下：

<!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>
        #pink {
            color: pink;
        }
    </style>

</head>

<body>
    <div id="pink">劳霞明</div>
</body>

</html>

通配符选择器

作用：选择所有标签

特点：选择太多

使用情况：特殊情况使用

用法：* {color:red;}

操作如下：

<!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>
        * {
            color: red;
        }
    </style>

</head>

<body>
    <div>我的</div>
    <span>我的</span>
    <ul>
        <li>还是我的</li>
    </ul>
</body>

</html>

娃哈哈哈哈呀

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
CSS标签

口诀：样式点定义，结构类class调用一个或多个用开发最常用。口诀：样式#定义，结构id调用，只能用一次，别人切勿使用。特点: ID属性只能在每个HTML文档中出现一次。用法：.nav {color: red;用法：#nav{color:red;用法：p{color: red;用法：* {color:red;作用：可以选出1个或者多个标签。作用：可以选择相同的签比如p。作用：一次只能选择1个标签。使用情况：特殊情况使用。
复制链接

扫一扫