CSS三种样式表、样式表优先级、CSS选择器

一、CSS介绍：

1.1、CSS介绍：

CSS，全称是：Cascading Style Sheets，层叠样式表，用于修饰HTML页面的。

CSS编写规则如下所示：

CSS编写的规则分为两部分，分别是：选择器、声明块。

声明块，需要使用【{}】大括号包裹，括号里面使用【key: value；】的格式定义属性。

选择器，表示需要对哪个HTML标签添加CSS样式，声明块表示要给选择的标签添加什么样式效果。例如：

h1 {
    color: blue;
    font-size: 20px;
}

1.2、CSS三种使用方式：

CSS有三种使用方式，这三种方式在不同地方使用，分别是：内联样式、内部样式、外部样式。

（1）内联样式：

内联样式，是直接在需要添加样式的HTML标签上面，使用【style】属性进行样式修饰。如下所示：

<body>
    <div style="color: blue; font-size: 20px;">内联CSS样式</div>
</body>

（2）内部样式：

内部样式，是在head标签之前，使用【

<!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></title>
    <style>
        .box {
            color: blue;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div clas="box">内联CSS样式</div>
</body>
</html>

（3）外部样式：

外部样式，就是将所有的CSS代码统一的写到一个CSS文件里面，然后哪个HTML要使用，就通过【】标签引入即可。

<!-- 引入外部CSS样式 -->
<link rel="stylesheet" href="./cssdemo.css">

rel属性，用于指定是CSS样式表，href属性用于指定CSS文件的路径。

1.3、CSS样式表的优先级：

上面三种CSS样式表的使用方式，是具有优先级，浏览器会使用优先级越高的CSS样式。

CSS样式表优先级：

内联样式 > 内部样式和外部样式，即：标签上面使用的style属性优先级最高。

内部样式和外部样式的优先级，最后读取的样式，优先级更高，即：哪个最后定义，就使用哪个样式。

也可以理解为后定义的样式，会覆盖前面定义的样式。

<!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></title>
    <!-- 引入外部CSS样式 -->
    <link rel="stylesheet" href="./cssdemo.css">
    <style>
        div {
            color: blue;
        }
    </style>
</head>
<body>
    <!-- <div style="color: red;">三种CSS样式表优先级</div> -->
    <div clas="box">三种CSS样式表优先级</div>
</body>
</html>

定义的CSS外部样式。

div {
    color: orange;
    font-size: 20px;
}

二、CSS选择器：

2.1、简单选择器：

（1）元素选择器：

根据HTML标签名称来选择元素。

<style>
    div {
        color: blue;
    }
</style>

（2）id选择器：

id选择器，需要给HTML标签添加id属性，然后再通过指定的id名称来选择到这个HTML标签，一个HTML里面，id属性应该是唯一的。

id选择器使用格式：#id名称 {样式属性}

（3）class类别选择器：

class类别选择器，给需要添加样式的标签设置【class】属性，一个HTML页面里面，可以有多个相同名称的class选择器，也就是说，class类别选择器可以被重复使用。class选择器也支持同时设置多个，使用空格隔开即可。

class选择器使用格式：【.class名称 { 样式属性 } 】（注意：使用点号开头）

（4）通用选择器：

通用选择器是对HTML中的所有标签添加CSS样式的，通用选择器使用【*】星号通配符定义。

2.2、组合选择器：

（1）后代选择器：

后代选择器，通过【空格】将每个选择分隔，格式如下所示：

后代选择器：【选择器1 空格选择器2 空格选择器3…】

后代选择器，可以将所有指定的后代标签获取到。

<!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></title>
    <!-- 引入外部CSS样式 -->
    <link rel="stylesheet" href="./cssdemo.css">
    <style>
        /* 获取 div 标签下的所有 p 标签 */
        div p {
            color: red;
        }
    </style>
</head>
<body>
    <div>
        <div>
            <p>后代选择器</p>
        </div>
        <p>后代选择器</p>
        <p>后代选择器</p>
    </div>
</body>
</html>

（2）子选择器：

子选择器，通过【>】箭头将每个选择分隔，格式如下所示：

子选择器：【选择器1 > 选择器2 > 选择器3…】

子选择器，只能够获取到选择器下直接子元素，不能包含孙子元素。

也就是某个选择器下面，第一层的标签。

<!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></title>
    <style>
        /* 获取 .box 选择器下的直接 p 标签 */
        .box > p {
            color: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>
            <p>后代选择器</p>
        </div>
        <p>后代选择器</p>
        <p>后代选择器</p>
    </div>
</body>
</html>

（3）相邻兄弟选择器：

相邻兄弟选择器，通过【+】加号将每个选择器分隔，格式如下所示：

相邻兄弟选择器：【选择器1 + 选择器2 + 选择器3…】

待解锁^_…

（4）一般兄弟选择器：

一般兄弟选择器，通过【~】波浪线将每个选择器分隔，格式如下所示：

一般兄弟选择器：【选择器1 ~ 选择器2…】

待解锁^_…

2.3、伪类选择器：

伪类选择器，是根据元素的状态来选择元素。伪类选择器，是属于类别选择器的一种，它能够根据元素的状态来选择标签元素。

伪类选择器的格式如下：

伪类选择器：【选择器名称：状态 { 属性样式 }】

常见的伪类选择器，有如下几个：

伪类选择器：

【:link】这是鼠标点击之前显示的样式。

【:visited】这是鼠标点击之后显示的样式。

【:hover】这是鼠标悬浮上面显示的样式。

【:active】这是鼠标点击的那一刻显示的样式。

上面四个伪类选择器，一般情况下，都是使用在超链接上面，并且四个的使用顺序（l、v、h、a）必须按照上面定义的先后顺序编写，否则在浏览器中可能不能生效。

<!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></title>
    <style>
        a {
            font-size: 30px;
        }
        a:link {
            color: red;
        }
        a:visited {
            color: blue;
        }
        a:hover {
            color: yellow;
        }
        a:active {
            color: green;
        }
    </style>
</head>
<body>
    <a href="#">伪类选择器</a>
</body>
</html>

上面四个伪类选择器也可以使用在其他标签上面，但是只能使hover和active生效。

2.4、伪元素选择器：

伪元素选择器，可以在标签的前后添加额外的内容，伪元素选择器的使用格式：

伪元素选择器：【选择器名称::选择器类型 { 样式属性 }】

伪元素选择器有五种：

伪元素选择器：

【::first-letter】在第一个字符之前添加样式（样式只能够对第一个字符生效）。

【::first-line】在第一行之前添加样式（样式只能够对第一行文本生效）。

【::before】在指定元素之前添加样式。

【::after】在指定元素之后添加样式。

【::selection】在元素选中之后显示的样式（这个只能支持：color、backgroud、cursor、outline四个属性）。

伪元素选择器添加文本内容是通过【content】属性。

<!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></title>
    <style>
        div {
            width: 100px;
            height: 100px;
            border: 2px solid blue;
        }
        .box1::first-letter {
            font-size: 30px;
            color: red;
        }
        .box2::first-line {
            font-size: 20px;
            color: green;
        }
        .box3::before {
            content: '***';
            color: red;
            font-size: 20px;
        }
        .box4::after {
            content: 'XXX';
            font-size: 30px;
            color: green;
        }
        .box5::selection {
            color: white;
            background: black;
        }
    </style>
</head>
<body>
    <div class="box1">
        伪元素选择器first-letter
    </div>
    <div class="box2">
        伪元素选择器first-line
    </div>
    <div class="box3">
        伪元素选择器before
    </div>
    <div class="box4">
        伪元素选择器aftre
    </div>
    <div class="box5">
        伪元素选择器selection
    </div>
</body>
</html>

2.5、结构伪类选择器：

结构伪类选择器，可以从多个元素中，选择指定的元素进行操作，常见的结构伪类选择器有如下这些：

结构伪类选择器：

:empty：选择内容是空的元素标签的选择器。

:root：匹配文档的根元素，即：html标签。

:first-child：选择第一个孩子元素。

:last-child：选择最后一个孩子元素。

:nth-child(n)：选择索引值是n的孩子元素，索引值从1开始。

:nth-child(2n)、:nth-child(even)：选择索引值是偶数的。

:nth-child(2n-1)、:nth-child(2n+1)、:nth-child(odd)：选择索引值是奇数的。

2.6、目标伪类选择器：

目标伪类选择器，一般是锚点结合使用，语法格式：

【XXX:target】：当选择对应目标之后，会触发。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
        body>div>div {
            height: 600px;
            border: 1px solid black;
        }
        ul {
            position: fixed;
            top: 0;
        }
        /* 目标伪类选择器 */
        div:target {
            background-color: lightblue;
        }
    </style>
</head>
<body>
 
    <ul>
        <li><a href="#one">第一页</a></li>
        <li><a href="#two">第二页</a></li>
        <li><a href="#three">第三页</a></li>
    </ul>
    <div>
        <div id="one">第一页</div>
        <div id="two">第二页</div>
        <div id="three">第三页</div>
    </div>
</body>
</html>

2.7、UI元素状态选择器：

UI元素状态选择器，是针对表单元素设置的，有下面四种选择器：

UI元素状态选择器

:enabled：匹配所有处于可用状态的元素。

:disabled：匹配所有处于禁用状态的元素。

:checked：匹配所有选择状态的元素。

::selection：匹配所有处于选中、高亮状态的元素（选中文本时候，注意是两个冒号）。

:focus：获得焦点时候的选择器。

案例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>UI状态选择器</title>
    <style>
        input:enabled {
            background-color: lightblue;
        }
        input:disabled {
            background-color: pink;
        }
        input[type=checkbox]:checked {
            /* 去掉默认样式 */
            appearance: none;
            width: 20px;
            height: 20px;
            background: red;
        }
        input:focus {
            background-color: aqua;
        }
        div::selection {
            background-color: lightblue;
        }
    </style>
</head>
<body>
<form action="#">
    用户名：<input type="text"> <br>
    密码: <input type="text"> <br>
    多选<input type="checkbox"> <br>
    <input type="button" value="提交" disabled>
</form>
<div>
    BBBBBBBBBBBBBB
</div>
</body>
</html>

2.9、否定伪类选择器：

否定伪类选择器，语法格式：

【:not(s)】：对指定的选择器，进行否定选中。

div:not(:first-child) {
	background-color: aqua;
}

2.10、属性选择器：

根据元素的属性或者属性值来选择元素。一般情况下，是针对表单、超链接采用属性选择器居多。属性选择器的使用格式：

属性选择器：

第一种方式：【[属性名称]】，通过中括号包裹属性名称（查找含有指定属性名称的标签元素）。

第二种方式：【[属性名称=“value”]】，通过中括号，包裹属性名称和属性值，查找含有指定属性名称，并且属性值等于给定的标签元素，（这种只能匹配单个属性值）。

第三种方式：【[属性名称**~=****“value”]】，查找包含指定属性名称，并且属性值中包含给定值value的标签元素（这种是能够从多个属性值中进行匹配）。**

第四种方式：【[属性名称**|=****“value”]】，查找包含指定属性名称，并且属性值是以【value】或者【value-】开头的元素（这种只能匹配单个属性值）。**

<!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>属性选择器</title>
    <style>
        input {
            display: block;
            margin: 10px;
        }
        /* 属性选择器 */
        /* 查找所有包含type属性的input标签 */
        input[type] {
            border: 2px solid blue;
            padding: 5px 10px;
        }
        /* 查找所有type属性等于text的input标签 */
        input[type='text'] {
            background-color: lightgray;
        }
        /* 查找所有class属性包含box2值的input标签 */
        input[class~='box2'] {
            width: 200px;
        }
        /* 查找所有class属性值是以box01开头的input标签 */
        input[class|='box'] {
            width: 300px;
        }
    </style>
</head>
<body>
    <input type="text" name="age">
    <input type="text" name="uname">
    <input type="password" class="box1 box2">
    <input type="text" class="box-css01">
</body>
</html>