HTML5新标签和CSS伪类

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值里面的内容

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

原文地址:https://www.cnblogs.com/zjfman/p/11493559.html

时间: 2024-10-07 08:25:52

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

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

CSS伪类,是一种特殊的类,它针对到CSS选择器起作用,使选中的标签或元素产生特定的效果. CSS伪类的语法就是: 选择器 : 伪类名 { 属性 : 属性值 } 用的最多的伪类就是超链接a的伪类,有:link,:visited,:hover,:active,而且需要按照这个顺序设置,有个简单的记法是,取首字母组成 love hate,记住“爱恨”就行了. 1,  查看超链接a标签的默认样式 新建一个网页a.html,复制下面的内容: <html> <head> </head&

第十二节课,css伪类 (转)

一.特殊选择器 1.* 用于匹配任何的标记 2.> 用于指定父子节点关系 3.E + F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F 4.E ~ F 匹配所有E元素之后的同级元素F 5.名称[表达式] 5.1 E[att] 匹配所有具有att属性的E元素([att]获取所有的定义了att的标签:E[att=val] 匹配所有att属性等于“val”的E元素: 5.2 [att=val] 获取所有定义了att属性并且属性值等于val的标签: 5.3 [att^=val]获取所有定义了att

html5新标签及废弃元素

html5新标签 <canvas> 新元素 标签 描述 <canvas> 标签定义图形,比如图表和其他图像.该标签基于 JavaScript 的绘图 API 新多媒体元素 标签 描述 <audio> 定义音频内容 <video> 定义视频(video 或者 movie) <source> 定义多媒体资源 <video> 和 <audio> <embed> 定义嵌入的内容,比如插件. <track>

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

HTML5规范毕竟是刚刚才定义完成的规范,还有一些浏览器并不能支持其中的新标签和新属性,尤其是IE8及以下版本浏览器.以下介绍一些在页面中使用HTML5新标签的实践方法,目的是让HTML5中的新标签在低级浏览器中也得到有限的支持,不至于影响整个的页面功能. 让浏览器识别HTML5规范中的新标签 IE8浏览器中还没有添加对HTML5新标签的支持,所以在IE8中无法直接展现HTML5新标签中的内容.庆幸的是IE8/IE7/IE6支持通过document.createElement方法产生的标签,可以

CSS伪类和伪元素

一.伪类 CSS伪类用于向某些选择器添加特殊的效果,在W3C规范中,CSS伪类有如下几个: :active:向被激活的元素添加样式(激活是指点击鼠标那一下) :focus:向拥有键盘输入焦点的元素增加样式 :hover:当鼠标悬浮在元素上方时,向元素增加样式 :link:向未被访问的链接增加样式 :visited:向已被访问的链接增加样式 :first-child:向元素的第一个子元素增加样式 :lang:向带有指定lang属性的元素增加样式 提示: 1.伪类名称对大小写不敏感.比如:ACTIV

HTML转义字符 Unicode和CSS伪类介绍

CSS 伪类用于向某些选择器添加特殊的效果. a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */ p:first-child {font-weight: bold;} /* 伪类来选择元素的第一个子元素 */ a:focus {color:

css伪类和伪元素属性

对css中基本选择器和属性选择器以及伪类选择器做了总结,但是提到伪类,与之相对应的必然是伪元素. 那么,,,二者到底有什么不能说的秘密呢?接下来 先归类下两者 伪类的种类: 伪元素的种类: 两者的使用方法: css3 为了区分两者,已经明确规定了伪类用一个冒号来表示,而伪元素则用两个冒号来表示. :Pseudo-classes  伪类 ::Pseudo-elements 伪元素 但因为兼容性问题,现在大部分两者还是统一用单冒号,但抛开兼容性问题,我们书写时应尽量养成良好习惯,区分两者. 二者区别

css伪类和logo部分效果实现

css伪类及logo插入图 关于css的一些小知识点 伪类 伪类的权重与类的权重相同. 伪类有权重,a:link---a:visited---a:hover---a:active 工作中为了用户体验,link和visited状态一样,hover状态不同,active不写. a选择器:color, text-decoration两个属性不能去继承更改. 文字换插入图 background-image背景图片: 重复加载在border以内的区域. background: url(pic.jpg) n

CSS伪类的理解

因为之前一直对css伪类没有过多的了解,在网上看到一段css代码,不能理解 a:hover span.title{ color:red; ......... } 现通过查询css手册,其实css伪类只是表示了一种状态,a:hover只是表示了鼠标悬浮状态下的a标签,和一般的a标签用法没有区别,a:hover span.title即表示为鼠标悬浮状态的a标签的span的样式,和a span.title 用法没有区别