当前位置 : 主页 > 网页制作 > css >

CSS - 选择器相关

来源:互联网 收集:自由互联 发布时间:2021-06-13
1. 标签选择器 /* 标签选择器 : 会将样式作用在当前网页所有的指定标签上 标签名 { 样式名1: 样式值1; 样式名2: 样式值2; ...... } */ table { width : 300px ; height : 200px ; border : solid 3px ;} 2. id选择

 

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 布局 flex
下一篇:CSS 选择器大全
网友评论