HTML5类选择器使用,CSS选择器种类及使用方法

CSS选择器种类及使用方法

2018年04月17日

| 萬仟网IT编程

 | 我要评论

css选择器 有通配符选择器书写格式：*+｛声名块｝ 并集选择器/组合选择器 书写格式;元素或类或id+“”+元素或类或id+“，”+元素或类或id｛声明块｝ 列：h1，h2，h3｛color：red；｝ 层次选择器 ： 子集选择器： 格式:父级元素名称+">"+子级元素名称+{声明块} 例:div ...

css选择器

有通配符选择器书写格式：*+｛声名块｝

并集选择器/组合选择器 书写格式;元素或类或id+“”+元素或类或id+“，”+元素或类或id｛声明块｝

列：h1，h2，h3｛color：red；｝

层次选择器 ：

子集选择器： 格式:父级元素名称+">"+子级元素名称+{声明块}

例:div>p{color:red;}

后代选择器： 格式:祖先元素名称+空格+后代元素名称+{声明块}

例:div p{color:red;}

兄第选择器： 格式: A元素名称+"+"+B元素名称+{声明块}

例:div+P{color:red;} 注:选择A元素后的B元素,AB之间不许有其他元素.

通用选择器： 格式:同级元素A+"~"+同级元素B+{声明块}

例:div~p{color:red;} 注:表示选择与A元素同级别的所有B元素(B的位置是在A后面)。

伪类选择器

动态伪类选择器未访问 (把默认值改为黑色)；

a:link{color:black;}

鼠标悬停

a:hover{color:pink;}

鼠标点击时

a:active{color:green;}

点击后

a:visited{color:五颜六色;}；

注:hover是可以用于多个元素身上的,但其他三个只能用于具有点击功能的元素上。

a:focus{color:颜色;}

多用于输入框或链接(注:IE7以前不支持:focus注；IE6以前不支持:hover :active)

以上5个的顺序要求: A:link,visited,focus,hover,active

B:visited,link,focus,hover,active

结构伪类选择器

格式:元素名称+":nth-child(n)"+{声明块} 例:section:nth-child(2){color:deeppink;}

表示选中html里的第二个section元素,文字设置为deeppink

选中第一个 格式:元素名称+":first-child"+{声明块} 例:p:first-child{color:red;}

选中最后一个 格式:元素名称+":last-child"+{声明块} 例:p:last-child{color:red;}

选中奇数项 格式:元素名称+":nth-child(odd)"+{声明块} 例:section:nth-child(odd){color:red;}

选中偶数项 格式:元素名称+":nth-child(even)"+{声明块} 例:section:nth-child(even){color:red;}

伪元素选择器

元素后面加内容

格式:元素名称+":after"+{content:"要添加的内容";} 例:i:after{content:"姓名";}

元素前面加内容

格式:元素名称+":before"+{content:"要添加的内容";} 例:i:before{content:"姓名";}

元素第一行添加样式

格式:元素名称+":first-line"+{声明块} 例:p:first-line{color:red;}

元素第一个字母或第一个汉字

格式:元素名称+":first-letter"+{声明块} 例:p:first-letter{color:red;}

注:为了解决兼容性,伪元素选择器,建议打两个冒号

版权声明：本文内容由互联网用户贡献，该文观点仅代表作者本人。本站仅提供信息存储服务，不拥有所有权，不承担相关法律责任。

如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 2386932994@qq.com 举报，一经查实将立刻删除。

相关文章:

1、数组去重的方法(例 var arr = [1,2,4,6,4,2,1]);

1、第一种方法

本篇文章主要介绍【HTML5】3D模型--百行代码实现旋转立体魔方实例，具有一定的参考价值，有需要的可以了解一下。... 16-12-16

作为一个视频编码小白，最近开始着手啃HEVC帧间预测的代码，想用博客记录一下自己的学习过程，也想与大家分享、交流...

一款网页瀑布流效果，可以实现图片的无限制加载。基于时下流行的HTML5技术编写而成，除了实现瀑布流，还加入了CSS5的图片修饰效果，比如图片的圆角边框、图片阴影...

HTTP中get和post的区别 GET 从指定的资源请求数据。 POST 向指定的资源提交要被处理的数据 | | GET | POST | | |...

下面小编就为大家带来一篇HTML5不支持标签和新增标签详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧... 16-06-27...

新手一枚，解决的问题喜欢记录，也许正好有人在网上迷茫的百度着。-0- 最近使用Chart.js做折线图的报表展示，直接显示整数啥的很好弄毕竟例子直接...

这篇文章主要介绍了HTML5 canvas绘制的玫瑰花效果,适合程序猿在情节送给小女友哦,需要的朋友参考下吧... 14-05-29

最近遇到这方面知识，就自己找了一些资料，进行了一些总结 什么是分段传输？ 当引入了一个http首部。这个首部标识了实体采用chunked编码传输，c...

网友评论

验证码：