一.CSS基础

1.CSS简介

CSS的全称为：层叠样式表 ( Cascading Style Sheets )

2. CSS的编写位置（略）

3. 样式表的优先级

优先级规则：行内样式 > 内部样式 = 外部样式

4. CSS语法规范

二.CSS选择器

1. CSS基本选择器

通配选择器
元素选择器
类选择器
id 选择器

通配选择器

作用：可以选中所有的HTML元素。
语法：

* {
    属性名: 属性值;
}

举例：
/* 选中所有元素 */

* {
    color: orange;
    font-size: 40px;
}

元素选择器

作用：为页面中某种元素统一设置样式。
语法：

标签名 {
    属性名: 属性值;
}

举例：
/* 选中所有h1元素 */

h1 {

color: orange;

font-size: 40px;

}

/* 选中所有p元素 */

p {

color: blue;

font-size: 60px;

}

类选择器

作用：根据元素的class值，来选中某些元素。
语法:

.类名 {

属性名: 属性值;

}
举例：
/* 选中所有class值为speak的元素 */

.speak {

color: red;

}

/* 选中所有class值为answer的元素 */

.answer {

color: blue;

}

一个元素不能写多个 class 属性，下面是 错误示例：
<!-- 该写法错误，元素的属性不能重复，后写的会失效 -->
<h1 class="speak" class="big">你好啊</h1>

<!-- 该写法正确，class属性，能写多个值 -->
<h1 class="speak big">你好啊</h1>

ID选择器

作用：根据元素的 id 属性值，来精准的选中某个元素。
语法:

#id值 {

属性名: 属性值;

}
举例:
/* 选中id值为earthy的那个元素 */

#earthy {

color: red;

font-size: 60px;

}

2. CSS复合选择器

常见的复合选择器如下：

交集选择器
并集选择器
后代选择器
子元素选择器

1. 复合选择器建立在基本选择器之上，由多个基础选择器，通过不同的方式组合而成。
2. 复合选择器可以在复杂结构中，快速而准确的选中元素。

交集选择器

作用：选中同时符合多个条件的元素。
举例:

/* 选中：类名为beauty的p元素，为此种写法用的非常多！！！！ */
p.beauty {
    color: blue;
}

/* 选中：类名包含rich和beauty的元素 */
.rich.beauty {
    color: green;
}

注意：

有标签名，标签名必须写在前面。
id 选择器、通配选择器，理论上可以作为交集的条件，但实际应用中几乎不用 —— 因为没有意义。
交集选择器中不可能出现两个元素选择器，因为一个元素，不可能即是 p 元素又是 span 元素。
用的最多的交集选择器是：元素选择器配合类名选择器，例如： p.beauty 。

并集选择器

作用：选中多个选择器对应的元素，又称：分组选择器。
举例：

/* 选中id为peiqi，或类名为rich，或类名为beauty的元素 */
#peiqi,
.rich,
.beauty {
    font-size: 40px;
    background-color: skyblue;
    width: 200px;
}

注意：

并集选择器，我们一般竖着写。
任何形式的选择器，都可以作为并集选择器的一部分。
并集选择器，通常用于集体声明，可以缩小样式表体积。

后代选择器

作用：选中指定元素中，符合要求的后代元素。
举例：

/* 选中ul中的所有li */
ul li {
    color: red;
}

/* 选中ul中所有li中的a */
ul li a {
    color: orange;
}

/* 选中类名为subject元素中的所有li */
.subject li {
    color: blue;
}

/* 选中类名为subject元素中的所有类名为front-end的li */
.subject li.front-end {
    color: blue;
}

注意：

后代选择器，最终选择的是后代，不选中祖先。
儿子、孙子、重孙子，都算是后代。
结构一定要符合之前讲的 HTML 嵌套要求，例如：不能 p 中写 h1 ~ h6 。

子代选择器

作用：选中指定元素中，符合要求的子元素（儿子元素）。（先写父，再写子）
举例：

/* div中的子代a元素 */
div>a {
    color: red;
}

/* 类名为persons的元素中的子代a元素 */
.persons>a{
    color: red;
}

注意：

子代选择器，最终选择的是子代，不是父级。
子、孙子、重孙子、重重孙子 ...... 统称后代！，子就是指儿子。

兄弟选择器

相邻兄弟选择器(紧挨)

作用：选中指定元素后，符合条件的相邻兄弟元素。
举例:

/* 选中div后相邻的兄弟p元素 */
div+p {
    color:red;
}

通用兄弟选择器(同级)

作用：选中指定元素后，符合条件的所有兄弟元素。
举例：

/* 选中div后的所有的兄弟p元素 */

div~p {
    color:red;
}

