有趣的 css

本文出自 微信公众号 [小生方勤] , 有趣的灵魂万里挑一。

大佬的 gitHub 【https://github.com/wanqihua/blog】。

• 每个单词的首字母大写

text-transform: capitalize | uppercase | lowercase | none;

• capitalize 每个单词首字母大写
• uppercase 仅有大写字母
• lowercase 仅有小写字母
• none 默认值，原始的数据值。

• 单选高亮

  
  
  效果.gif

  // 省略部分代码，详细代码看仓库
  .input:checked + .colors {
    border-color:#e63838;
    color: #e63838;
  }
  

    
    
天空之境
  

~ 选择器：查找某个元素后面的所有兄弟元素

• 选择器：查找某个元素后面紧邻的兄弟元素

• 表单验证

  
  
  效果图.gif

input[type="text"]:invalid ~ input[type="submit"]{
    display:none
  }

  

    
    

    
    

    
  

valid 伪类，匹配通过 pattern 验证的元素
invalid 伪类，匹配未通过 pattern 验证的元素