收藏
天蓬老师批改状态：合格
老师批语：
任何元素想引入到html中，必须要使用一个适当的标签。
通过style标签引入的css规则，仅适用于当前的页面（html文档）。
CSS:层叠样式表，用来设置页面中元素的样式，布局。
选择器+声明块=规则
h1 { /*声明：属性和值组成*/color:violet;border:1px solid #000;}
1、内部样式：
< style > 仅对当前文档的元素有效，使用style标签。
2、 外部样式：
外部样式表/公共样式表/ 适用于所有引入了这个CSS样式表的HTML文档。使用LINK标签
使用link标签引入外部公共样式表。
3、行内样式：属性设置样式
<h1 style="color:teal">文字</h1>
导入公共页眉、页脚、
<sytle>@import url(css/header.css)@import'css/footer.css'<style>
将上述代码写入STYLE.CSS文件，再使用LINK标签导入。
将公共样式部分进行分离，并创建一些独立的样式表来保存它。
使用@import指令将这些独立的公共样式表引入到指定的CSS文档或一标签中。
标签选择器，返回一组
类选择器：返回一组
ID选择器
id选择器使用# 因为浏览器不检查ID的唯一性，必须 由开发者自行保证。
<style>li[class="on"]{background-color:violet;}.on{background-color:violet;}<style><body><ul><li id="foo">test</li><li class="on">test</li><li id="foo">test</li><li class="on" >test</li><li class="on" >test</li></ul><body>
因为HTML是一个结构化的文档：每一个元素在文档中有确切的位置。
所以根据元素的上下文环境来选择是完全没有问题的。
1、后代选择器:选中所有层级ul li{ackground-color:lightbule;}
2、子元素选择器：仅父子层级body>ul>li{background-color:teal;}
3、同级相邻选择器：仅选中与之相邻的第一个兄弟元素.start+li{bacground-color:lightgreen;}
4、同级所有选择器：选中与之相邻的后面所有兄弟元素.start~li{}
1.空格：所有层级
2.> ：父子级
3.+ ：相邻的兄弟
4.~ ：所有相邻兄弟
<li>test1</li><li class=“start”>test2</li><li>test3</li><li>test4<ul><li>test4-1</li><li>test4-2</li><li>test4-3</li></ul></li></ul>
1、匹配任意位置的元素 ： :nth-of-type(an+b)
an+b: an是起点， b是偏移量， n=(0,1,2,3…)
ul li:nth-of-type(0n+3){ background-color:violet;}
0乘任何数得0，所以直接写偏移量。
<ul><li>test1</li><li>test2</li><li>test3</li><li>test4</li><li>test5</li><li>test6</li><li>test7</li><li>test8</li><li>test9</li><li>test10</li></ul></body>
ul li:nth-of-type(n+3){background-color:violet} 括号计算出是几就从ul li的第几行开始。
2、反向获取任意位置的元素： nth-last-of-type(an+b)ul li:nth-last-of-type(-n+3){background} 始终选中最后三个
我只选择倒数第三个ul li:nth-last-of-type(3)
3、选择所有索引为偶数的子元素，2、4、6、8
偶数行关键字： evenul li:nth-of-type(2n){background}
4、奇数选择
奇数行的关键字：oddul li:nth-of-type(2n-1){background}
使用2n+1也是对的。（自己考虑为什么？）
5、选择第一个子元素 first-of-type
nth-of-type(1) 的语法糖 first-of-type
选中最后一个 last-of-type
nth-of-type是最核心的一个选择器，其它的相关选择器都是它的语法糖。
只想匹配父元素中的唯子元素，使用ONLY-OF-TYPE就可以快速实现。ul li:only-of-type{background}
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
