02_css基础选择器

最新推荐文章于 2024-07-12 20:49:16 发布

The Biggest

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量49

点赞数

分类专栏：前端学习文章标签： css css3 html

本文链接：https://blog.csdn.net/java_996/article/details/121137574

版权

前端学习专栏收录该内容

13 篇文章 0 订阅

订阅专栏

CSS选择器

CSS选择器可以分为基础选择器和复合选择器

css基础选择器

选择器就是根据不同需求，选择不同标签来给相应样式的。

基础选择器包含：标签选择器、类选择器、id选择器、通配符选择器

标签选择器：HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式

优点：可以快速为页面中某同类型的标签设置统一样式

缺点：不能差异化选择

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

        div {
         color:pink;
        }

    </style>
</head>
<body>
    <p>男生</p>
    <p>男生</p>
    <p>男生</p>
    <div>女生</div>
    <div>女生</div>
    <div>女生</div>
    
</body>
</html>

类选择器：通过类名，单独选择一个或者某几个标签，开发中最常用的选择器

语法：（CSS中类名是以英文点’’.’'定义）

.类名 { 属性：值； }

标签中谁想调用直接给他加属性 class=“类名” /调用时类名前不需要加点/

注意：类名起名要有意义，避开关键字，不能使用数字开头，不能使用中文

多类名：当样式表中内容较多可供选择，标签的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;
     }

     /* .pink {
         width: 100px;
         height: 100px;
         background-color: pink;
     }

     .green {
         width: 100px;
         height: 100px;
         background-color: green;
     } */

     .pink {
         background-color: pink;
     }

     .green {
         background-color: green;
     }

     .box {
         width: 100px;
         height: 100px;
         font-size: 25px;
     }

 </style>

</head>

<body>
    <ul>
        <li class="red">冰雨</li>
        <li>来生缘</li>
        <li>fight</li>
        <li>违背的青春</li>
        <li class="red">詹姆斯</li>
        <li>艾佛森</li>
    </ul>
<!--多类名调用-->
    <div class="pink box"></div>
    <div class="green box"></div>
    <div class="pink box"></div>

    <br>
    <hr>
    <br>

    <span class="pink red box">pink</span>
    <span class="green box">green</span>
    <span class="pink box">pink</span>
</body>
</html>

id选择器：可以为有特定ID的元素指定特定的样式

HTML元素以ID属性来设置ID选择器，css中ID选择器以#定义

==注意：==id选择器是只能用一次，是单独一个标签的特有，而类选择器可以多个标签使用。他一般用于页面唯一性的元素上，经常和JS搭配使用

例如：身份证中：名字为类选择器，身份证号码为id选择器

语法：

#id名 {

属性：属性值；

}

调用时给标签加ID属性 id=“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>

通配符选择器：通配符选择器使用’*'定义，他表示选取当前页面中所有的标签，不需要调用

<!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>
         * {
             background-color: blue;
             font-size: 30px;
             color: red;
         }
     </style>
</head>
<body>
    <div>haha</div>
    <span>凌云志</span>
    <ul>
        <li>李景亮</li>
        <li>张伟丽</li>
    </ul>
    
</body>
</html>

The Biggest

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
02_css基础选择器

CSS选择器CSS选择器可以分为基础选择器和复合选择器css基础选择器选择器就是根据不同需求，选择不同标签来给相应样式的。基础选择器包含：标签选择器、类选择器、id选择器、通配符选择器标签选择器：HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式优点：可以快速为页面中某同类型的标签设置统一样式缺点：不能差异化选择<!DOCTYPE html><html lang="en"><head>
复制链接

扫一扫