CSS基本语法-引入方式-模块化-选择器的学习

css的基本语法

任何元素想引入到html中，必须要使用一个适当的标签。
通过style标签引入的css规则，仅适用于当前的页面（html文档）。
CSS:层叠样式表，用来设置页面中元素的样式，布局。
选择器+声明块=规则

h1 { /*声明：属性和值组成*/color:violet;
  border:1px solid #000;
}

css引入方式

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标签导入。

cssr模块化

将公共样式部分进行分离，并创建一些独立的样式表来保存它。
使用@import指令将这些独立的公共样式表引入到指定的CSS文档或一标签中。

-选择器1：简单选择器分为标签、属性(ID CLASS)两大类

标签选择器，返回一组
类选择器：返回一组

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>

-选择器2：上下文选择器

因为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
偶数行关键字： even
ul li:nth-of-type(2n){background}

4、奇数选择
奇数行的关键字：odd
ul 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}