Html5与Css3颜色和选择器（五）

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}

这里写图片描述

Html5与Css3颜色和选择器（五）

css3更新的颜色

使用与媒体相关的样式表

定义选择器

伪元素、伪类

按状态选择链接

按属性选择元素

结构性伪类选择器

UI元素状态伪类选择器

enabled和disabled

浏览过的版块