认识CSS之基础选择器
🌟所属专栏：前端只因变凤凰之路
🐔作者简介：rchjr——五带信管菜只因一枚
😮前言：该系列将持续更新前端的相关学习笔记，欢迎和我一样的小白订阅，一起学习共同进步~
👉文章简介：本文介绍CSS概念，语法规范，代码风格等等，作为CSS入门必备知识。知识学习内容来自b站的@黑马程序员的视频
😃0 什么是CSS
名称：CSS是层叠样式表的简称，别称是CSS样式表或者级联样式表。
使用场景
美化网页，布局网页。具体就是设置HTML中的文本内容（字体，大小，对齐方式等）、图片外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
作用：让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>Document</title><style>/* 选择器 {样式} */p {color: red;font-size: 12px;}</style>
</head>
<body><p>有点意思</p>
</body>
</html>代码风格
1）样式风格书写
紧凑型
<style>/* 选择器 {样式} */p {color: red;font-size: 12px;}</style>展开型（强烈推荐）
<style>/* 选择器 {样式} */p {color: red;font-size: 12px;}</style>2）样式大小写风格
一般都推荐小写字母，全部用小写
3）样式空格风格
属性值前面，冒号后面保留一个空格；选择器和大括号中间保留空格
😃1 CSS基础选择器
作用
选择器就是根据不同需求把不同的标签选出来，即选择标签。具体看以下例子：
把div里面的文字改成红色
把第一个div里面的文字改成红色
把ul里的li标签的文字改成红色
分类
选择器分为基础选择器和复合选择器
基础选择器
标签选择器
是指用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>Document</title><style>p {color: green;}div {color: pink;}</style>
</head>
<body><p>男生</p><p>男生</p><p>男生</p><div>女生</div><div>女生</div><div>女生</div>
</body>
</html>优点：把某一类标签全部选择出来
缺点：不能个性化设计
类选择器
用于单独选一个或某几个标签
语法：
.类名 {
属性1: 属性值1;
......
}
标签中使用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>Document</title><style>.red {color: red;font-size: 12px;}</style>
</head>
<body><ul><li class="red">喜洋洋</li><li>美羊羊</li><li class="red">懒羊羊</li><li>慢羊羊</li></ul><div class="red">我是迪迦</div>
</body>
</html>注意
类名不要用已经存在的标签名称（div，p等等），自己取名字
名字过长用-短横线连接
一些常用命名规则
头：header
内容：content；container
导航：nav
页面主体：main
菜单：menu
<!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><style>.red {width: 100px;height: 100px;/* 背景颜色 */background-color: red;}.green {width: 100px;height: 100px;background-color: green;}</style>
</head>
<body><div class="red">红色</div><div class="green">绿色</div><div class="red">红色</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>Document</title><style>.box {width: 100px;height: 100px;}.red {/* 背景颜色 */background-color: red;}.green {background-color: green;}</style>
</head>
<body><div class="box red">红色</div><div class="box green">绿色</div><div class="box red">红色</div>
</body>
</html>id选择器
为特有id的html元素指定样式
语法：
#id名 {
属性：属性值;
}
与类选择器的区别：只能调用一次，其他标签无法调用。经常和js搭配使用。类选择器在修改样式中使用的最多。
通配符选择器
语法：
* {
属性：属性值;
}
把HTML页面中所有元素（标签）进行修改；并且不需要调用，会自动使用。在特殊情况（后面进一步学习后）使用
基础选择器总结
基础选择器 | 作用 | 特点 | 使用情况 | 用法 |
标签选择器 | 选出某一类所用标签 | 不能差异化选择 | 较多 | p {color: red;} |
类选择器 | 可以选出1个或多个不同类型的标签 | 可以根据需求选择 | 非常多 | .nav {color: red;} |
id选择器 | 一次只能选择一个标签 | 在一个HTML页面中只能出现一次 | 一般和js搭配使用 | #nav {color: red;} |
通配符选择器 | 选择所有标签 | 选择的太多 | 特殊情况使用 |