css: nth-of-type() セレクターの使用法_html/css_WEB-ITnose

今日ページを作成していて、この nth-of-type を偶然見て、非常に便利だと感じました。 以前は、水平線のあるものと水平線のないものがありました。 : html などで別途指定はありません。さて、いいものを見つけたので早速録音してみました。

: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>

奇数番号の行の右側には線がありますが、偶数番号の行には線がありません。奇数を表すには 2n+1、偶数を表すには 2n、および 3n+1 を使用することもできます。それぞれ 3 つのディスプレイを表します。

同様に、要素の型に関係なく、親要素に属する N 番目の子要素と一致する

:nth-child(n) セレクターもあります。 n には、数値、キーワード、または式を指定できます。

これもとても便利だと思うCSSスタイルがあるので記録しておきます

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

background-clip属性は背景の描画領域を指定します。 。

border-box は、背景が境界ボックスにトリミングされる場所です。

効果はこんな感じです

padding-boxの背景がパディングボックスにトリミングされます。

効果は次のとおりです:

content-box では、背景がコンテンツ ボックスにトリミングされます。効果は次のようなものです。