CSS常用选择器大全

立如芝兰玉树，笑如朗月入怀。——佚名

---

个人主页  @充电区

点击查看所属专栏 《前端》

【关注+收藏专栏】知识追番，不遗漏 ！！！

---

【没有废话，全是干货】

---

像素

（固定单位，相对单位）

显示-屏幕分辨率（1920px*1080px常用（像素个数）

CSS的定义

层叠样式表（Cascading Style Sheets）

1. 写在title下方
2. Style标签里可以书写CSS代码
3. 书写规则 选择器{属性名:属性值;}

CSS的引入方式

内部样式表（学习使用）

    CSS代码写在style标签里面

外部样式表（开发使用）

CSS代码写在单独CSS文件中（.css）

再html中使用link标签引入（一般写在title标签下方）

 <link rel="stylesheet" href="./hh.css">
#"./"查找文件位置
#"hh"文件名
#".css"后缀，表示是css文件

行列样式（配合JS使用）

CSS写在标签的style属性值里面（不建议这种写法，后期维护十分麻烦）

<div style="color: green; font-size: 30px; ">
    金刚大战哥斯拉
</div>

基本选择器

作用：查找标签设置样式

 <style>
       /* 定义类选择器：.类名 */
        .speak{
            color: red;
        }
 </style>

/* 使用类选择器 */
<p class="speak">我对你说：一寸光阴一寸金，劝你死了这条心！！</p>

通配符选择器

（查找页面所有标签，设置相同样式）

*，无需调用，浏览器自动查找

        /* 通配选择器 */
        /* 在清除样式的时候，往往会用统配选择器 */
        * {
            color: orange;
            font-size: 40px;
        }

标签选择器（元素选择器）

（使用标签名作为选择器，选中同名标签设置相同的样式）

p、h1、div、a、img...

类选择器

（查找标签，差异化设置标签的显示效果）

步骤：

定义类选择器:  .类名

使用类选择器： 标签添加 class=“类名”

注意：

1、类名自定义，不要用纯数字或中文，尽量用英文命名（且见名知意）

2、一个类选择器可供多个标签使用

3、一个标签可使用多个类名，类名之间用空格隔开

 <style>
       /* 定义类选择器：.类名 */
        .speak{
            color: red;
        }
        .pig{
            font-size:20px;
        }
 </style>

/* 使用类选择器 */
<p class="speak pig ">我对你说：一寸光阴一寸金，劝你死了这条心！！</p>

id选择器

（查找标签，差异化设置标签的显示效果）

（id选择器一般配合JavaScript使用，很少用来CSS的样式）

步骤：