CSS - selectors Related

 

1. tag selector

/* 
    The tag selector: pattern will act on the current page all the specified tag
        Label name {
            Style name 1: 1 style value;
            Style Name 2: style value 2;
            ......
        }
*/
table {
    width: 300px;
    height: 200px;
    border: solid 3px;
}

 

2. id selector

/* 
    id selector: pattern will act on the specified label
        Id attribute value of the tag {#
            Style name 1: 1 style value;
            Style Name 2: style value 2;
            ......
        }
*/
#tb {
    background-color: blue;
}

<table id="tb">
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

 

3. Class Selector

/*
    Class selector: pattern will act on all the specified tag class
        (Dot). Class attribute value of the tag {
            Style name 1: 1 style value;
            Style Name 2: style value 2;
            ......
        }
*/
.tc {
    color: green;
}

<table>
    <tr>
        <td class="tc">1</td>
        <td>2</td>
        <td class="tc">3</td>
    </tr>
</table>

 

4. All selector

/*
    All selectors: the role of labels on all pages
        * {
            Style name 1: 1 style value;
            Style Name 2: style value 2;
            ......
        }
*/       
* {
   font-size: 20px;
}

 

5. Combination Selector

/*
    Selector combination: a combination between a plurality of selectors, selectors separated by commas
        The selector 1, selector 2, .... {
            Style name 1: 1 style value;
            Style Name 2: style value 2;
            ......
        }
*/
#tid, .tc {
    color: red;
}

<table>
    <tr>
        <td id="tid">1</td>
        <td>2</td>
        <td class="tc">3</td>
    </tr>
    <tr>
        <td>4</td>
        <td class="tc">5</td>
        <td>6</td>
    </tr>
</table>

 

6. descendant selectors

/*
    Descendant selectors: all the selectors in the selected style may act on the 2 1, with a space between the selector
        Selector Selector 1 2 {
            Style name 1: 1 style value;
            Style Name 2: style value 2;
            ......
        }
*/
#tr1 td {
    color: red;
}

<table>
    <tr id="tr1">
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
</table>

 

7. attribute selector

/*
    Attribute selector: a tag property value corresponding to the pattern will act in a label
        Label name [attribute name = attribute value]
*/ 
td[id='tName'] {
    color: red;
}

<table>
    <tr>
        <td id="tName">1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>