学习笔记与总结

2017年10月10日

学习笔记与总结

1.css中的选择器（补充）

（1）交集选择器：

交集选择器----多个选择器共同包含的元素

语法：多个选择起连续书写，没空间隔。

（一般适用于class）

p.text{

color: #ff7300;

}

（2）并集选择器

并集选择器 多个选择器所有匹配的元素

语法：多个选择器连续书写，用逗号行进分割

#container p,span,em,strong{

color: red;

}

（3）相邻兄弟选择器

相邻兄弟选择器

同父元素的相邻兄弟元素 必须是严格相邻（向下一个元素）

不允许出现其他元素间隔

h1+p{

color: red;

}

（4）通用兄弟选择器

通用兄弟选择器 所有的同级兄弟元素

h1~p{

color: red;

}

（5）后代选择器

后代选择器 选择指定元素里的所有匹配后代元素

写法：用空格进行间隔

div p{

color: red;

}

（6）子代选择器

子代选择器 选择指定元素后的所有直接子代

写法：用>进行间隔

div > p {

color: #ff7300;

}

（7）属性选择器

匹配所有属性值以xxx开头的

p[id^=j]{

color: red;

}

匹配所有属性值以xxx结尾的元素

p[id$=u]{

color: #ff7300;

}

匹配属性值包含xxx的元素

p[id*=y]{

color: coral;

}

匹配所有属性值等于xxx的元素

p[id=hhy]{

color: darkorchid;

}

属性选择器可以匹配任意一个属性

input[value=hhy]{

color: darkslateblue;

}

（8）伪类选择器1

选中同级别中的第一个元素 如果元素匹配则生效

p:first-child{

color: red;

}

选中同级别且同类型中的第一个元素 只会查找匹配元素第一个

p:first-of-type{

color: #ff7300;

}

选择同级别中的最后一个元素 如果元素匹配则生效

p:last-child{

color: coral;

}

选中同级别且同类型中的最后一个元素 只会查找匹配元素最后一个

P:last-of-type{

color: seagreen;

}

（9）伪类选择器2

选中同级别中的第n个元素 如果元素匹配则生效

p:nth-child(4){

color: #ff7300;

}

选中同级别且同类型中的第n元素 只会查找匹配元素第n个

p:nth-of-type(3){

color: rosybrown;

}

选中同级别中的倒数第n个元素 如果元素匹配则生效

p:nth-last-child(2){

color: yellow;

}

选中同级别且同类型中的倒数第n个元素 只会查找匹配元素倒数第n个

p:nth-last-of-type(2){

color: yellow;

}

（10）伪类选择器3

选中同级别中的只有一个的元素 如果元素匹配则生效

p:only-child{

color: brown;

}

选中同级别且同类型中的只有一个的元素

p:only-of-type{

color: blue;

}

（11）状态伪类选择器

被禁用的元素

input:disabled{

color: #ff7300;

}

可操纵的元素

input:enabled{

color: seagreen;

}

option:checked{

color: #ff7300;

}

所有被选择激活的元素 后面紧跟的label元素变色

input:checked+label{

color: #ff7300;

}

select{

color: red;

}

option:not(checked){

color: black;

}

p:not([id=text2]){

color: #ff7300;

}

（12）其他选择器target

:target 伪类用来操作所有被指定为锚点的元素

p:target{

height: 20px;

line-height: 20px;

background-color: #ff7300;

}

2.背景图片知识点补充

/*定义背景图片显示起始位置*/

background-origin:border-box;

（padding-box;content-box;）

/*定义背景图片剪切的起始位置*/

background-clip: content-box;

（padding-box;content-box;）

3.Transform变形效果

过渡效果

参数1：用来指定对哪些属性使用过度效果

参数2：过渡效果的持续时间

参数3：过渡效果的显示速度变化

参数4：用来指定过渡效果的延迟时间

transition: all 1s linear 3s;

translate：让元素在X轴和Y轴方向发生偏移 参数1：X轴方向 参数2：Y轴方向

translateX translateY

transform: translate(50px,50px);

scale：让元素在X轴和Y轴方向上发生缩放 参数1：X轴方向 参数2：Y轴方向

scaleX scaleX

transform: scale(1.5);

rotate：让元素按照指定中心点进行旋转旋转

若不设置则默认围绕中心点开始旋转

rotateX rotateY

transform: rotate(180deg);

以圆心为操作点，对图片进行一个旋转的拉伸

skewx skewy

transform: skew(60deg);

设置旋转缩放等操作点的操作位置

transform-origin: left top;

联系中有用的知识

凡是属性值为布尔类型的 如果想生效 它的取值可以有以下几种

1：ture

2：属性值等于属性名

3：直接赋值一个空字符串

4：只写属性名

<input type="text" value="hyhyhy" disabled>

<label> 标签为 input 元素定义标注（标记）。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。

如果您在 label 元素内点击文本，就会触发此控件。

就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

<input type="radio" name="sex" checked id="boy">

<label for="boy">男</label>

所有的元素都可以用来定义一个锚点 锚点的指定可以通过两个属性 name和id

name不常用 部分浏览器不支持通过name来指定锚点

比较通用的方法是同时定义name和id

只需要将name和id的属性值定为一个即可

em 和 rem

/*操作一个段落的首个字符*/

p::first-letter{

color: #ff7300;

font-size: 25px;

}

/*操作一个段落的首行*/

p:first-line{

color: #cccccc;

}

em：字体大小会受到父元素字体大小的影响

rem：只会受到根元素（html）字体大小的影响

可以做到修改一次字体大小而影响整个页面的字体大小

可以通过它来实现一键换字体