CSS:高级选择器

最新推荐文章于 2022-03-25 15:03:13 发布

亦昕跑的码

最新推荐文章于 2022-03-25 15:03:13 发布

阅读量559

点赞数 1

文章标签： css html css3

本文链接：https://blog.csdn.net/yiXin_Chen/article/details/122079733

版权

高级选择器: (部分)
    1. 属性选择器:
        语法:     [属性名]{} : 为所有使用了指定属性的标签渲染效果
                 [属性名=值]{} : 为使用了指定属性, 且值也是指定值的标签渲染效果
                 [属性名^=值]{} : 为使用了指定属性, 且值以指定内容开头的标签渲染效果
                 [属性名$=值]{} : 为使用了指定属性, 且值以指定内容结尾的标签渲染效果
                 [属性名*=值]{} : 为使用了指定属性, 且值包含指定内容的标签渲染效果
属性选择器示例:
<table>
    <tr>
        <td>账号:</td>
        <td><input type="text" name="userName"></td>
    </tr>
    <tr>
        <td>密码:</td>
        <td><input type="password" name="password"></td>
    </tr>
</table>

CSS样式代码

[name]{
    color: red;
}

[name=userName]{
    color: yellow;
}

[type=text]{
    color: blue;
}

[name^=user]{
    color: pink;
}

[name$=Name]{
    color: orange;
}

[name*=o]{
    color: green;
}
    2. 并集选择器: 为多个不同的选择器设置相同的样式效果
        语法:     选择器1, 选择器2, ..., 选择器n{}

并集选择器示例:
<body>
    <input type="submit" value="提交">
    <input type="reset" value="重置">
    <input type="button" value="取消">
</body>

CSS代码 :
[type=submit], [type=reset], [type=button]{
    font-family: 华文行楷;
}
    3. 交集选择器: 要求类选择器或id选择器或属性选择器必须在指定的标签中使用才能生效
        语法:
            标签名.类名{}
            标签名#id名{}
            标签名[属性名]{}
交集选择器示例:
<body>
    <div class="red">交集效果测试: span.red</div>
    <span class="red">交集效果测试: span.red</span>
</body>

CSS代码:

span.red{ color: red; }

    4. 后代选择器:
        语法:
            选择器1 选择器2 选择器3 ... 选择器n{}
            后代选择器的权重计算: 计算整个后代选择器的积分, 每个id积100分, 每个class积10分,         每个标签积1分,效果冲突时, 积分高的优先渲染.
后代选择器示例:
<body>
    <span>第0层</span>
    <div class="layer1">
        <span class="content1">第1层</span>
        <div class="layer2">
            <span class="content2">第2层</span>
            <div class="layer3">
                <span class="content3">第3层</span>
                <div class="layer4">
                    <span class="content4">第4层</span>
                </div>
            </div>
        </div>
    </div>
</body>

CSS代码:

div div div div span{
    color: red;
}
div div div span{
    color: green;
}
div div span{
    color: yellow;
}
div span{
    color: blue;
}

div .content4{
    color: blue;
}

.layer1 .layer4 span{
    color: yellow;
}
    5. 伪类选择器: 用于筛选同级标签
        1) 子元素筛选: 要求同级元素都是同一种
            标签名:first-child{}
            标签名:last-child{}
            标签名:nth-child(序号){}
        2) 子标签筛选: 同级元素类型不限
            标签名:first-of-type{}
            标签名:last-of-type{}
            标签名:nth-of-type(序号){}

伪类选择器示例:

<body>
    <ol class="no1">
        <li>1st</li>
        <li>2nd</li>
        <li>3rd</li>
        <li>4th</li>
        <li>5th</li>
    </ol>
    <dl class="no2">
        <dt>1st</dt>
        <dd>首先</dd>
        <dt>2nd</dt>
        <dd>其次</dd>
        <dt>3rd</dt>
        <dd>再次</dd>
        <dt>4th</dt>
        <dd>最后</dd>
        <dt>5th</dt>
        <dd>补充</dd>
    </dl>
</body>

CSS代码 :

@charset "UTF-8";

.no1 li:first-child{
    color: red;
}
.no1 li:last-child{
    color: blue;
}
.no1 li:nth-child(3){
    color: yellow;
}

.no2 dt:first-of-type, .no2 dd:first-of-type{
    color: red;
}
.no2 dt:nth-of-type(3), .no2 dd:nth-of-type(3){
    color: yellow;
}
.no2 dt:last-of-type, .no2 dd:last-of-type{
    color: blue;
}