<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3初识(一)</title>
<!-- CSS的第三种写法，外部样式表 -->
<!-- 将样式编写到外部的CSS文件中，可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户的体验。 -->
<link rel="stylesheet" href="css/css3_1.css">
<style>
/*CSS的第二种写法，内部样式表*/
/*
CSS的基本语法：
选择器 声明块
选择器，通过选择器可以选中页面中的指定元素，比如p的作用就是选中页面中所有的p元素
声明块，通过声明块来制定要为元素设置的样式，由一个一个的声明组成
声明是一个名值对结构，以冒号连接，分号结尾
简单选择器：
id选择器、class选择器、标签选择器、通配符选择器
通配符选择器是对全部的标签都生效，包括HTML的<body>标签。一般来说，都是用通配符选择器对所有的标签进行初始化用的。
交集选择器：
作用：选中同时符合多个条件的元素
语法：选择器1选择器2...选择器n{} 表示必须同时满足所有的选择器的元素(才会被选中)
注意：交集选择器中如果有标签选择器，必须使用标签选择器开头
选择器分组(并集选择器)：
作用：同时选择多个选择器对应的元素
语法：选择器1,选择器2,...,选择器n{}
子元素选择器：
作用：选中指定父元素的指定子元素
语法: 父元素 > 子元素 > 子元素的子元素
后代元素选择器：
作用：选中指定元素内的指定后代元素
语法：祖先 后代1 后代2 ... 后代n{}
选择相邻下一个同级的标签：
语法：前一个 + 下一个
属性选择器：
[属性名]：选择含有指定属性的元素
[属性名=属性值]：选择含有指定属性和属性值的元素
[属性名^=内容]：选择含有指定属性和以内容为开头的属性值的元素
[属性名$=内容]：选择含有指定属性和以内容为结尾的属性值的元素
[属性名*=内容]：选择含有指定属性和属性值中含有内容的元素
伪类(不存在的类，特殊的类)选择器:
伪类用来描述一个元素的特殊状态，比如，第一个子元素、被点击的元素
伪类一般情况下都是使用:开头
:first-child 选中第一个
:last-child 选中最后一个
:nth-child(n) 选中第n个子元素
:nth-child(2n) 选中偶数位的子元素
:nth-child(2n+1) 选中奇数位的子元素
注意：以上伪类都是根据所有的子元素进行排序的
:first-of-type
:last-of-type
:nth-of-type
注意：这几个伪类的功能和上述的类似，不同点是他们是在同类型元素中进行排序
:not()否定伪类，将符合条件的元素从选择器中去除
:link用来表示没访问过的链接
:visited用来表示访问过的链接
:hover用来表示鼠标移入的状态
:active用来表示鼠标点击
伪元素，表示页面中一些特殊的并不真实的存在的元素(特殊的位置)：
::first-letter 表示第一个字母
::first-line 表示第一行
::selection 表示被选中的内容
::before 元素的开始
::after 元素的结尾
注意：before和after必须结合content属性来使用(添加的内容鼠标选不中)
css权重：
选择器 权值
！important Infinity(正无穷)
行间样式 1000(256进制)
id 100
class|属性|伪类 10
标签|伪元素 1
通配符 0
*/
div.zhongwenming{ /*交集选择器*/
color: green;
}
/*再次提醒网页读取顺序是从上到下的，下面两个css代码反过来会有不一样的效果*/
.zhongwenming span{ /*类选择器*/
color: fuchsia;
}
.zhongwenming > span{ /*子元素选择器*/
color: aqua;
}
p + span{ /*选择p标签后面的第一个span标签*/
color: orange;
}
p[title=属性选择器]{ /*属性选择器*/
color: white;
}
ul li:first-child{ /*伪类选择器*/
color: deeppink;
}
ul li:nth-child(4){ /*伪类选择器*/
color: goldenrod;
}
ul li:last-child{ /*伪类选择器*/
color: lightpink;
}
ul li:nth-child(2n){ /*伪类选择器*/
color: indigo;
}
ul li:nth-child(2n-1){ /*伪类选择器*/
/*color: saddlebrown;*/
}
ul span:nth-of-type(2n-1){ /*伪类选择器*/
/*color: chartreuse;*/
}
ul span:not(:nth-of-type(3)){ /*伪类选择器*/
color: chartreuse;
}
a:link{ /*伪类选择器*/
color: green;
}
a:visited{ /*伪类选择器*/
color: saddlebrown;
}
a:hover{ /*伪类选择器*/
color: dodgerblue;
}
a:active{ /*伪类选择器*/
color: indigo;
}
p[title]::first-letter{ /*伪元素的使用*/
font-size: 40px;
}
p[title]::first-line{ /*伪元素的使用*/
background-color: cornflowerblue;
}
p[title]::selection{ /*伪元素的使用*/
background-color: greenyellow;
}
p[title]::before{ /*伪元素的使用*/
content: '“';
}
p[title]::after{ /*伪元素的使用*/
content: '”';
}
</style>
</head>
<body>
<p class="zhongwenming" id="zhongwenming">CSS的中文名：层叠样式表</p>
<!-- 网页是多层结构，我们所能看见的是最上面一层 -->
<p style="color: red;font-weight: bold">行内样式表，css的第一种写法</p>
<div class="zhongwenming">
<p>CSS的中文名：层叠样式表</p>
<span>我是span</span>
<div>
<span>我是最里面的那个span</span>
</div>
</div>
<p title="属性选择器">选择相邻下一个同级的标签</p>
<span>我是上一个p标签的兄弟span标签</span><br>
<span>我是上一个span标签的兄弟span标签</span>
<ul>
<li>第一个li(1)</li>
<span>第一个span(2)</span><br>
<span>第二个span(3)</span>
<li>第二个li(4)</li>
<span>第三个span(5)</span>
<li>第三个li(6)</li>
<span>第四个span(7)</span>
<li>第四个li(8)</li>
<span>第五个span(9)</span>
<li>第五个li(10)</li>
<li>第六个li(11)</li>
<li>第七个li(12)</li>
</ul>
<a href="#">百度一下，你就知道</a><br>
<p title="伪元素选择器">这里是伪元素选择器这里是伪元素选择器这里是伪元素选择器这里是伪元素选择器这里是伪元素选择器这里是伪元素选择器这里是伪元素选择器</p>
</body>
</html>
——————————————以下是css文件内容————————————————
#zhongwenming{
color: deepskyblue;
font-weight: bold; /*字体加粗*/
}
浙公网安备 33010602011771号