Day 47 CSS与它的选择器
什么是CSS
CSS全称Cascading Style Sheet 层叠样式表，是专门用来为HTML标签添加样式的。
样式指的是HTML标签的显示效果，比如换行、宽高、颜色等等
层叠属于CSS的三大特征之一，我们将在后续内容中介绍
表 指的是我们可以将样式统一收集起来写在一个地方或者一个CSS文件里
为什么要用CSS呢
单独使用HTML标签时候容易造成
- 记忆困难：需要记忆每个标签的所有样式相关属性，如果标签没有某个样式相关属性，那么设置了也没有效果
- 代码耦合度高：HTML语义与样式耦合在一起
- 扩展性差：当某一类样式需要修改时，我们需要找到所有设置了该样式标签进行修改
CSS应运而生，很好的解决了以上三个问题
如何使用CSS
CSS语法可以分为两部分
- 选择器
- 声明
声明由属性和值组成，多个声明之间用分号隔开
CSS的四种引入方式
-
内联式
行内式是在标签的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用
<p style="color: #6485ff;font-size: 50px" >我是你爸爸</p> <hr> <p>我是你爸爸</p> <hr> <p>我是你爸爸</p> -
嵌入式
嵌入式是将CSS样式集中写在网页标签内的的标签对中。
<!-- 嵌入式 --> <style> p { color: pink; font-size: 60px; } </style> -
导入式
<head> <style> /*形式一：*/ /*@import "css/mystyle.css";*/ /*形式二：*/ @import url("css/mystyle.css"); </style> </head> -
外联式（企业开发中使用这种方式）
<link rel="stylesheet" href="css/p的css.css"> # p的css p3 { color: greenyellow; font-size: 20px; }
导入式与链接式的区别:
1、标签属于XHTML,@import是属于CSS2.1特有的，对于不兼容CSS2.1的浏览器来说就是无效的
2、导入式的缺点：
导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷，用户体验差。
3、链接式的优点：
使用链接式时与导入式不同的是它会在网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。
注意点
1、style标签必须放到head内 ,type="text/css"代表文本类型的css
2、type属性其实可以不用写，默认就是type=“text/css”
3、设置样式时必须按照固定的格式来设置，key:value;
其中 ; 不能省略，最后一个属性其实可以省略，但我们可以简单地统一记成不 能省略就行了
CSS选择器
基本选择器
1、id选择器
作用：根据指定的id名称，在当前界面中找到对应的==唯一一个==标签，然后设置属性
格式：
id="名称" {
属性:值;
}
注意点：
- 在企业开发中如果仅仅只是为了设置样式，通常不会使用id，在前端开发中id通常是留给js使用的
- 每个标签都可以设置唯一一个id，id就相当于人/标签的身份证，因此在同一界面内id绝不能重复
- 引用id一定要加
# - id的命名只能由字符、数字、下划线组成，且不能以数字开头，更不能是html关键字如p，a，img等
2、类选择器
**作用：**根据指定的类的名称，在当前界面中==找到对应的==标签，然后设置属性
格式：
.class="名称" {
属性:值;
}
注意点：
- 类名就是专门用来给某个特定的标签设置样式的
- 每个标签都可以设置一个或多个class（空格分隔），class就相当于人/标签的名称，因此同一界面内class可以重复
- 引用class一定要加点
. - 类名的命名规则与id的命名规则相同
3、标签选择器
**作用：**根据指定的标签名称，在当前界面中找到所有该名称的标签，然后设置属性
格式：
标签 {
属性:值;
}
注意点：
- 只要是HTML的标签都能当做标签选择器
- 标签选择器选中的是当前界面中的所有标签,而不能单独选中某一标签
- 标签选择器，无论嵌套多少层都能选中
4、通配符选择器
**作用：**选择所有标签
格式：
* {
属性:值;
}
注意点：
- 在企业开发中一般不会使用通配符选择器
- 由于通配符选择器是设置界面上所有的标签的属性， 所以在设置之前会遍历所有的标签如果当前界面上的标签比较多，那么性能就会比较差
组合选择器
1、后代选择器
**作用：**找到指定标签的所有后代（儿子，孙子，重孙子、、、）标签，设置属性，也就是标签内所有符合内容的子标签
格式：
标签名1 xxx {
属性:值;
}
注意点：
- 后代选择器必须用空格隔开
- 后代不仅仅是儿子，也包括孙子、重孙子
- 后代选择器不仅仅可以使用标签名称，还可以使用其他选择器比如id或class
- 后代选择器可以通过空格一直延续下去
2、子元素选择器
**作用：**找到制定标签的所有特定的直接子元素，然后设置属性
格式：
标签名1>标签名2 {
属性:值;
}
先找到名称叫做"标签名称1"的标签，然后在这个标签中查找所有直接元素名称叫做"标签名称2"的元素
注意点：
- 子元素选择器之间需要用
>符号链接，并且不能有空格----比如div >p会找div标签的所有后代标签，标签名为">p" - 子元素选择器只会查找儿子，不会查找其他嵌套的标签
- 子元素选择器不仅可以用标签名称，还可以使用其他选择器,比如id或class
- 子元素选择器可以通过>符号一直延续下去
3、毗邻选择器，CSS2推出（相邻兄弟选择器）
**作用：**选定紧跟其后的那一个标签
格式：
选择器1>选择器2 {
属性:值;
}
注意点：
- 毗邻选择器必须通过
+号链接 - 毗邻选择器只能选中紧跟其后的那个标签，不能选中被隔开的标签
div+p {
color: #0187ba;
font-size: 30px;
}
<div>
<p>黑暗森林</p>
<p>精灵意志</p>
<p>萤火意志</p>
</div>
<p>哈利波特</p> # 只有这个被选中
<p>魔戒</p>
4、兄弟选择器
**作用：**给指定选择器后面的所有选择器中的所有标签设置属性
格式：
选择器1~选择器2 {
属性:值;
}
注意点：
- 通用兄弟选择器必须通过
~号链接 - 通用兄弟选择器选中的是指选择器后面的某个选择器选中的所有标签无论有没有被隔开，都可以被选中
div~p{
color: #ff9033;
font-size: 15px;
}
<div>
<p>黑暗森林</p>
<p>精灵意志</p>
<p>萤火意志</p>
</div>
<p>哈利波特</p> # 全部被修改
<p>魔戒</p>
<p>星球大战</p>
<p>阿凡达</p>
交集选择器与并集选择器
1、交集选择器（不常用）
**作用：**给所有选择器选中的标签中，相交的那部分标签设置属性
格式：
选择器1选择器2 {
属性:值;
}
注意点：
- 选择器与选择器之间没有任何链接符号
- 选择器可以使用标签名称、id、class
- 交集选择器在企业开发中并不多见，了解即可
因为：p.part1 完全可以用.part1取代
2、并集选择器
**作用：**给所有满足条件的标签设置属性
格式：
选择器1,选择器2 {
属性:值;
}
注意点：
- 选择器与选择器之间必须用逗号
,来链接 - 选择器可以使用标签名称、id、class
序列选择器
**作用：**css3中新推出的选择器中，最具代表性的的9个，又称为序列选择器，过去的选择器中要选中某个必须加id或class，学习了这9个后，不用加id或class，想选中同级别的第几个就选第几个
格式：
#2.1 同级别
:first-child p:first-child 同级别的第一个
:last-child p:last-child 同级别的最后一个
:nth-child(n) 同级别的第n个
:nth-last-child(n) 同级别的倒数第n个
#2.2 同级别同类型
:first-of-type 同级别同类型的第一个
:last-of-type 同级别同类型的最后一个
:nth-of-type(n) 同级别同类型的第n个
:nth-last-of-type(n) 同级别同类型的倒数第n个
#2.3 其他
:only-of-type 同类型的唯一一个
:only-child 同级别的唯一一个
<style>
p:first-child{
color:cornflowerblue;
font-size: 30px;
}
p:last-child{
color: #0187ba;
font-size: 40px;
}
p:nth-of-type(3){
color: goldenrod;
font-size: 25px;
}
p:nth-last-of-type(4){
color: red;
font-size: 50px;
}
p:nth-child(2){
color: #ff9033;
font-size: 15px;
}
</style>
属性选择器
**作用：**根据指定的属性名称找到对应的标签，然后设置属性 该选择器，最常用于input标签
格式与具体用法：
[属性名]
其他选择器[属性名]
[属性名=值]
[属性名^=值]
[属性名$=值]
[属性名*=值]
例1：找到所有包含id属性的标签
[id]
例2：找到所有包含id属性的p标签
p[id]
例3：找到所有class属性值为part1的p标签
p[class="part1"]
例4：找到所有href属性值以https开头的a标签
a[href^="https"]
例5：找到所有src属性值以png结果的img标签
img[src$="png"]
例6：找到所有class属性值中包含part2的标签
[class*="part"]
伪类选择器
**作用：**常用的几种位列选择器。
格式：
#1.1 没有访问时的超链接a标签样式：
a:link {
color: blue;
}
#1.2 访问过的超链接a标签样式：
a:visited {
color: gray;
}
#1.3 鼠标悬浮在元素上应用样式：
a:hover {
background-color: #eee;
}
#1.4 鼠标点击瞬间的样式：
a:active {
color: green;
}
#1.5 input输入框获取焦点时样式：
input:focus {
outline: none;
background-color: #eee;
}
注意：
- a标签的伪类选择器可以单独出现，也可以一起出现
- a标签的伪类选择器如果一起出现，有严格的顺序要求，否则失效link，visited，hover，active
- hover是所有其他标签都可以使用的
- focus只给input标签使用
伪元素选择器
#1、常用的伪元素。
#1.1 first-letter：杂志类文章首字母样式调整
例如：
p:first-letter {
font-size: 48px;
}
#1.2 before
用于在元素的内容前面插入新内容。
例如：
p:before {
content: "*";
color: red;
}
在所有p标签的内容前面加上一个红色的*。
#1.3 after
用于在元素的内容后面插入新内容。
例如：
p:after {
content: "?";
color: red;
}
在所有p标签的内容后面加上一个蓝色的?。
CSS三大特征
1、继承性
定义：
给某一个元素设置一些属性，该元素的后代也可以使用，这个我们就称之为继承性
注意：
1、只有以color、font-、text-、line-开头的属性才可以继承
2、a标签的文字颜色和下划线是不能继承别人的
3、h标签的文字大小是不能继承别人的，会变大，但是会在原来字体大小的基础上变大
ps:打开浏览器审查元素可以看到一些inherited from。。。的属性
应用场景：
通常基于继承性统一设置网页的文字颜色，字体，文字大小等样式
2、层叠性
定义：
CSS全称：Cascading StyleSheet层叠样式表，层叠性指的就是CSS处理冲突的一种能力，即如果有多个选择器选中了同一个标签那么会有覆盖效果
注意：
1、层叠性只有在多个选择器选中了同一个标签，然后设置了相同的属性，
才会发生层叠性
ps：通过谷歌浏览器可以查看到，一些属性被划掉了
3、优先级
定义：
当多个选择器选中同一个标签，并且给同一个标签设置相同的属性时，如何层叠就由优先级来确定
优先级：
整体优先级从高到底：行内样式>嵌入样式>外部样式
行内样式并不推荐使用，所以我们以嵌入为例来介绍优先级
1、大前提：直接选中 > 间接选中(即继承而来的)
#1、以下为直接选中
<style type="text/css">
#id1 {
color: red;
}
.ppp {
color: green;
}
p {
color: blue;
}
</style>
#2、以下为间接选中
<style type="text/css">
ul {
color: yellow;
}
</style>
<ul>
<li>
<p id="id1" class="ppp">我是span</p>
</li>
</ul>
2、如果都是间接选中，那么谁离目标标签比较近，就听谁的
3、如果都是直接选中，并且都是同类型的选择器，那么就是谁写的在后面就听谁的
4、如果都是直接选中，并且是不同类型的选择器，那么就会按照选择器的优先级来层叠
id > 类 > 标签 > 通配符(也算直接选中) > 继承 > 浏览器默认（即没有设置任何属性）
5、优先级之==!important==
[
#1、作用：还有一种不讲道理的!import方式来强制指定的属性的优先级提升为最高，但是不推荐使用。因为大量使用!import的代码是无法维护的。
#2、注意：
1、!important只能用于直接选中，不能用于间接选中
2、!important只能用于提升被指定的属性的优先级，其他属性的优先级不会被提升
3、!important必须写在属性值分号的前面
6、优先级之权重计算
#1、强调
如果都是直接选中，并且混杂了一系列其他的选择器一起使用时，则需要通过计算机权重来判定优先级
#2、计算方式
#1、id数多的优先级高
#2、id数相同，则判定类数多的优先级高
#3、id数、class数均相同，则判定标签数多的优先级高
#4、若id数、class数、标签数均相同，则无需继续往下计算了，谁写在后面谁的优先级高
扫一扫
1402
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