属性选择器

作用：选中属性值符合一定要求的元素。
语法：

1. [属性名] 选中具有某个属性的元素。
2. [属性名="值"] 选中包含某个属性，且属性值等于指定值的元素。
3. [属性名^="值"] 选中包含某个属性，且属性值以指定的值开头的元素。
4. [属性名$="值"] 选中包含某个属性，且属性值以指定的值结尾的元素。
5. [属性名*=“值”] 选择包含某个属性，属性值包含指定值的元素。

举例：

/* 选中具有title属性的元素 */
div[title]{color:red;}

/* 选中title属性值为atguigu的元素 */
div[title="atguigu"]{color:red;}

/* 选中title属性值以a开头的元素 */
div[title^="a"]{color:red;}

/* 选中title属性值以u结尾的元素 */
div[title$="u"]{color:red;}

/* 选中title属性值包含g的元素 */
div[title*="g"]{color:red;}

伪类选择器

一、动态伪类：

:link 超链接未被访问的状态。
:visited 超链接访问过的状态。
:hover 鼠标悬停在元素上的状态。
:active 元素激活的状态。

什么是激活？—— 按下鼠标不松开。
注意点：遵循 LVHA 的顺序，即： link 、 visited 、 hover 、 active 。

:focus 获取焦点的元素。

表单类元素才能使用 :focus 伪类。
当用户：点击元素、触摸元素、或通过键盘的 “ tab ” 键等方式，选择元素时，就是获
得焦点。

二、结构伪类:

:first-child 所有兄弟元素中的第一个。
:last-child 所有兄弟元素中的最后一个。
:nth-child(n) 所有兄弟元素中的第 n 个。
:first-of-type 所有同类型兄弟元素中的第一个。
:last-of-type 所有同类型兄弟元素中的最后一个。
:nth-of-type(n) 所有同类型兄弟元素中的第n个。

关于n的值：
1. 0 或 不写 ：什么都选不中 —— 几乎不用。
2. n ：选中所有子元素 —— 几乎不用。
3. 1~正无穷的整数 ：选中对应序号的子元素。
4. 2n 或 even ：选中序号为偶数的子元素。
5. 2n+1 或 odd ：选中序号为奇数的子元素。
6. -n+3 ：选中的是前 3 个。

三、否定伪类：

:not(选择器) 排除满足括号中条件的元素。

四、UI伪类：

:checked被选中的复选框或单选按钮。

<input type="checkbox" class="box">
    
    .box:checked{
        width: 100px;
        height: 100px;
    }

:enable可用的表单元素（没有 disabled 属性,不常用）。
:disabled不可用的表单元素（有 disabled 属性）。

<input type="text" list="mydata" disabled>
    input[list="mydata"]:disabled{
        background-color: gray;
    }

五、目标伪类

:target 选中锚点指向的元素。

<style>
    div{
        background-color: gray;
        height: 300px;
    }
    div:target{
        background-color: aqua;
    }
</style>
<body>
    <a href="#one">one</a>
    <a href="#two">two</a>
    <a href="#three">three</a>
    <a href="#four">four</a>
    <a href="#five">five</a>
    <a href="#six">six</a>
    <a href="#seven">seven</a>
    <div id="one">No.1</div>
    <div id="two">No.2</div>
    <div id="three">No.3</div>
    <div id="four">No.4</div>
    <div id="five">No.5</div>
    <div id="six">No.6</div>
    <div id="seven">No.7</div>
</body>

六、语言伪类

:lang() 根据指定的语言选择元素（本质是看 lang 属性的值）。

伪元素选择器

作用：选中元素中的一些特殊位置。
常用伪元素：

::first-letter 选中元素中的第一个文字。
::first-line 选中元素中的第一行文字。
::selection 选中被鼠标选中的内容。
::placeholder 选中输入框的提示文字。
::before 在元素最开始的位置，创建一个子元素（必须用 content 属性指定内容）。
::after 在元素最后的位置，创建一个子元素（必须用 content 属性指定内容）。

3.选择器的优先级（权重）

简单描述

行内样式 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器。

详细描述

计算方式：每个选择器，都可计算出一组权重，格式为： (a,b,c)

a : ID 选择器的个数。
b : 类、伪类、属性 选择器的个数。
c : 元素、伪元素 选择器的个数。

比较规则：按照从左到右的顺序，依次比较大小，当前位胜出后，后面的不再对比

(1,0,0) > (0,2,2)

(1,1,0) > (1,0,3)

(1,1,3) > (1,1,2)

特殊规则

1. 行内样式权重大于所有选择器。
2. !important的权重，大于行内样式，大于所有选择器，权重最高！

CSS2基础（1）