CSS的选择器
2016-08-31 17:05
363 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS常见的选择器</title> <style> /*标签选择器*/ div{ color: red; } p{ color: blue; } /*类选择器*/ .text1 { color: aquamarine; } /*id选择器*/ #main { font-size: 100px; } /*并列选择器*/ #main, .text1 { border:1px solid rosybrown; } /*复合选择器*/ p.text1 { font-weight:bold;">yellow; } /*后代选择器*/ div a { color: aqua; } /*直接后代选择器*/ div.text1>a { color: black; } /*伪类*/ /*鼠标点击的时候改变*/ input:focus { /*去除外线条*/ outline: none; /*改变高度和宽度*/ width: 500px; height: 50px ; /*改变文字的大小*/ font-size: 20px; } /*鼠标移上去的时候改变*/ #main:hover { width:300px; height: 80px; font-size: 15px; font-weight:bold;">darkkhaki; } </style> </head> <> <div id="main">我是div标签</div> <div>我是div标签</div> <div>我是div标签</div> <div>我是div标签</div> <div>我是div标签</div> <div>我是div标签</div> <p>我是段落标签</p> <p>我是段落标签</p> <p>我是段落标签</p> <p>我是段落标签</p> <p>我是段落标签</p> <p class="text1">我是段落标签</p> <div class="text1">我是div标签 <a href="#">我是超链接</a> <div> <a href="#">我是二级联检</a> </div> </div> <br> <input placeholder="点我啊"> </body> </html>
相关文章推荐
- CSS的三种样式
- CSS:haslayout
- CSS的基本概念
- css 关于两栏布局,左边固定,右边自适应
- JAVA实现不同的时间样式输出
- css控制不溢出,不换行,溢出部分省略号显示
- css3 TransformZ() 3D缩放
- CSS3的REM设置字体大小
- 【转载】quickLayout.css-快速构建结构兼容的web页面
- 想学习一下CSS函数
- css层叠顺序探究
- CSS 表格和列表(20160823-0023)
- css3 currentColor
- css功能整理
- css3中的content字图片处理background
- css 高度、宽度居中
- css3中的content字符编码
- html特殊字符 编码css3 content:"我是特殊符号"
- scss/css正六边形
- 关于input元素 和display:inline-block 的元素不在一水平线上的一点发现