<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
</style>
<style type="text/css>
/* 在css中的子类元素选择器
子类元素选择器用来选择某个元素的第一级子元素
如选值p元素的第一级子元素
p > span{}
在css中的关系选择器：
兄弟选择器：
相邻兄弟选择器：
用来选择与某一个元素位于同一个父元素中且该元素紧跟前一个元素使用+来连接
普通兄弟选择器：
两个元素必须有同一个父元素但是两个元素间不必仅仅相连 使用~ 来连接
在css中的结构化伪类选择器：
：root 用于匹配文档的根元素在html中根元素始终是html即使用该伪类元素选择器对页面中的所有元素都管用
不需要该样式的元素可以单独设置样式进行覆盖
用法：
:root{
color:red;
}
接结构化伪类选择器：not
如果对一个元素结构使用该样式但是想排除该结构样式中的结构子元素让它不使用该元素
语法：
body p:not(h1){
}
结构化伪类选择器：:only-child
用于匹配某个父元素的唯一的子元素
也就是说如果父元素中只有一个子元素就选择该选择器
语法：
p:only-child{
color:blue;
}
结构化伪类选择器：
选择父元素下的第一个子元素 :first-child
选择父元素下的最后一个子元素 :last-chile
选择父元素下的倒数第n个子元素个子元素 :nth-child()
选择父元素下的倒数第一个或是最后几个 :nth-last-chile()
在括号中在括号中填even是偶数，填odd是即使填even是偶数，填odd是即使
结构化伪类选择器：
用于选择文档中的第一个或是第n个子元素 ：nth-of-type()
用于选值文档中的倒数第一个或是第n个子元素 :nth-last-of-type()
结构化伪类选择器：
:empty
选择没有子元素或是文本的内容为空的元素
用法：
:empty{
background-color:white;
}
css中的伪类元素选择器：
:before 和 :after 选择器
就是该两个属性要和content结合使用
就类似于是在一个定义好的标签文本中插入一段字
用法：
p:before{
content:"23333";
}
*/
</style>
</head>
<body>
<p id="main">我是一个p标签</p>
<span id="selection">我是一个span标签</span>
<p><span>我说p元素的子元素</span>我是一个p标签</p>
</body>
</html>
选择器和样式
**案例**
<style type="text/css">
p{
color: rgb(50,30,50);
font-family: serif;
background-color: chartreuse;
align-content: center;
}
background-color: red;
font-family: "微软雅黑";
align-content: center;
}
.class{
background-color: blue;
}
p ,
font-size: small;
}
p mark{
background-color: antiquewhite;
}
*{
font-weight: 700;
}
p > span{
font-style: oblique;
}
</style>
<style type="text/css">
div[id^=indent]{
font-weight: 900;
}
p[class$="E"]{
font-style:italic;
}
span[id*="book"]{
color:magenta;
}
p font{
background-color: deepskyblue;
}
</style>
<style type="text/css">
p{
height: 100px;
}
:empty{
background-color:
}
:root{
font-weight: 700;
}
span:before{
content: "helloword";
}
span:after{
content: "end";
}
u:only-child{
font-family: "bookman old style";
}
<div>我是一个快状元素<p>我是一个p标签<font>我是一个字体元素<em>我是一个为字体设置斜体的元素<strong>我是为字体加粗的元素</strong></em></font></p></div>
p:first-child{
background-color: cadetblue;
}
p:last-child{
background-color: firebrick;
}
p:nth-child(2){
background-color:orchid ;
}
p:nth-last-child(3){
}
p:nth-of-type(5){
background-color: darkorange;
}
p:nth-last-of-type(3){
background-color: green;
}
em:nth-of-type(even){
background-color: cornsilk;
}
em:nth-last-of-type(odd){
background-color: gold;
}
</style>
</head>
<body>
<!
作者：涛
时间：2020-07-14
描述：在html中的选择器
首先介绍 ：标签选择器 ， id选择器 ， 类选择器 ， 以及 通配符选择器 *。
标签选择器使用标签构成
语法格式是：
选择器{声明块}
id选择器也是分为选择器和声明块
id选择器在一个网页中是唯一的只能出现一个不能有同名的表示该标签的唯一标识 使用
类选择器也是分为选择器和声明块一个网页中可以出现多个使用.class（类名）来进行调用
通配符选择器也是分为选择器和声明块 使用*来为其进行设置
选择器是有优先级的关系的其中继承的样式的优先级最低为0 ， 其次是标签选择器的优先级为1 ， 其中类选择器的优先级为 10 ，其中id选择器的优先级为100
内联样式有最高的优先级 ，如果给样式设置！important的话它的优先级会提到最高
css又称为css层叠样式表相同的样式可能会被重叠或是被覆盖掉
属性选择器精讲
语法：
div[id^=indent]{
含义匹配id属性中属性值以indent开头的div元素
}
div[id$=indent]{
含义匹配id属性中属性值以indent结尾的div元素
}
div[id*=indent]{
含义匹配id属性中属性值以indent开头的div所有元素
}
<!
作者：offline
时间：2020-07-14
描述：接下来我们以推荐书单的形式来给大家进行演示
<!
作者：offline
时间：2020-07-14
描述：在html中我们还有后代选择器 ，并集选择器 ， 标签选择器
属性选择器 ， 关系选择器 ， 以及伪类选择器
<!
作者：offline
时间：2020-07-14
描述：接下来讲子类选择器就是选择只有一个子类的父类元素
<h3>书籍是人类进步的阶梯</h3>
<h3 >读遍好书，有如走访著书的前代高贤同他们促膝谈心</h3>
<p><font face="serif" size="3"><time datetime="2020-07-14" pubdate="true">
下面是我截取的一些片段我会在里面给他定义标签
</time></font></p>
<p id="id">我们为什么要阅读？这是一个简单的问题，却不易回答。尤其是在现在这样竞争激烈而又充满机遇的社会环境中，一种“读书无用论”悄然浮出，在各色人群中流传.</p>
<p class="class"> 当然，这里的“读书”指的是“在校学习，获得学历”，并不是本书所要讲述的字面意义上的“阅读”。不过，关于阅读本身，类似的论调也不少。</p>
<p> 有人宁愿反复看一部电视剧，直到已能背诵其中有特色的台词，也不愿捧起一本书来打发闲暇时光；有人抱怨孩子总是抱着手机玩而不能静下心来学习，却没想过自己也没有安坐读书而成为孩子的榜样；有人工作后一年到头也难得读完一本书，却推说工作太忙，或是读书无趣。</p>
<p id="suxin">诚然，读书有时候确实是一件“麻烦”事，它需要时间，耗费精力，却并不一定能在短期内获得收益。这个社会高速运转，使得人们也跟着“忙”了起来，忙于挣钱养家，忙于实现自身价值，忙于许多被定性为“更急迫”“更重要”的事情。同时，互联网的普及使阅读变得更加快捷便利，同时也削弱了人们对阅读的兴趣。诚然，我们有了更多的选择，为什么还要阅读？回到最初的问题上。</p>
<p><font>中国古代宋真宗赵恒作《劝学诗》以激励士子努力学习、参与科举考试，其中有“书中自有千钟粟”“书中自有黄金屋”“书中车马多如簇”“书中自有颜如玉”等耳熟能详的句子，意指读书可以获得高官厚禄，可以获得豪宅名驹，可以获得如花美眷，可以获得寻常人难以拥有的一切物质享受。这话虽然粗浅且庸俗，却也说明了一个浅显的道理：人们可以通过读书获得赖以谋生的技能。从出生到成年后步入社会，我们拥有的许多技能都是从书本中学到的，再经过实践强化，成为与自身密不可分的部分，以至于渐渐忘记那些技能并不是生下来就会的。因此，读书能获得谋生技能，这一直接目的也被人们或有意或无意地遗忘。</font></p>
<p class="shuxin"><span><font> 法国著名哲学家、数学家笛卡尔在其著作《谈谈方法》中写道：“遍读好书，有如走访著书的前代高贤，同他们促膝谈心。而且是一种精湛的交谈，古人向我们谈出的只是他们最精粹的思想。”这句话说明了阅读更深层次的意义：通过阅读，人们可以获得前人的思想精粹。书籍是前人加工后的产物，通过书籍获得知识，既是捷径，也能使我们的人生之路更加宽阔。英国哲学家培根说过：“读史使人明智，读诗使人灵秀，数学使人周密，物理学使人深刻，伦理学使人庄重，逻辑修辞之学则使人善辩：凡有所学，皆成性格。”因此，阅读能塑造人的性格，可形成“隐性资产”，绝对是合算的长效投资。</font></span></p>
<div><font>书籍是人类进步的阶梯”，苏联作家高尔基的这句话则从另一个高度说明了读书的意义：对个人而言，读书使人站得更高、看得更远；对整个社会而言，书籍的存在推动了社会的进步。在知识大爆炸的当今社会，眼光和格局决定了发展的前景，而阅读正是保证思想常青、不落后于时代的重要途径。学如逆水行舟，不进则退，没有什么永不过时，只有不断学习和进步才能不落后。</font></div>
<p><mark>读到这里，你可以扪心自问：我是为了什么目的去阅读的？不论是为了提升职业技能而阅读专业书籍，还是为了增广见闻而博览群书；不论是为了消磨时光而随手翻阅，还是为了学有所得而熟读精思；不论是为了升职加薪，还是为了准备谈资：阅读总有目的。若无目的读书，则不能称之为“阅读”。同时，唯有明确阅读的目的，才有利于更加高效地阅读。</mark></p>
<p class="E">©影响力</p>
<p>®经济学原理</p>
<span id="book"><怪诞行为学></span>
<mark>©魔鬼经济学</mark>
<div id="indent">我是一个块元素</div>
<p><font>我是p标签的后代即是它的子类元素它是我的父类元素同时也是我的祖先类元素</font></p>
<!
作者：涛
时间：2020-07-14
描述：可以看到的是以上的字是没有居中的所以我们要给他一个外联式让它居中
新建一个以.css结尾的文件然后在head中引入外部css文件
使用<link>标签
<!
作者：offline
时间：2020-07-14
描述：接下来讲伪类元素选择器
:empty 选择标签中没有子类或是没有任何元素的标签
伪类元素选择器匹配文本的根元素html中文本的根元素始终是html
：root
伪类元素选择器：
：not
对一个样式结构使用该元素想排除对该元素的结构子元素使用该样式
：only-child
匹配父元素中唯一的子元素也就数父元素中仅仅只用一个子元素就使用该样式
：first-child选择父元素的第一个子元素
：last-child选择父元素的最后一个子元素
：nth-child（） 选择最后或是倒数第几个子元素
：nth-last-child（）选择最后的子元素或是倒数第几个子元素
在括号中填even是偶数，填odd是即使
结构化伪类选择器：
用于选择文档中的第一个或是第n个子元素 ：nth-of-type()
用于选值文档中的倒数第一个或是第n个子元素 :nth-last-of-type()
结构化伪类选择器：
</body>
<body>
<!
作者：offline
时间：2020-07-14
描述：结构化伪类选择器
<p>我是一个p标签</p>
<p>grejgi</p>
<p>fjiroej</p>
<p>jfi0gj</p>
<p>jfir</p>
<p></p>
<p></p>
<span>我是一个span标签</span><br />
<em>我是一个em标签</em><br>
<em>我是一个em标签</em><br>
<del>我是一个del标签</del><br />
<ins>我是一个ins标签</ins><br />
<strong><u>我是一个u标签</u></strong><br />
<div>我是一个快状元素<p>我是一个p标签<font>我是一个字体元素<em>我是一个为字体设置斜体的元素<strong>我是为字体加粗的元素</strong></em></font></p></div>
</body>
</html>
扫一扫
1573
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
