第二天HTML/CSS笔记

1.css的三种引入方式

a.行间引入(不推荐使用)---->

<div style="background-color: pink;">

哈哈哈哈哈

</div>

b.内部引入---->

在head中,设置

<style type="text/css">

div{

height: 200px;

}

</style>

c.外部引入---->

定义xx.css文件,使用link,引入html文件中!!!

2.选择器

a.标签名选择器    直接写标签的名字,找的是本文档中所有的此标签.

b.id选择器    #box  #div1等,id不要重复

c.class选择器    .c1  .c2等

d.群组选择器      选择器名字, 选择器名字,...   

e.后代选择器      空格 例如:  #box  a{ } 

f.子代选择器      > 例如:  #box>a{ }

g.兄弟选择器    +  例如: div+p{}  找的是跟div相邻的p标签

h.伪类选择器    :hover  例如:  p:hover{}  一旦鼠标移入p标签上,会立马执行hover中的样式!!!

3.选择器的优先级(从高到低)

a. !important

b. id选择器

c. class选择器

c. 标签名选择器

4.nth-child和nth-of-type

区别:

nth-child  不能分类查找!!

nth-of-type  会先对要查找的标签进行筛选,然后再查找!!!

a.第一个

标签名:first-child{

}

标签名:first-of-type{

}

b.最后一个

标签名:last-child{

}

标签名:last-of-type{

}

c.某一个

标签名:nth-child(3){

}

标签名:nth-of-type(4){

}

d.奇数位置  2n+1/ 2n-1/  odd

标签名:nth-child(odd){

}

标签名:nth-of-type(odd{

}

e.偶数位置  2n  even

标签名:nth-child(2n){

}

标签名:nth-of-type(even){

}

f.任意倍数位置    3n/ 4n/ 5n 等....

标签名:nth-child(3n){

}

标签名:nth-of-type(4n){

}