Css3选择器相关:
section > div直接子元素选择器
div + article相邻兄弟选择器(在元素之后出现)
div ~ article通用兄弟选择器(在元素之后出现)
属性选择器:
a[href] {
text-decoration: none;
}
a[href="#"] {
color: #f00;
}
/*包含two且属性值用空格分隔:*/
a[class~="two"] {
color: #ff0;
}
/*属性的第一个值以#开头:*/
a[href^="#"] {
color: #0f0;
}
/*以#结尾:*/
a[href$="#"] {
color: #00f;
}
/*包含#:*/
a[href*="#"] {
color: #0ff;
}
/*第一个属性值以#-开头:*/
a[href|="#"] {
color: #f0f;
}
专门建立的学习Q-q-u-n: 731771211,分享学习方法和需要注意的小细节,不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)
UI元素伪类:
Input:disabled
Input:enabled
Input:checked
div:first-child匹配属于其父元素的第1个子元素且是div,计数时不分类型,显示时分类型
div:last-child匹配属于其父元素的最后1个子元素且是div,计数时不分类型,显示时分类型div:nth-child(2) 匹配属于其父元素的第n个子元素且是div,计数时不分类型,显示时分类型div:nth-lat-child(2) 匹配属于其父元素的第n个子元素且是div,计数时不分类型,显示时分类型
n匹配下标,从0开始计算:
li:nth-child(2n) 双数
li:nth-child(2n+1) 单数
li:nth-child(n+4)
li:nth-child(odd) 奇数,下标从1开始计算
li:nth-child(even) 偶数,下标从1开始计算
li:nth-last-child(3) 倒数第3个
article:only-child 属于父元素的唯一元素,且是article(没有任何其他子元素)
div:nth-of-type(2) 匹配属于其父元素的第2个子元素且是div,计数时分类型
div:nth-last-of-type(2)
div:first-of-type div:last-of-type
article:only-of-type 属于父元素的唯一article元素(可以有其他类型的子元素)
div:empty 没有子元素的div元素(包括文本也没有)
a:not(:last-of-type) 不是最后一个a子元素
id选择器权重大于属性选择器
.red > [class=”red”]
Css伪元素:
div::selection 文本被选中后的样式
::-moz-selection 火狐
Css3****边框与圆角:
四个值按照顺时针方向来
Border-radius兼容性写法:
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
box-shadow水平偏移 垂直偏移 模糊 扩展 颜色 内部
box-shadow: 50px 30px 0px 0px yellow inset;
border-image-repeat:stretch(拉伸)/repeat(重复)/round&#x