目录
一、css简介
是一个用于修饰文档（可以是标记语言HTML，也可以是XML或者SVN）的语言，可以将文档以更优雅的形式呈现给用户。是前端入门必学的一门语言。
用CSS来修改样式的好处：
- 不用记忆哪些属性属于哪个标签。
- 当需求变更时我们不需要修改大量的代码就可以满足需求。
- 在前端开发中CSS只有一个作用, 就是用来修改样式。
用CSS来修改样式的缺点：
- 要记忆哪些标签有哪些属性, 如果该标签没有这个属性, 那么设置了也没有效果。
- 当需求变更时我们需要修改大量的代码才能满足现有的需求。 HTML只有一个作用就是用来添加语义。
二、常见选择器
1、id选择器
作用：根据指定的id名称找到对应的的标签，然后设置属性。
格式： #id名称{ 属性：值}；
/*style样式*/
/* id选择器 # 优先级1000 */
#div1 {
background-color: aquamarine;
color: burlywood;
}
/*html代码*/
<div id="div1" >我是第1个div</div>
注意点：
1.在同一个界面中id的名称是不可以重复的。
2.在编写id选择器时一定要在id名称前面加上#。
3.id的名称是有一定的规范的。
3.1 id的名称只能由字母/数字/下划线，a-z 0-9 _
3.2 id名称不能以数字开头
3.3 id名称不能是HTML标签的名称，不能是a h1 img input ...
4.id选择器的优先级为1000
2.类选择器
作用：根据指定的类名称找到对应的标签, 然后设置属性
格式 .class类名{ 属性：值}
/* id选择器 # 优先级1000 */
#div1 {
background-color: aquamarine;
color: burlywood;
}
/* 类选择器 . 优先级 10 */
.div {
color: coral;
}
/*html代码*/
<div id="div1" class="div1">我是第1个div</div>
<div class="div">我是第2个div</div>
<div class="div">我是第3个div</div>
<div class="div">我是第4个div</div>
<div class="div">我是第5个div</div>
注意点：
1.在同一个界面中class的名称是可以重复的
2.在编写class选择器时一定要在class名称前面加上. 类名
3.类名的命名规范和id名称的命名规范一样
4.类名就是专门用来给CSS设置样式的
5.在HTML中每个标签可以同时绑定多个类名 格式: <标签名称 class="类名1 类名2 ...">
6.类选择器的优先级为10
3.标签选择器
作用: 根据指定的标签名称, 在当前界面中找到所有该名称的标签, 然后设置属性
格式: 标签名称{ 属性:值; }
/* 标签选择器 优先级为1 */
div {
color: coral;
}
/*html代码*/
<div>我是第1个div</div>
<div>我是第2个div</div>
<div>我是第3个div</div>
<div>我是第4个div</div>
<div>我是第5个div</div>
注意点:
1.标签选择器选中的是当前界面中所有的标签, 而不能单独选中某一个标签
2.标签选择器无论标签藏得多深都能选中
3.只要是HTML中的标签就可以作为标签选择器(h/a/img/ul/ol/dl/input....)
4.标签选择器的优先级为1
4.后代选择器
作用: 找到指定标签的所有特定的后代标签,设置属性
格式: 选择器1 选择器2{ 属性:值; }
/* 后代选择器 目前优先级为 11 相加*/
body .div2 {
color: darkblue;
} 
注意点：
1.后代选择器必须用空格隔开
2.后代不仅仅是儿子, 也包括孙子/重孙子, 只要最终是放到指定标签中的都是后代选择器样式渲染的对象
3.后代选择器不仅仅可以使用标签名称, 还可以使用其它选择器
4.后代选择器可以通过空格一直延续下去
5.后代选取器的优先级，是相加的，列如 类选择器 标签选择器{} 这个后代选择器的优先级为11
5.子元素选择器
作用: 找到指定标签中所有特定的直接子元素, 然后设置属性
格式: 选择器1>选择器2{ 属性:值; }
/* 子元素选择器 目前优先级为 11 */
.div2>p {
color: darkcyan;
}
/*html代码*/
<div class="div2">
<p>我是div2类下的第1p标签</p>
<p>我是div2类下的第2p标签</p>
<p>我是div2类下的第3p标签</p>
<p>我是div2类下的第4p标签</p>
<p>我是div2类下的第5p标签</p>
<p>我是div2类下的第6p标签</p>
<div class="div3">
<p>我是div2下的div3下的第1个p标签</p>
<p>我是div2下的div3下的第2个p标签</p>
<p>我是div2下的div3下的第3个p标签</p>
<p>我是div2下的div3下的第4个p标签</p>
<p>我是div2下的div3下的第5个p标签</p>
<p>我是div2下的div3下的第6个p标签</p>
</div>
</div> 
注意点：
1.子元素选择器只会查找儿子, 不会查找其他被嵌套的标签
2.子元素选择器之间需要用>符号连接, 并且不能有空格
3.子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器
4.子元素选择器可以通过>符号一直延续下去
5.后代选择器和子元素选择器之间的区别:后代选择器使用空格作为连接符号 ,子元素选择器使用>作为连接符号 。后代选择器会选中指定标签中, 所有的特定后代标签, 也就是会选中儿子/孙子..., 只要是被放到指定标签中的特定标签都会被选中。子元素选择器只会选中指定标签中, 所有的特定的直接标签, 也就是只会选中特定的儿子标签
6.后代选择器和子元素选择器之间的共同点: 后代选择器和子元素选择器都可以使用标签名称/id名称/class名称来作为选择器 -后代选择器和子元素选择器都可以通过各自的连接符号一直延续下去 选择器1>选择器2>选择器3>选择器4{}
7.子元素选择器的优先级是相加的。例如： 类选择器>标签选择器{} 这个后代选择器的优先级为11
6.并集选择器
作用: 给所有选择器选中的标签设置属性
格式: 选择器1,选择器2{ 属性:值; }
div,
p,
.h {
color: coral;
}
/*html代码*/
<div>我是第1个div</div>
<div>我是第2个div</div>
<div>我是第3个div</div>
<div>我是第4个div</div>
<div>我是第5个div</div>
<p>我是第1p标签</p>
<p>我是第2p标签</p>
<p>我是第3p标签</p>
<p>我是第4p标签</p>
<p>我是第5p标签</p>
<h1 class="h"></h1>
注意点：
1.并集选择器必须使用,来连接
2.选择器可以使用标签名称/id名称/class名称
7.序选择器（结构伪类选择器 ）
1.同级别中的第几个
:first-child 选中同级别中的第一个标签
:last-child 选中同级别中的最后一个标签
:nth-child(n) 选中同级别中的第n个标签,n还有可以有其他的 参数，odd:选中奇数，even:选中偶数，xn+y:x,y是自己定义，选中符合这个的标签，例如2n+1;
/* 结构伪类选择器 优先级为10 */
div:first-child {
color: blueviolet;
}
/* 优先级为 标签选择器+结构伪类选择器 优先级为11 */
div:nth-child(2) {
color: seagreen;
}
p:nth-child(even) {
color: red;
}
h1:nth-child(odd) {
color: salmon;
}
<div>我是第1个div</div>
<div>我是第2个div</div>
<div>我是第3个div</div>
<div>我是第4个div</div>
<div>我是第5个div</div>
<nav>
<p>我是第1p标签</p>
<p>我是第2p标签</p>
<p>我是第3p标签</p>
<p>我是第4p标签</p>
<p>我是第5p标签</p>
</nav>
<nav>
<h1 class="h">1</h1>
<h1 class="h">2</h1>
<h1 class="h">3</h1>
<h1 class="h">4</h1>
<h1 class="h">5</h1>
</nav>
注意点 ：在使用这个类型的结构伪类选择器，他不是仅仅依靠着结构伪类选择器前面的选择器来筛选目标标签，而是在目标标签的同一个父元素在给筛选，但是只会样式只会给前面的选择器，选择出来的标签，但是由于有最后，最前，以及第几个标签的选择，会有一个明明这是选中的标签的最后一个但是就是没有样式，这种很有可能这个标签并不是父元素的最后的标签，但是这个标签也不是我们要找的标签，样式也不会有。
2.同级别同类型中的第几个
:first-of-type 选中同级别中同类型的第一个标签
:last-of-type 选中同级别中同类型的最后一个标签
:nth-of-type(n) 选中同级别中同类型的第n个标签
:nth-last-of-type(n) 选中同级别中同类型的倒数第n个标签
:only-of-type 选中父元素的特定类型的唯一子元素
/* 结构伪类选择器 优先级为10 */
div:first-of-type {
color: blueviolet;
}
/* 优先级为 标签选择器+结构伪类选择器 优先级为11 */
div:nth-of-type(3) {
color: seagreen;
}
p:nth-of-type(even) {
color: red;
}
h1:nth-of-type(odd) {
color: salmon;
}
</style>
</head>
<body>
<div>我是第1个div</div>
<div>我是第2个div</div>
<div>我是第3个div</div>
<div>我是第4个div</div>
<div>我是第5个div</div>
<nav>
<h1 class="h">1</h1>
<h1 class="h">2</h1>
<p>我是第1p标签</p>
<p>我是第2p标签</p>
<p>我是第3p标签</p>
<p>我是第4p标签</p>
<p>我是第5p标签</p>
</nav>
<nav>
<h1 class="h">1</h1>
<h1 class="h">2</h1>
<h1 class="h">3</h1>
<h1 class="h">4</h1>
<h1 class="h">5</h1>
<p>我是第1p标签</p>
<p>我是第1p标签</p>
</nav> 
8.a标签的伪类选择器
1.通过我们的观察发现a标签存在一定的状态
1.1默认状态, 从未被访问过
1.2被访问过的状态
1.3鼠标长按状态
1.4鼠标悬停在a标签上状态
2.格式
:link 修改从未被访问过状态下的样式
:visited 修改被访问过的状态下的样式
:hover 修改鼠标悬停在a标签上状态下的样式
:active 修改鼠标长按状态下的样式
a:link {
color: seagreen;
}
/* 已访问过的 */
a:visited {
color: sienna;
}
/* 鼠标悬停 */
a:hover {
color: red;
}
/* 鼠标长按 */
a:active {
color: royalblue;
}
<a href="https://v3.bootcss.com/">bootstrap</a>注意点：
a标签的伪类选择器可以单独出现也可以一起出现
a标签的伪类选择器如果一起出现, 那么有严格的顺序要求 默认状态:link->被访问状态:visited->鼠标悬停状态:hover->鼠标长按状态:active 编写的顺序必须要遵守爱恨原则 love hate
如果默认状态的样式和被访问过状态的样式一样, 那么可以缩写
9通配符选择器
作用: 给当前界面上所有的标签设置属性
格式: *{ 属性:值; }
注意点: 由于通配符选择器是设置界面上所有的标签的属性, 所以在设置之前会遍历所有的标签, 如果当前界面上 的标签比较多, 那么性能就会比较差, 所以在企业开发中一般不会使用通配符选择器
10、属性选择器
作用: 根据指定的属性名称找到对应的标签, 然后设置属性
格式: [attribute] [attribute=value]
作用: 找到有指定属性, 并且属性的取值等于value的标签, 然后设置属性 最常见的应用场景, 就是用于区分input属性
input[type=password]{}
<input type="text" name="" id="">
<input type="password" name="" id="">-属性的取值是以什么开头的 [attribute|=value] CSS2 [attribute^=value]
CSS3 两者之间的区别: CSS2中的只能找到value开头,并且value是被-和其它内容隔开的 CSS3中的只要是以value开头的都可以找到, 无论有没有被-隔开
-属性的取值是以什么结尾的 [attribute$=value] CSS3
-属性的取值是否包含某个特定的值得 [attribute~=value] CSS2 [attribute*=value] CSS3 两者之间的区别: CSS2中的只能找到独立的单词, 也就是包含value,并且value是被空格隔开的 CSS3中的只要包含value就可以找到
三、不常见的选择器
1、交集选择器
作用: 给所有选择器选中的标签中, 相交的那部分标签设置属性
格式: 选择器1选择器2{ 属性: 值; }
注意点: 1.选择器和选择器之间没有任何的连接符号 2.选择器可以使用标签名称/id名称/class名称 3.交集选择器仅仅作为了解, 企业开发中用的并不多
2、兄弟选择器
1.相邻兄弟选择器 CSS2
作用: 给指定选择器后面紧跟的那个选择器选中的标签设置属性
格式: 选择器1+选择器2{ 属性:值; }
注意点: 1.相邻兄弟选择器必须通过+连接 2.相邻兄弟选择器只能选中紧跟其后的那个标签, 不能选中被隔开的标签
2.通用兄弟选择器 CSS3
作用: 给指定选择器后面的所有选择器选中的所有标签设置属性
格式: 选择器1~选择器2{ 属性:值; }
注意点: 1.通用兄弟选择器必须用~连接 2.通用兄弟选择器选中的是指定选择器后面某个选择器选中的所有标签, 无论有没有被隔开都可以选中
3、否定伪类
作用：可以从已选中的元素中剔除出某些元素
语法： :not(选择器) 例如: p:not(.hello){ background-color: yellow; }
4、伪元素选择器
使用伪元素来表示元素中的一些特殊的位置 ::after 表示元素的最后边的部分 一般需要结合content这个样式一起使用，
通过content可以向after的位置添加一些内容 ::before 表示元素最前边的部分 一般需要结合content这个样式一起使用， 通过content可以向before的位置添加一些内容
::first-letter 为第一个字符来设置一个样式
::first-line 为第一行设置一个样式
扫一扫
1376
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
