CSS - 选择器相关 - 代码天地

1. 标签选择器

/* 
    标签选择器 : 会将样式作用在当前网页所有的指定标签上
        标签名 {
            样式名1: 样式值1;
            样式名2: 样式值2;
            ......
        }
*/
table {
    width: 300px;
    height: 200px;
    border: solid 3px;
}

2. id选择器

/* 
    id选择器 : 会将样式作用在指定的标签上
        #标签的id属性的值 {
            样式名1: 样式值1;
            样式名2: 样式值2;
            ......
        }
*/
#tb {
    background-color: blue;
}

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

3. 类选择器

/*
    类选择器 : 会将样式作用在所有的指定的class标签上
        (点).标签的class属性的值 {
            样式名1: 样式值1;
            样式名2: 样式值2;
            ......
        }
*/
.tc {
    color: green;
}

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

4. 全部选择器

/*
    全部选择器 : 作用在所有的页面标签上
        * {
            样式名1: 样式值1;
            样式名2: 样式值2;
            ......
        }
*/       
* {
   font-size: 20px;
}

5. 组合选择器

/*
    组合选择器 : 多种选择器的组合, 选择器之间用逗号隔开
        选择器1,选择器2,.... {
            样式名1: 样式值1;
            样式名2: 样式值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. 后代选择器

/*
    后代选择器 : 样式会作用在选择器1下的所有选择器2上, 选择器之间用空格隔开
        选择器1 选择器2 {
            样式名1: 样式值1;
            样式名2: 样式值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. 属性选择器

/*
    属性选择器 : 样式会作用在标签中对应的属性值的标签上
        标签名[属性名=属性值]
*/ 
td[id='tName'] {
    color: red;
}

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

CSS - 选择器相关

猜你喜欢