0804
css3伪类
target
突出显示活动的 HTML 锚
div:target{background: #0e3757;}
表单控件伪类
<style>input:enabled{background-color: #FFF2AB;}input:disabled{background-color: #f00;}</style>
<body><input type="text" enabled><input type="text" disabled></body>
文本相关伪类
<style>p{width:400px;}p:first-line{color: #fff;background-color: #0e3757;}p:first-letter{font-size: 30px;}</style>
p::selection{color: #fff;background: rgba(0,0,0,0.9);}
p::selection 表示P元素在用户选中文字时
只能改变文字的颜色以及背景颜色
p:before{position: absolute;left: 100px;top:300px;content: '这是我输入的文字';color: #fff;width:200px;height:300px;display: inline-block;background: url("images/04.png");}p:after{content: '';width:100px;height:200px;display: inline-block;background-color: #0e3757;}
在每个
元素的内容之前插入新内容：:before
在每个
元素的内容之后插入新内容：:after
afater清浮动
<style>.clearFix{*zoom:1;}.clearFix:after{content:'';display:block;clear:both;}
not选择器
p:not(s) 除了s以外所有的p元素
p:not(#main){background-color: #0e3757;}
毗邻元素
E~F 表示选择E元素后面同级的所有F元素
<style>h1~div{background-color: #0e3757;}</style>
E+F 表示选择E元素后面同级紧跟着的第一个F元素
<style>h1+h2{background-color: #0e3757;}</style>
文字缩略
text-overflow: ellipsis; 文字溢出显示省略号
一定要配合
overflow: hidden;
white-space: nowrap;
使用
<style>p{background-color: #0e3757;color: #fff;width:400px;height:30px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}</style>
