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知识点拾遗(五)的更多相关文章

  1. Html5与Css3知识点拾遗(二)

    页面title 选择能简要概括文档内容的文字作为title文字,title核心内容放在前60个字符 分级标题 1.创建分级标题时,避免跳过级别,如h3直接跳到h5,但允许从低级别跳到高级别. 2.不用 ...

  2. Html5与Css3知识点拾遗(八)

    css5新增的元素与属性 表单内元素的属性 1. form属性 之前必须书写在表单内部.而在Html5中,可以放在任何位置,为元素指定一个form属性,属性值为该表单的id,就可以声明该元素属于指定表 ...

  3. Html5与Css3知识点拾遗(七)

    布局 实例:规范的命名和编排 <body> <div class="page"><!--page开始--> <header class=& ...

  4. Html5与Css3知识点拾遗(六)

    web字号 px() 百分比(较常用) em(最常用):一般1em=16px,相对单位.以父元素作参照系,父元素大小是不确定的 body{ font-size:100%; /*父元素默认为16px*/ ...

  5. Html5与Css3知识点拾遗(九)

    css布局 控制元素的显示类型和可见性 块级元素 dispaly:block: 行内元素(不能设置宽度) display:inline: 不接受padding设置,但padding-top和paddi ...

  6. Html5与Css3知识点拾遗(四)

    web图像 JPEG:适用于大多数照片,颜色较多,可接受质量损失的图像 PNG-8:适用标识.重复的图案以及其他颜色较少的图像或具有连续颜色的图像 PNG-24:不支持颜色更多的图像,适用与颜色丰富且 ...

  7. Html5与Css3知识点拾遗(三)

    文本 small:包括免责申明.注意事项.法律限制.版权信息,只适用于短于,常包含在页面级的footer里 H5对i和b的重新定义 b:提醒文字.不传达任何额外的语气.文档摘要关键词.评论中的产品名. ...

  8. Html5与Css3知识点拾遗(一)

    1.元素 空元素: 可选的空格空格和斜杠 <img src="x.jpg" width="300" alt="pic" /> & ...

  9. HTML5与CSS3知识点总结

    好好学习,天天向上 本文已收录至我的Github仓库DayDayUP:github.com/RobodLee/DayDayUP,欢迎Star 原文链接:https://blog.csdn.net/we ...

随机推荐

  1. redis集群相关

    1.主从数据库配置 为master数据库添加slave数据库只需要在从数据库的配置中添加配置: slaveof 主数据库地址 主数据库端口 当然,也可以通过命令: redis-server --por ...

  2. Redis梳理

  3. Maven私服(Nexus)启动创建Windows服务

    sc create lutao-maven-nexus binpath= D:\maven-server\nexus--\bin\nexus.exe type= own start= auto dis ...

  4. JAVA Maven 安装 jar 包到本地仓库,以 Oracle11g 的访问包 为例

    maven 作为 java 的首选包管理工具,使我们在创建和维护项目的时候变得十分简单,但是 maven 仓库并不是拥有的一切 jar 包的, 很多 jar 包由于收费或者版权什么的其他原因,并不存在 ...

  5. python接收html页面上传的文件

    使用的 flask, 没有安装的先安装 pip install flask 示例代码:示例没有自动创建静态文件夹,需要自己在同级 创建一个名为 static 的文件夹来存放上传的文件 示例展示为图片 ...

  6. block引用外部变量原理

    block在赋值时才会生成对应的block结构体实例(结构体数据结构在编译时已经生成),赋值时会扫一遍里面引用的外部变量(嵌套block中的外部变量也算,只不过嵌套block中的外部变量会被内外两个b ...

  7. nexus的安装和简介

    下载nexus Nexus 是Maven仓库管理器,通过nexus可以搭建maven仓库,同时nexus还提供强大的仓库管理功能,构件搜索功能等. 下载Nexus, 下载地址:http://www.s ...

  8. 获取当前页面url

    function getCurrUrl() { var url = ""; if (parent !== window) { try { url = window.top.loca ...

  9. spfa与dijkstra(最短路)

    spfa: void spfa(){ queue<int> que; while(!que.empty()){que.pop();} que.push(s); vis[s]=; while ...

  10. Windows导入EOS工程

    [Windows导入EOS工程] 编写 EOS 智能合约时,有许多EOS提供的结构.函数.宏.文档对这些内容的描述毕竟模糊,再多的文档也比不过看实际的代码,所以还要下载EOS代码看一下. 最好有个ID ...