提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
CSS基础学习（上）
CSS简介
css全称:层叠样式表(Cascading Style Sheets)
css的作用:美化网页,让网页变得更好看
如何理解层叠样式表(css)?
网页是由标签层层嵌套形成的如外层的html标签嵌套body,body再嵌套我们需要的内容标签.
层叠样式指的是很多上级标签的样式会自动继承到其下级标签,除非下级标签定义了自己的样式.
层叠样式继承的例子：
<div style="color:red">
你好
<div>
世界
<div>
我爱css
</div>
</div>
</div>
一、CSS书写位置
1.内部样式表
内嵌式是将CSS代码集中写在HTML文档的head头部标签中, 并且用style标签定义，其基本语法格式如下:
<style>
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
.title是类选择器,即选择class是title的标签,去修改该标签的样式color:是样式属性,用来设置标签文本内容的颜色
先简单了解选择器和属性,后面会详细介绍
<style>
.title{
color: red;
}
</style>
/*
color是对文本字体颜色的设置
*/
<body>
<div class="title">
你好
</div>
</body>
2.外部样式表
链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,
通过link标签将外部样式表文件链接到HTML文档中,其基本语法格式如下：
/创建index.css文件，写入样式设置
.title{
color: red;
}
<div class="title">
你好
</div>
<head>
<link href="CSS文件的路径" rel="stylesheet" />
</head>
3.内联样式（行内样式）
内联样式,又有人称行内样式、行间样式、内嵌样式。
是通过标签的style属性来设置元素的样式，其基本语法格式如下:
<标签名 style=“属性1:属性值1; 属性2:属性值2; 属性3:属性值3;”>内容</标签名>
注意:
内联样式相对于内部样式表和外部样式表来说用的较少,因为其样式优先级较高,可能导致样式难以修改的问题,因此建议少用内联样式,多用其他两种样式表!
<div style="color:red">
你好
</div>
二、基础选择器
1.类选择器（重点）
类选择器
类选择器:
使用 .类名 可以找到所有具备这个类名的标签,
在类选择器 .title 后面的花括号里面可以设置样式
注意:
当类名过长时,建议用 - 连接,如class=“green-text”
<style>
.title1{
/* color是样式属性:文字颜色 */
color: blue;
/* font-size是样式属性:文字大小 */
font-size: 30px;
/* background-color是样式属性:背景颜色 */
background-color: skyblue;
}
.title2{
color: red;
font-size: 18px;
}
/* 类名太长可以用 - 连接 */
.green-text{
color: green;
}
</style>
<!--
用class属性给标签起一个类名,
css可以用类选择器找到该标签,
从而修改标签样式.
-->
<div class="title1">
你好
</div>
<div class="title2">
世界
</div>
<div class="green-text">
刘备
</div>
多类名选择器
当不同的类名修改同一个css属性时, 样式的效果和标签中class类名书写顺序没有关系, 即class="green-text blue-text"写成class="blue-text green-text"样式效果是一样的;样式效果只和style中类选择器的书写顺序有关.
<style>
.red-text {
color: red;
}
.font30 {
/* 修改字体大小 */
font-size: 30px;
}
/*
.green-text在上面.blue-text在下面,下面选择器的样式会
覆盖上面选择器的样式,即页面效果应该是蓝色,两个选择器交换位置,
则会变成绿色.
*/
.green-text {
color: green;
}
.blue-text {
color: blue;
}
</style>
<!--
下面的div绑定了两个类名:red-text和font30,
类选择器选择其中任意一个类名都可以找到该div
-->
<div class="red-text font30">
你好
</div>
<div class="green-text blue-text">
不俗即仙骨，多情乃佛心
</div>
2.标签选择器
标签选择器,用标签名做选择器,可以将某一标签全部选择出来
<style>
div{
color: red;
}
span{
color: blue;
}
</style>
<body>
<div>1</div>
<div>2</div>
<span>3</span>
<div>4</div>
</body>
标签选择器的优缺点
优点:能够快速为页面中同类型的标签统一样式。
缺点：不能设计差异化样式,有时候会相互干扰
例如:如果在网页样式表中定义如下样式,会把所有div元素对象定义为宽度400px,高度200px,颜色skyblue,但是页面中并不是所有的div都需要设置成这个样式,因此我们需要重新修改其他的div的样式
总结:
不是特别建议过多使用标签选择器,可以用类选择器替换标签选择器使用
3.id选择器
使用id属性起一个id名
注意:
id名必须唯一,这和class名有区别,id可以理解成人的身份证号,所有人的身份证号都不一样,所有标签的id也必须不一样,这是规范!
id选择器的使用:
#在标签中定义的id名
<style>
#title{
color: red;
}
</style>
<body>
<div id="title">
你好
</div>
</body>
4.通配符选择器
通配符选择器*:
可以选择所有html元素
注意:
这个通配符选择器,就像我们的电影明星中的梦中情人,想想它就好了,但是它不会和你过日子,实际开发中很少用
通配符选择器最常用的场景是去掉标签的默认内外边距!
<style>
*{
color: red;
/* 去掉默认内外边距 */
margin: 0;
padding: 0;
}
.box{
background: skyblue;
}
</style>
<div>你好</div>
<span>世界</span>
<p>我亦好歌亦好酒，唱与佳人饮与友</p>
<div class="box">
不俗即仙骨，多情乃佛心
</div>
三、复合选择器
1.交集选择器
交集选择器:
选择类名既是title1又是title2的标签
<style>
.title1.title2 {
color: red;
}
</style>
选择类名是head标签名是h2的标签
<style>
h2.head {
color: blue;
}
</style>
<div class="title1 title2">
你好
</div>
<div class="title1">
世界
</div>
<h2 class="head">首页</h2>
<h2>我的</h2>
`
注意:
类名之间不能有空格
2.并集选择器
并集选择器:
不同选择器之间用逗号隔开,所有选择器都会执行后面的样式
<style>
.title1,.title2{
color: red;
}
</style>
<div class="title1">
你好
</div>
<div class="title2">
世界
</div>
思考:如果把逗号去掉,页面会出现什么效果?
3.后代选择器
后代选择器(包含选择器):
用来选择标签后代,即标签的内部标签
其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔
<style>
.container .title1{
color: red;
}
</style>
<body>
<div class="container">
<div class="text">
<div class="title1">你好</div>
</div>
<div class="title2">世界</div>
</div>
4.子代选择器
子代选择器:
用来选择标签的子代标签
其写法就是把父级标签写在前面,子级标签写在后面,中间跟一个 > 进行连接
<style>
.container>.box1 {
color: red;
}
.container>div>.box2 {
color: blue;
}
</style>
<div class="container">
<div class="box1">你好</div>
<div>
<div class="box2">世界</div>
</div>
</div>
注意:
子代选择器只能选择元素的儿子元素,孙子不可以选择,
后代选择器可以选择元素的后代元素,儿子,孙子都可以
5.兄弟选择器
相邻兄弟选择器
相邻兄弟选择器:
语法:元素1+元素2{}
选择元素1下面第一个出现的兄弟元素
<style>
.box+li{
color: red;
}
</style>
<div>
<li class="box">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</div>
注意:
元素1和元素2必须有相同的父亲元素
所有兄弟选择器
所有兄弟选择器:
语法:元素1~元素2{}
选择元素1下面所有的兄弟元素
<style>
.box~li{
color: red;
}
</style>
<ul>
<li class="box">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
注意:
元素1和元素2必须有相同的父亲元素
6.伪类选择器
a标签的伪类选择器
a标签的伪类选择器用于选择处于特定状态的元素,行为就像你在文档的某个部分上应用了一个类,通常可以帮助你减少标记中多余的类, 伪类是以冒号开头的关键字
a标签的伪类选择器：
link:未访问过
visited:已访问过
hover:鼠标移动到链接上(重点,用的很多)
active:选中链接时
<style>
/* 未访问过的元素 */
a:link {
color: red;
}
/* 已访问过的元素 */
a:visited {
color: gray;
}
/* 鼠标移动到链接上 */
a:hover {
color: orange;
}
/* 选中链接时 */
a:active {
color: skyblue;
}
</style>
<body>
<!-- #表示链接到当前页面 -->
<a href="#">登录</a>
</body>
选中之前效果：
鼠标选中之后效果：
注意:
a标签的伪类选择器,上下顺序不要变,
遵循link->visited->hover->active的顺序
记忆口诀:lvha(lv好)
为什么a的伪类需要按顺序写?
因为伪类的优先级是相同的,后出现的伪类样式会覆盖先出现的
例如:先active后hover
a:active {
color: skyblue;
}
a:hover {
color: orange;
}
鼠标选中a链接应该是skyblue色,但是选中链接时也触发了hover,hover样式会覆盖active样式,结果选中链接变成了orange
hover鼠标悬浮
hover伪类选择器不仅仅可以用在标签选择器a后面,还可以用在其他选择器后面,hover的作用是当鼠标悬浮在元素上修改元素的样式,使用hover我们可以写出很多好看的效果!
<style>
.box:hover{
color: red;
}
</style>
<div class="box">
你好
</div>
选中之前效果：
鼠标选中之后效果：
结构伪类选择器
<style>
/*
first-child:父元素的第一个子元素
如果一个元素类名是text,并且这个元素是它的父元素的第一个子元素,
那么就选中它.
*/
.text:first-child{
color: red;
}
/*
last-child:父元素的最后一个子元素
如果一个元素类名是text,并且这个元素是它的父元素的最后一个子元素,
那么就选中它.
*/
.text:last-child{
color: skyblue;
}
/*
nth-child(n):
nth表示第n个,父元素的第n个元素
n可以写具体的数字
n可以写odd奇数行,even偶数行
n可以写表达式2n-1,2n
*/
/* 奇数行变为红色 */
.title:nth-child(odd){
color: red;
}
/* 偶数行变蓝色 */
.title:nth-child(2n){
color:blue
}
</style>
<div class="box">
<div class="text">1</div>
<div class="text">2</div>
<div class="text">3</div>
</div>
<hr>
<div class="box1">
<div class="title">1</div>
<div class="title">2</div>
<div class="title">3</div>
<div class="title">4</div>
<div class="title">5</div>
<div class="title">6</div>
<div class="title">7</div>
<div class="title">8</div>
</div>
注意:
结构选择器中n是从1开始的,即第一行是1,第二行是2…
7.伪元素选择器
伪元素在真实dom中是不存在的,即在dom树中不存在这样的标签
.div1::before表示在.div1这个标签体内容前面插入一个伪元素,内容content是空字符串’’
伪元素特点:
1.伪元素几乎具备元素的所有属性,比如背景background,长宽width,height,边框border等;
2.伪元素是一个内联元素
<style>
.div1::before{
content:'刘备';
border: 1px solid skyblue;
}
</style>
<div class="box">
<div class="div1">
你好
</div>
</div>
注意:
伪元素一定要写content属性,否则生成不了伪元素
8.选择器的优先级
优先级引入
选择器的优先级问题:
同一个元素用id选择器设置为红色,用类选择器设置为绿色,最终的颜色是红色还是绿色呢?
我们测试一下发现是红色!为什么会这样?这是因为id选择器的优先级大于类选择器,因此样式使用的是id选择器中设置的样式!
选择器的优先级
选择器优先级大小顺序:
内联样式>id选择器>类选择器>标签选择器>通配符>继承
注意:
当两个选择器优先级相同时,写在style下面的选择器样式会覆盖上面的样式!
总结
以上就是为大家总结的CSS选择器的种类及功能。总的来说，碰到需求不同的情况，我们可以灵活选用这些选择器，但是当选择器样式冲突时，我们就得对不同的选择器之间的优先级进行分析从而解决问题。解析规则大致如下：
当不同选择器的样式设置有冲突时，优先级高的选择器的样式会覆盖优先级低的选择器的样式。
相同优先级的选择器，样式遵循就近原则。哪个选择器样式最后定义，就会采用哪个样式。
需要注意的是，CSS具有继承性，即子类标签会继承父类标签的某些样式。但是继承样式优先级最低。所以在嵌套结构中，不管父类元素样式的优先级多高，在子类元素定义的样式都会覆盖继承来的样式
3503
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
