HTML5提供了很多新的标签,由于HTML5的兼容性比较差,HTML5的标签常用于手机端

<nav>
<footer>
<section>
<header>
<article>
<aside>
更多HTML5新标签可以看W3Cschool

CSS3结构伪类选择器

:first-child 选中第一个元素

:last-child 选中最后一个元素

:nth-child(n) 选中第几个元素 其中n除了填写数字代表第几个元素外,填写n代表选择所有元素,2n代表选择所有偶数元素,2n-1代表选择所有奇数元素,even代表选择偶数元素,odd代表选择奇数元素

4n代表选择4的倍数的元素。。。。。

CSS3属性选择器

div[class] 选择div标签所有有类的元素

div[class^=test] 选择div标签的类的名字以test开头的元素

div[class$=test] 选择div标签的类的名字以test结尾的元素

CSS3伪元素选择器

p::first-letter 选中段落第一个字

p::first-line 选中段落第行字

p::selection 鼠标选中时段落的元素变化

!!!!!!重点!!!!!!!

p::after 和p::before(必须带content值)

::after在元素内部的后面插入content值里面的内容

::before在元素内部的前面插入content值里面的内容

其中插入的为一个行内元素盒子

HTML5新标签和CSS伪类的更多相关文章

  1. 超链接标签的CSS伪类link,visited,hover,active

    CSS伪类,是一种特殊的类,它针对到CSS选择器起作用,使选中的标签或元素产生特定的效果. CSS伪类的语法就是: 选择器 : 伪类名 { 属性 : 属性值 } 用的最多的伪类就是超链接a的伪类,有: ...

  2. 12、第十二节课,css伪类 (转)

    一.特殊选择器 1.* 用于匹配任何的标记 2.> 用于指定父子节点关系 3.E + F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F 4.E ~ F 匹配所有E元素之后的同级元素F 5. ...

  3. js动态改变css伪类样式

    首先我们来看下页面上需要实现的基本效果,如下图所示: 因此我们可以使用如下js代码来试试看,是否能使用js改变伪类?如下代码所示: $(function() { $('.listnav li').cl ...

  4. 谈谈css伪类与伪元素

    前端er们大都或多或少地接触过CSS伪类和伪元素,比如最常见的:focus.:hover以及<a>标签的:link.:visited等,伪元素较常见的比如:before.:after等. ...

  5. html5\CSS3有哪些新特性、移除了哪些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分HTML和HTML5?

    (1)HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,地理定位等功能的增加. 绘画canvas元素: 用于媒介回放的video和audio元素: 本地离线存储localStorage ...

  6. 【HTML5】如何处理HTML5新标签的浏览器兼容版问题

    HTML5规范毕竟是刚刚才定义完成的规范,还有一些浏览器并不能支持其中的新标签和新属性,尤其是IE8及以下版本浏览器.以下介绍一些在页面中使用HTML5新标签的实践方法,目的是让HTML5中的新标签在 ...

  7. CSS伪类和伪元素

    一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3规范中,CSS伪类有如下几个: CSS2.1 :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦 ...

  8. CSS 伪类 (Pseudo-classes)

    CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪类 (Pseudo-classes)实例: 超链接 本例演示如何向文档中的超链接添加不同的颜色. 超链接 2 本例演示如何向超链接添加其他样式. ...

  9. CSS伪类与CSS伪元素的区别及由来

    关于两者的区别,其实是很古老的问题.但是时至今日,由于各种网络误传以及一些不负责任的书籍误笔,仍然有相当多的人将伪类与伪元素混为一谈,甚至不乏很多CSS老手.早些年刚入行的时候,我自己也被深深误导,因 ...

随机推荐

  1. 微信小程序的线程架构

    小程序的线程架构 每个小程序包含一个描述整体程序的app实例和多个描述页面的page. 其中app由3个文件构成: app.json 公共配置文件 app.wxss 公共样式文件 app.js 主体逻 ...

  2. Scrum冲刺第四篇

    一.每日例会 会议照片 成员 昨日已完成的工作 今日计划完成的工作 工作中遇到的困难 陈嘉欣 撰写博客,管理成员提交代码 和队友一同开发音乐控制模块 对音频控制方面知识了解少,功能实现困难 邓镇港 帮 ...

  3. mysql-5..6.23-win64.zip安装及配置

    MySQL是一个小巧玲珑但功能强大的数据库,目前十分流行.但是官网给出的安装包有两种格式,一个是msi格式,一个是zip格式的.很多人下了zip格式的解压发现没有setup.exe,面对一堆文件一头雾 ...

  4. 关于微信开发者工具创建项目和导入项目半天不响应或者socket hang out

    笔者的电脑系统是macOS Catalina(10.15),其实之前的系统版本也遇到一样的问题,网络环境是学校实验室. 解决办法:连接手机Wi-Fi 原理:目前不清楚,清楚的小伙伴可在下方留言交流

  5. infinity新标签页失效

    安装infinity新标签页后,无法生效,或者infinity新标签页突然失效了. 驱动精灵的问题 驱动精灵安装后,还会安装其它的软件,在卸载后,安装的软件还存在. 解决办法 光卸载驱动精灵还不够,还 ...

  6. Rust语言中的常量,变量,运算符,数据类型

    简单练练, 夏天太热. const MAX_POINTS: u32 = 100_100; fn main() { let mut x = 5; let y = 5; let y = y + 1; le ...

  7. Nacos 知识点

    Nacos 名字的由来(取红色的英文字符): Dynamic Naming and Configuration Service Nacos 是 Spring Cloud Alibaba 的一个组件,详 ...

  8. golang go get代理设置

    1.gopm 代替go 下载第三方依赖包 可以采用gopm从golang.org一些镜像网站上下载. a). 安装gopm go get -u github.com/gpmgo/gopm 可手动下载, ...

  9. BERT

    推出一个半月,斯坦福SQuAD问答榜单前六名都在使用BERT   BERT 成为了你做 NLP 时不得不用的模型了……吗? 今日,机器之心小编在刷 Twitter 时,发现斯坦福自然语言处理组的官方账 ...

  10. c#窗体之登录页(已连接数据库)

    效果图: 源码: 页面: using System; using System.Collections.Generic; using System.ComponentModel; using Syst ...