学习WEB前端第三天（1）-CSS选择器-CSDN博客

本文链接：https://blog.csdn.net/qq_39449982/article/details/121530388

目标:

	1.能够说出什么是CSS
    2.能够使用CSS基础选择器
    3.能够设置字体样式
    4.能够设置文本样式
    5.能够说出CSS的三种引入方式
    6.能够使用Chrome调试工具调试样式

css选择器

选择器分为基础选择器和复合选择器两大类
基础选择器是由单个选择器组成的
基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器

类选择器

1.类选择器使用"."(英文点好)进行标识，后面紧跟类名(自定义，我们自己命名的)
2.可以理解为给这个标签起一个名字，来表示
3.长明或词组可以使用中横线来为选择器命名
4.不要使用纯数字、中文等命名，尽量使用英文字母来表示
5.命名要有意义，尽量使别人一眼就知道这个类名的目的

多类名
1.在标签class属性中写多个类名
2.多个类名中间必须用空格分开
3.这个标签就可以分别具有这些类名的样式
使用场景
1.可以把一些标签元素相同的样式(共同的部分)放到一个类里面
2.这些标签都可以调用这个公共的类，然后再调用自己独有的类
3.从而节省CSS代码统一修改也非常方便

id选择器

可以标有特定id的HTML元素指定特定的样式
HTML元素以id属性来设置id选择器，CSS中id选择器以"#"来定义

id与类选择器区别
1.id用"#"调用 类用"."
2.类相当于人的名字，id相当于省份证号码（使用次数不同）
3.类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和JavaScript搭配使用

通配符选择器

在CSS中，通配符选择器使用"*"定义，他表示选取页面中所有元素(标签)
通配符选择器不需要调用，自动就给所有元素使用样式
特殊情况才用，后面讲解使用场景

总结

基础选择器	作用	特点	使用情况	用法
标签选择器	可以选出所有相同的标签，如p	不能差异化选择	较多	p{color:red;}
类选择器	可以选出一个或者多个标签	可以根据需求选择	非常多	.nav{color:red;}
id选择器	一次只能选择一个标签	ID属性只能在每个HTML文档中出现一次	一般和js搭配	#nav{color:red;}
通配符选择器	选择所有的标签	选择太多，有部分不需要	特殊情况使用	*{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>Document</title>
</head>
<style>
    /* 选择器{样式} */
    /* 给谁改样式{改什么样式} */
    /* 标签选择器 */
    p{
        color: red;
    }
    div{
        color: pink;
    }
    /* 类选择器 */
    .red{
        color: red;
    }
    .yellow{
        color: yellow;
    }
    .fontsize{
        font-size: large;
    }
    /* id选择器，结构id调用，只能调用一次，别人切勿使用 */
    #blue{
        color: blue;
    }

    *{
        margin: 0;
        padding: 0;
    }
</style>

<body>

     <p class="yellow fontsize">这是一段话</p>
     <p id="blue">这是一段话</p>
     <p>这是一段话</p>
     <div>你好吗</div>
     <div>你好吗</div>
     <div>你好吗</div>
     <ul>
         <li class="red">这是一段话</li>
         <li>这是一段话</li>
         <li class="red">这是一段话</li>
     </ul>
</body>
</html>