CSS选择器(一)

CSS是什么

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

CSS的引入方式

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

内部样式表前端

内部样式表通常采用再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过程。markdown

1.首先须要建立CSS文件，咱们在当前网页文件的同级目录下建立一个名为CSS基础的CSS文件，而且定义CSS样式。oop

CSS基础.CSSui

h1{color:bisque;}
复制代码

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

<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样式，这种方式目前使用的并很少，其用法以下code

<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的方式其实现的效果都是同样的，只是使用频率有所不一样，从代码的可读性和耦合性角度看使用外部导入的方式更有利于代码的维护。orm

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>
复制代码

浏览器运行效果:

虽然浏览器能够正常解析并显示，可是依然不建议将多个元素设置相同的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选择器(二)