Rumah > hujung hadapan web > tutorial css > css伪类组合用法的示例代码分享

css伪类组合用法的示例代码分享

黄舟
Lepaskan: 2017-04-24 09:35:27
asal
1281 orang telah melayarinya

利用伪类组合,可以用css代替js以达到目的,少些一下js

.textarea:empty:before {
    display: block;
    content: '请输入';
    color: #ababab;
    font-size: 15px;
    text-align: left;
}<br>//表示:当textarea元素为空时即没有输入时,有“请输入”这句提示语显示
  
.textarea:focus:before {
    display: none;
}<br>//当textarea元素聚焦时,刚刚用before伪类加的“请输入”就会隐藏<br><br>.textarea:empty:after {
content: &#39;请认真填写。&#39;;
   color: #ababab;
   font-size: 11px;
   text-align: left;
}
.textarea:focus:focus {
    display: none;
}
first-child:after
.order:empty+.a {
    display: block;
}<br>//order元素为空时,它下面的那个元素a显示
Salin selepas log masuk

Atas ialah kandungan terperinci css伪类组合用法的示例代码分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan