css高级选择器&盒模型

1.组合选择器

群组选择器

/* 每个选择器为可以为三种基础选择器的任意一个，用逗号隔开，控制多个*/
div,.div,#div{
    color:red
}

后代(子代)选择器

/*后代选择器:用空格将父级和子级连接*/
.sup .sub{
    color:red
}

/*子代选择器:用 > 将父级和子级连接,即父级 > 子级*/
.sup > .sub{
    color:red
}

1.子代选择器是（一级嵌套关系）

2.后代选择器（一级或者多级嵌套关系）

兄弟(相邻)选择器

/*兄弟选择器:用~连接*/
.up ~ .down{
    color:red
}

/*相邻选择器:用+连接*/
.up + .down{
    color:red
}

1.相邻选择器必须为直接相邻关系（必须挨着）

2.兄弟选择器可以为直接或者间接相邻关系（必须是同一级，可以相邻，也可以相间）

交集选择器

<div class="ss" id="dd"></div>

div.ss.#dd{
    color:red
}

2.复杂选择器的优先等级

1.与修饰符位置无关

2.属性选择器与类选择器的优先级相同

3.优先级大前提: id选择器   无限大于    类选择器[属性选择器]   无限大于  标签选择器

4.优先级权重:

            if id个数多,则优先级高,else 判断类选择器个数
            if 类选择器个数多,则优先级高,else 判断标签选择器个数
            if 标签选择器个数多,则优先级高,else 个数和类型均相同则由位置决定

3.伪类标签选择器

a标签四大伪类选择器

/*悬浮: 鼠标悬浮到链接上，链接显示红色*/
a:hover{color:red}

/*访问时: 访问链接时,链接显示为绿色*/
a:active{color:green}

/*未访问: 未访问链接时,链接为蓝色*/
a:link{color:blue}

/*已访问状态: 访问过链接后,链接为黑色    注意浏览器会有记录*/
a:visiter{color:black}

索引伪类选择器

/*位置优先: 每层结构中第一取出来，再匹配标签是否是section*/
section:nth-child(3)

/*类型优先: 每层结构中先取出标签为section,然后在取出的section中匹配位置第一的*/
section:nth-of-type(1)

1. 位置: 最后一个为last-child()

2. 类型: 最后一个为last-of-type()

取反伪类选择器

/*先确定对谁取反，然后加上not*/
:not(nth-child(2))

4.盒模型

# 什么是盒模型？

通配选择器能够控制的页面标签都是盒模型（一般我们操作的都是块级标签）

# 盒模型由什么作用？

页面书写的标签初始状态级别都不能满足显示要求，需要再次再次修改，修改的就是盒模型的各个属性。

# 盒模型组成部分？

content(内容) + padding (内边框) + border (外边框) + margin(边距)

content（内容）

1.通过设置 width 和 height 来规定content

2.块级标签可以设置自身宽高,默认宽为父级宽(width=auto),高为0,高度可以由内容决定

3.内联标签不可以设置自身宽高,默认宽高均为0,宽高一定由内容决定

4.是子标签或子内容的显示区域

# 1.参与盒子显示，颜色为background-color

padding (内边框)

# padding 组成:

  padding-top|right|bottom|left

# 1.参与盒子显示,颜色为背景色

border (外边)

# border 组成
1.border-width

    border-top|right|tobbom|left-width

2.border-color

  border-top|right|tobbom|left-color

3.border-style

  border-top|right|tobbom|left-style

# 1.border: 参与盒子显示,颜色由自己定义（transparent 为透明）

margin (边距)

# margin 组成

  margin-top|right|bottom|left

# 1.没有颜色，不参与盒子显示，决定何止布局（位置信息）

margin坑一：父子联动

当上下移动子box时，父级的box也会跟着移动

/*解决方法：固定父级box的dorder或者padding*/
  .sup{
        border-top:1px solid transparent
  }
/*解决方法二*/
.sup{
    padding-top:1px ;
}

margin坑二：上兄弟margin-bottom与下兄弟margin-top重合

解决方法：只设置一个，建议设置下兄弟的margin-top

巴特西

css高级选择器&盒模型

css高级选择器&盒模型

1.组合选择器

2.复杂选择器的优先等级

3.伪类标签选择器

4.盒模型

最新文章

热门文章