H5学习第三天

一. 属性选择器：

a) E[attribute] 表示存在attr属性即可；

div[class]

b) E[attr=val] 表示属性值完全等于val；

div[class=mydemo]

c) E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置；

div[class*=mydemo]

d) E[attr^=val] 表示的属性值里包含val字符并且在“开始”位置；

div[class^=mydemo]

e) E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置；

div[class$=demos]

二、兄弟伪类

+：获取当前元素的相邻的满足条件的元素。

.first + li{
    color:red;//选择class=first元素的相邻（注意这个相邻必须是直接相邻，如果下一个兄弟是span标签的话，就找不到li）li元素
}

~：获取当前元素满足条件的所有兄弟元素。

.first ~ li{
    color:blue;//选择class=first元素的所有兄弟为li元素。
}



<li class="first">前端开发</li>
<li>C++</li>
<li>C#</li>
<li>java</li>
<li>javascript</li>

三、相对于父级元素的结构伪类

• E:first-child :
  找到E元素的父级元素中的第一个元素，这个第一个元素只有是E的时候样式才会生效，假如下面这种形式：使用 li:first-child ===>查找li的父级元素，ul的第一个元素，这个第一个元素必须是li，下面的代码，1的颜色不会变成红色，因为ul的第一个子元素不是li，而是div。

  li:first-child{
  color:red;
  }

  • 0000
  • 1
  • 2
  • 3

• E:last-child: 找到E元素的父级元素中的第一个元素，这个第一个元素只有是E的时候样式才会生效 .

• E:first-of-type: 找到E元素的父级元素中的第一个为E的元素。

• E:last-of-type: 找到E元素的父级元素中的最后一个为E的元素。

• E:nth-child(n): 第n个子元素，计算方法是E元素的全部兄弟元素，也可以为表达式2n等

• E:nth-last-child(n): 同E:nth-child(n) 相似，只是倒着计算

• E:nth-child(even): 所有的偶数

• E:nth-child(odd): 所有的奇数

• E:nth-of-type(n):指定类型

• E:empty 选中没有任何子节点的E元素，注意，空格也算有内容

• E:target 结合锚点进行使用，处于当前锚点的元素会被选中

• 重点说明：n遵循线性变化，其取值0、1、2、3、4、… 但是当n<=0时，选取无效

案例：

/*获取前5个li元素*/
li:nth-child(-n+5){
    background-color: red;
}

四、伪元素(::before ::after)

E::before、E::after(是不会在dom树中存在，因此不能用js来操作它们)

• 是一个行内元素，需要转换成块:display:block float:** position:
• 必须添加content,哪怕不设置内容，也需要content:””
• E::before: 定义在一个元素的内容之前插入content属性定义的内容与样式
• E::after: 定义在一个元素的内容之后插入content属性定义的内容与样式

::first-letter: 文本的第一个字或者字母

案例:实现首字母下沉

p::first-letter{
			//获取文本的第一个字
            font-size: 30px;
            color: red;
            font-weight: 700;
            //用float实现文本下沉
            float: left;
        }

 <p>我爱你，绝不像攀援的凌霄花，借你的高枝炫耀自己。<br>
    我爱你，绝不像痴情的鸟儿，为绿荫重复单调的歌曲</p>

• ::first-line 文本第一行（对已经有::first-letter的文字无效）
• ::selection 可改变选中文本的样式（对已经有::first-letter的文字无效）

五、透明度

关于透明度的补充说明：

a) opacity只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度

b) transparent 不可调节透明度，始终完全透明

c) 使用rgba 来控制颜色，相对opacity ，不具有继承性

六、阴影

text-shadow:[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)],[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)]…

注意：X轴是向右为正，Y轴向下为正。多个阴影中间用逗号隔开。

text-shadow：X-Offset Y-Offset Blur Color

• X-Offset表示阴影的水平偏移距离，其值为正值时阴影向右偏移，如果其值为负值时，阴影向左偏移；
• Y-Offset是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移反之其值是负值时阴影向顶部偏移；
• Blur是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；
• Color是指阴影的颜色，其可以使用rgba色

七、盒模型

盒子的真实宽度：内容的宽度+padding+border

问题：我们指定的width实际上是内容的宽度，当加上padding和border的时候，盒子的宽度会增加，此时会影响整体布局，可能会将后面的元素挤到别的地方去。

解决方法：H5提供了一种方法，盒模型（box-sizing），它有两个选项。

• content-box：默认。内容的高度，实际的盒子宽度，content+padding+border
• border-box：盒子的真实高度。已经包含了内容，padding，border。假如设置boxder-box:200px;再设置padding:10px solid red;此时内容的宽度就只有190px。padding和border挤掉的是内容的大小，维持了整体布局的稳定性。

八、边框圆角

border-radius可以通过值来定义样式相同的角，也对每个角分别定义

1. 值的说明：

border-radius：*px: 将创建四个大小一样的圆角

border-radius:*px *px *px *px: 四个值分别表示左上角、右上角、右下角、左下角

border-radius:*px *px：第一个值表示左上角、右下角；第二个值表示右上角、左下角

border-radius:*px *px *px：第一个值表示左上角；第二个值表示右上角、左下角；第三个值表示右下角

2. 要表示水平和垂直方向的偏移，用/

案例：画一个椭圆

div{
    width:200px;
    height:100px;
    background-color:red;
    border-radius:100px/50px;
}

还可以单独的设置每一个角的边框圆角。

*border-top-left-radius

• border-top-right-radius

• border-bottom-right-radius

• border-bottom-left-radius