X. CSS Selector

Sub-selectors

Child Selector Usage:

label 1> label 2 { declaration;}

Label 2 must be a child of label 1, label 1 must be the parent element of label 2, and cannot be an ancestor element other than

The following CSS code is an excerpt of the style in bootstrap for working with tables

1 . Table{2 width:100%;3 Max-width:100%;4 Margin-bottom:20px;5}6 . Table > Thead > Tr > th,7 . Table > Tbody > Tr > th,8 . Table > Tfoot > Tr > th,9 . Table > Thead > TR > td,Ten . Table > Tbody > TR > td, One . Table > Tfoot > TR > TD{ A padding:8px; - Line-height:1.42857143; - vertical-align:Top; the Border-top:1px solid #ddd; -} - . Table > Thead > tr > th{ - vertical-align:Bottom; + Border-bottom:2px solid #ddd; -}

As you can see from line 6th to 11th, the sub-selectors are used to process the th and TD in the table, and the ancestor elements are table, THEAD, tr, and only th or TD can be selected in order to satisfy such a hierarchy.

Close to sibling selector

Immediate use of sibling selectors

label 1+ label 2 { declaration;}

Tag 2 and label 1 have the same ancestor element, and tag 2 is immediately behind the sibling tag 1, the following is the processing of two bootstrap in the same table

{                    border-top: 2px solid #ddd;}

This CSS style is used to add a solid line of 2px between the different bodies of the same table, and the final selection is the latter tbody

X. CSS Selector