709笔记

（下）

其他伪类选择器

nth-child

nth-of-type

第一个

h3:first-child {
    background-color: red;
}

h3:first-of-type{
    background-color: red;
}

最后一个

h3:last-child {
    background-color: red;
}
h3:last-of-type{
    background-color: red;
}

第n个

h3:nth-child(n) {
    background-color: red;
}

h3:nth-of-type(n){
    background-color: red;
}

偶数位的

p:nth-of-type(even) {
    background-color: aqua;
}
p:nth-child(2n){
    background-color:aqua;
}

奇数位的

h3:nth-child(2n-1) {
     background-color: yellow;
}
h3:nth-child(2n-1){
     background-color: yellow;
}
//不用考虑正负问题

从第三个开始到最后，包含第三个

h3:nth-child(n + 3) {
    background-color: yellow;
}
h3:nth-of-type(n + 3) {
    background-color: cyan;
} 

前三个，包含第三个

h3:nth-child(-n + 3) {
    background-color: bisque;
}
h3:nth-of-type(3 - n) {
    background-color: cyan;
}

关于nth-of-type和nth-child的区别

指路：https://zhuanlan.zhihu.com/p/126681521

nth-of-type他是当前元素的兄弟元素的第n个，而nth-child是当前元素的兄弟节点的第n个当前元素。

更具体解释：p:nth-of-type(4)，则先找到该p的所有是p的兄弟元素，然后在里面数到第四个p赋予样式；而p:nth-child(4)，先找到该p，然后找到所有p的兄弟元素（包括h1等其他元素），然后数到第四个，如果是p则赋予样式，如果不是p则没有。

代码简写语法

.class ---> <div class=""></div>
#id ---> <div id=""></div>
p#id ---> <p id="id"></p>
p.class#id ---> <p class="class" id="id"></p>
ul>li{我是内容}*3 ---> <ul>
      			  <li>我是内容</li>
     			  <li>我是内容</li>
   			  <li>我是内容</li>
		     </ul>  

元素的显示模式

块级元素：

• 独占一行（一行只能显示一个）
• 宽度默认是父元素的宽度，高度默认由内容撑开
• 可以设置宽高

div,h1~h6,ul,li,p,ol,dl,dt,dd,header,nav,main,footer,form...

行内元素:

• 一行可以显示多个
• 宽度和高度默认由内容撑开
• 不可以设置宽高

span,b,u,i,em,strong

行内块元素

• 一行可以显示多个
• 可以设置宽高

input,textarea,select,button,img（img检查是行内元素，但是有行内块的特性）

元素嵌套规范

1. 块元素一般作为大容器，可以嵌套文本、块元素、行内元素、行内块元素等...

   注意：p标签里不能嵌套p,div,h等块级元素
   

2. a标签内可以嵌套任意标签

   注意：但是a标签不能嵌套a标签
   

3. 行内元素里不要嵌套块元素