CSS选择器(一)-原创手记-慕课网

CSS是什么

CSS，指的是“Cascading Style Sheet（层叠样式表）”，是用来控制网页外观的一门技术。HTML、CSS、JavaScript构成了前端网页的三个必要组成部分，其中HTML用于控制网页结构，CSS用于控制网页外观，JavaScript用于实现网页交互。

CSS的引入方式

CSS分为内部样式表、外部样式表和行内样式表，不同的样式表有不同的引入方式。

内部样式表

内部样式表一般采用再head标签内部嵌套style标签,然后在style标签中定义css样式。

<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>CSS基础</title>

    <!-- <link rel="stylesheet" href="CSS基础.css"> -->

    <!-- 内部样式表 -->
    <style type="text/css">
       h1{color: bisque;}
    </style>
</head>

<body>
    <h1 id="h1style">CSS基础</h1>
</body>

外部样式表
外部样式表顾名思义就是将需要的CSS文件创建到当前网页文件以外的某一个位置，然后再通过特定方式将CSS文件引入到当前网页文件中，类似Java中的import过程。

1.首先需要创建CSS文件，我们在当前网页文件的同级目录下创建一个名为CSS基础的CSS文件，并且定义CSS样式。

CSS基础.CSS

h1{color:bisque;}

2.接下来引入CSS文件，在html文件中引入刚刚创建的CSS文件。

<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>CSS基础</title>

    <!-- 外部样式表 -->
    <link rel="stylesheet" href="CSS基础.css">
</head>

<body>
    <h1 id="h1style">CSS基础</h1>
</body>

行内样式表
行内样式表就是在需要修饰的html标签中使用元素本身自带的style属性来定义一些CSS样式，这种方式目前使用的并不多，其用法如下

<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>CSS基础</title>
</head>

<body>
    <!-- 行内样式表 -->
    <h1 id="h1style" style="color: bisque;">CSS基础</h1>
</body>

刚才介绍的三种引入CSS的方式其实现的效果都是一样的，只是使用频率有所不同，从代码的可读性和耦合性角度看使用外部导入的方式更有利于代码的维护。

id和calss属性

上面的示例中不管使用的那种方式引入CSS，在CSS内部都是使用的h1这个标签然后在{}里边定义CSS样式的，由此可见标签本身可以作为选择元素的一种方式，可以称之为标签选择器。另外每个标签的id和class属性也可以用在CSS中用来选择元素。

id属性
id属性就好比我们的身份证号，在整个html文档中是唯一的，原则上讲一个html文档中不能同时存在两个id相同的元素，因为如果我们使用这个id作为一个css选择器，那么css中定义的外观效果将同时影响多个元素。比如下面一段代码

<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>CSS基础</title>

    <!-- 外部样式表 -->

    <link rel="stylesheet" href="CSS基础.css">

</head>

<body>
    <h1 id="h1style">CSS基础</h1>

    <h2 id="h1style">CSS基础</h2>
</body>

浏览器运行效果:

图片.png

虽然浏览器可以正常解析并显示，但是依然不建议将多个元素设置相同的id值。

class属性
class属性就好比我们身份证上的名字，身份证号是唯一的，但是两个人却可以重名的。

<body>
    <h1 class="h1style">CSS基础</h1>
    <h2 class="h1style">CSS基础</h2>
</body>

CSS选择器

选择器的概念

还是上面的示例代码，我们想要把h1标签下的CSS基础这几个字颜色变成红色，整个过程中第一步必然是要先找到h1这个标签并且选中h1标签。找到并且选中标签的过程就是通过选择器来实现的。CSS中定义了多种不同的选择器，主要有:标签选择器、id选择器、class选择器、后代选择器、群组选择器等，不同选择器的实现方式不同，但是其最终目的都是要达到改变外观显示的目的。

选择器的基本格式

选择器{
    属性:值;
    ...
    属性:值;
}

括号内部使用键值对表示不同的样式值，每个样式值之间用;号分割

选择器分类

CSS选择器大致分为以下几类:

标签选择器标签名{}

伪标签选择器标签名::before{}

类选择器 .类名{}

属性选择器 [属性名]{}

伪类选择器类名:hover{}

ID选择器 #id{}

组合选择器

否定选择器 :not(){}

通用选择器 *{}

CSS选择器不同选择器的具体用法请看CSS选择器(二)