关于css伪类选择器
2016-09-23 18:22
337 查看
常见的伪类(pseudo-classes)和伪元素(pseudo-elements)
伪类::hover 鼠标放上去的效果
:actiive 点击之后效果
伪元素
:before
:after
清浮动:
::selection 伪类选择器。
::selection 选择器匹配被用户选取的选取是部分,即用户鼠标去手动选择的部分。
只能向 ::selection 选择器应用少量 CSS 属性:color、background、cursor 以及 outline。
伪类::hover 鼠标放上去的效果
:actiive 点击之后效果
伪元素
:before
:after
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } ul{ width:1000px; margin: 0 auto; counter-reset:li; } li{ list-style: none; } ul>li{ background-color: #ccc; margin-top: 10px; } ul>li:before{ content: counter(li); counter-increment:li; background-color: #333; border-radius:100%; padding: 0 5px; color: #fff; margin-right: 10px; } .test{ width: 200px; height: 200px; background: #000; color: #fff; } .test:before{ content: " "; color: red; width: 20px; height: 20px; background: #fff; float: left; } .test:after{ content:" "; color: green; width: 20px; height: 20px; background: #fff; float: right; } </style> </head> <body> <div class="test"> hhhkjkkj </div> <ul> <li>List item one</li> <li>The second item on the list</li> <li>Number three is a bit longer, with some lorem ipsum for good measure. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li> <li>And here is number four.</li> <li>The fifth item on the list</li> <li>The sixth item on the list</li> </ul> </body> </html>
清浮动:
.clearfix{zoom:1;} .clearfix:after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}
::selection 伪类选择器。
::selection 选择器匹配被用户选取的选取是部分,即用户鼠标去手动选择的部分。
只能向 ::selection 选择器应用少量 CSS 属性:color、background、cursor 以及 outline。
相关文章推荐
- 大转盘抽奖css3+js(简单书写)
- 为您详细比较三个 CSS 预处理器(框架):Sass、LESS 和 Stylus
- CSS样式小笔记
- 修改select默认样式
- [Coding Style] CSS coding style
- Eclipse/Myeclipse中java代码导入注释模板样式
- css实现图片等比例缩小不变形
- 使用RemoteViews自定义通知栏样式 Notification
- CSS3前缀和rem
- CSS边框与背景
- css中的度量单位
- CSS盒模型
- CSS其他样式
- CSS字体文本样式
- 选择器
- 下部选项卡使用的图标,点击时改变颜色.css雪碧图
- css之align 与 valign 的用法比较
- 关于浏览器渲染页面的机制介绍
- DIV+CSS布局实战---海南旅游网
- CSS定位和DIV布局