css3更新的颜色
RGBA:红、绿、蓝、不透明度
rgba(89,0,127,0.4);
HSL和HSLA:色相、饱和度、亮度、不透明度
hsl(282,100%,25%);
hsl(282,100%,25%,.75);
使用与媒体相关的样式表
link或style:添加属性media属性
有all、aural、braille、handheld、print、projection(投影设备)、screen、tty、tv
@media print{
body{
font-size:25pt;
}
p{
color:#000;
}
}
定义选择器
//元素的名称
h1{
color:red;
}
//元素所在上下文
h1 em{
color:red;
}
//类
.error{
color:red;
}
//ID
#gaudi{
color:red;
}
//名称和类
strong.error{
color:red;
}
//伪类
a:link{
color:red;
}
//属性
a[title]{
color:red;
}
//属性和属性值
a[href="http://xxx.com"]{
color:red;
}
只选择一代子元素:子子元素、非子子元素等不会选中
.architect > p {
color:red;
}
相邻同胞结合符:不必是同一种元素类型,只要彼此相邻就可以
//只有直接跟在同胞p元素后面的p元素显示为红色
.architect p+p{
color:red;
}
普通同胞结合符:选择并非直接出现在另一同胞元素,可以直接相邻,也可以不直接相邻
//会让任何属于同一父元素的同胞h1后面的h2元素显示为红色
h1~h2{
color:red;
}
选择某元素第一个和最后一个子元素
li:first-child{
color:red;
}
li:last-child{
color:red;
}
选择某元素第一个字母或者第一行
p:first-line{
color:red;
}
p:first-letter{
color:red;
}
第n个子元素
/*顺序*/
li:nth-child(3){
color:red;
}
/*逆序*/
li:nth-last-child(2){
color:blue;
}
/*分组设置简写*/
li:nth-child(4n+1){
color:bule;
}
奇偶
/*奇*/
li:nth-last-child(odd){
color:blue;
}
/*偶*/
li:nth-last-child(even){
color:blue;
}
/*只计算同类型的元素*/
h2:nth-of-type(odd){
color:red;
}
只有一个子元素
li:only child{
color:red;
}
伪元素、伪类
//是HTML并不存在的元素,并未在HTML中作相应的标记,是另一个元素的部分内容
::first-line/*第一行*/
::first-letter/*第一个字母*/
::before/*在某元素之前加*/
::after/*在某元素之后加*/
//应用于一组HTML元素,无需用类标记,不用写出class="first-child"
:first-child
:link
:hover
按状态选择链接
//新的、未访问的
a:link{
color:red;
}
//访问过
a:visited{
color:orange;
}
//获得焦点(通过Tab键)
a:focus{
color:purple;
}
//鼠标指针停留
a:hover{
color:green;
}
//激活时
a:active{
color:blue;
}
按属性选择元素
[attribute] //指定属性
[attribute="value"] //完全匹配属性值
[attribute~="value"] //匹配以空格分隔的多个单词,包括完全匹配指定值
artcle[class~="barcelona"]{
color:red;
}
[attribute|="value"] //以value-开头
h2[lang|="es"]{
color:red;
}
[attribute^="value"] //以value开头,为完整的单词或单词的一部分
a[href^="http://"]{
color:orange;
}
[attribute$="value"] //以value结尾,为完整的单词或单词的一部分
img[src="logo.png"]{
border:1px solid green;
}
[attribute*="value"] //至少包含value一次的元素,不必是属性值中的完整单词,为指定值的子字符串
a[href][title*="how"]{
color:red;
}
结构性伪类选择器
root,not,empty,target
允许根据文档中的结构来指定元素样式
/*根元素*/
:root{
background:red;
}
/*排除子元素*/
div *:not(h1){
coloe:red;
}
/*内容为空白时*/
:empty{
background:red;
}
/*跳转*/
:target{
background:red;
}
UI元素状态伪类选择器
css3中,有17种UI元素伪类选择器
/*鼠标浮动*/
input[type="text"]:hover{
color:red;
}
/*获得焦点*/
input[type="text"]:focus{
color:red;
}
/*鼠标按住不放*/
input[type="text"]:active{
color:red;
}
/*选中*/
input[type="checkbox"]:checkbox{
color:red;
}
enabled和disabled
input[type="text"]:enable{color:red;}
input[type="text"]:disabled{color:black}