实训笔记day04

实习第四天笔记

---

综合选择器

后代选择器

后代选择的使用方法：d1 span {}（父代与子代之间用“空格”隔开）

我是子级span

我是孙级span

我是重孙子span

交集选择器

交集选择器的使用方法：

div.di {}：选中class值为di的div标签

em#i1 {}：选中id值为i1的em标签

我的名字叫d1，我是一个div

我的名字也是d1 ，但是我是一个h1

我是em，我的名字也是d1

我是一个没有名字的div

并集选择器

并集选择器的使用方法：

d1,#s1,p,em {}：标签名或class名或id名用“,”隔开。

/选中所有class名为d1 和 id名为s1 和 标签名为p，em的标签/

小和尚下山去化斋

连言有交代

山下的沈钰是老虎

2232323

子元素选择器

子元素选择器的使用方法：

#fa>em {}：选中id为fa的标签的直系子em标签

/选中二级em标签/

我是二级em

我是三级em

我是四级em

序列选择器

ul li {}：选择无序列表

ol li {}：选择有序列表

ul li:first-child{}：选择无序列表的第一个

ul li:last-child{}：选择无序列表的最后一个

• li1


• li2


• li3


• li4


• li5

1. li11


2. li22


3. li33

兄弟选择器

相邻兄弟选择器：div+p {} 选择同一级且在div之后紧挨div标签的p标签。（两个兄弟标签中间不能有其他标签插入）

普通兄弟选择器：div~p {} 选择同一级且在div之后的p标签。（兄弟标签之间不必紧挨）

我是div

我是p标签

我是第二个p标签

css的继承性

父元素的某些css属性会被子元素无条件的继承过去。

关于文字的css属性都可被继承：color，text-，line-，font-。

hello,world

css的层叠性

层叠能够解决css冲突的问题，通过比较权重的方式。

选择器权重大小：id > class > html （数量相同比较下一个）

示例1：

文字颜色

示例2：

文字颜色

示例3：

猜猜我是什么颜色?

示例4：

!important 的作用

hello,world

<1-- !important能够把“单独属性”的权重变为无限大，尽量少用 -->

块级元素和行内元素

块级元素和行内元素的区别

1. 行内元素不能够设置宽度和高度，行内元素的宽度和高度是标签内容的宽度和高度；块级元素可以设置宽度和高度。
2. 块级元素会独占一行，而行内元素却不能独占一行，只能和其他的行内元素共用一行。
3. 如果块级元素不设置宽度，那么块级元素会自动占满父元素的全部宽度。

目前所知道的行内元素和块级元素有：

块级元素和行内元素之间的转换

通过display属性，inline把块级元素变成行内元素，block把行内元素变成块级元素。

Hello,Div

hello,Span

而display的inline-block值可以变成行内块元素。

两个行内块元素之间会有一条约3px的缝，可以使用float属性去掉。

hello,Em 百度

---