zoukankan      html  css  js  c++  java
  • css:nth-of-type()选择器用法

    今天做一个页面,无意中看到这个nth-of-type感觉挺方便的,之前单双行有的有横线,有的无横线一般在html中单独再写border-right:none等之类的。现在发现这个好东西赶紧记录下来。

    :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.n 可以是数字、关键词或公式。

    .uninstall_form .uninstall_list_checkbox:nth-of-type(odd){border-right:1px solid #e6e6e6}
    <form onsubmit="return check()" action="" method="post" name="post_unintall" id="post_unintall"> <div class="uninstall_list"> <input type="checkbox" id="uninstall_list1" name="my_check[]" value="1"> <label class="uninstall_list_checkbox">我想下某个软件结果下载了安智市场</label> </div> <div class="uninstall_list"> <input type="checkbox" id="uninstall_list1" name="my_check[]" value="2"> <label class="uninstall_list_checkbox">手机出问题,卸载了重装试试</label> </div> <div class="uninstall_list"> <input type="checkbox" id="uninstall_list2" name="my_check[]" value="3"> <label class="uninstall_list_checkbox">软件不全,好多软件找不到</label> </div>        
            .....
    </form>

    odd奇数行右面有一条线  even偶数行没有,还可以用2n+1表示奇数,2n表示偶数,3n+1表示每个三个显示。

    类似的也有

    :nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。n 可以是数字、关键词或公式。

    有一个css样式我感觉也很有用  记录下来

    background-clip: border-box|padding-box|content-box;

    background-clip 属性规定背景的绘制区域。

    border-box是背景被裁剪到边框盒。

    效果这样的

    padding-box背景被裁剪到内边距框。

    效果这样的:

    content-box是背景被裁剪到内容框。

    效果是这样:

  • 相关阅读:
    总结的CSS简写表
    ASP.net 2.0:我还有多少秘密你不知道?(1)
    判断自然数的阶乘大于等于400,然后计算此数的平方,再一次减1计算其平方和,直到数字减小到0(演示Exit DO)
    JSP留言板程序开发过程
    double>string的时候,如何保留两位小数?
    asp如何清除html代码
    利用ASP.NET来访问Excel文档
    C#日期函数所有样式大全
    ASP.net在线购物商城系统完全解析
    创立公司的准备
  • 原文地址:https://www.cnblogs.com/angellating/p/4778605.html
Copyright © 2011-2022 走看看