前端入门篇(十七)属性选择器

属性选择器:对带有指定属性的 HTML 元素设置样式。
1.基本标签[属性]
2.基本标签[属性=值]
3.基本标签[属性~=值]:空格隔开,包含指定值的元素
4.基本标签[属性^=值]:以指定值开始的元素
5.基本标签[属性$=值]:以指定值结束的元素

更完整的见官网:
前端入门篇(十七)属性选择器_第1张图片

1.基本标签[属性]
css文件:

p[title] {
    color: red;
    font-size: 30px;
    border: 1px solid black;
}

html文件:

<body>
    <div>div1
        <div>div2
            <p title="qiuqiu">p1p>
        div>
        <p>p2p>
    div>
    <p>p3p>
body>

效果:只有文字p1受影响
前端入门篇(十七)属性选择器_第2张图片
2.基本标签[属性=值]
css文件:

p[title=qiuqiu] {
    color: red;
    font-size: 30px;
    border: 1px solid black;
}

html文件:

<body>
    <div>div1
        <div>div2
            <p title="qiuqiu">p1p>
        div>
        <p title="qiuqiu2">p2p>
    div>
    <p>p3p>
body>

效果:只有完完全全与css中的值相同的才会受影响,p1受影响,p2多了一个2,不被影响
前端入门篇(十七)属性选择器_第3张图片

3.基本标签[属性~=值]
css文件:

p[title~=qiuqiu] {
    color: red;
    font-size: 30px;
    border: 1px solid black;
}

html文件:

<body>
    <div>div1
        <div>div2
            <p title="qiuqiu cc">p1p>
        div>
        <p title="qiuqiu2 cc">p2p>
    div>
    <p>p3p>
body>

效果:要完全跟qiuqiu相同的元素才被影响,p1受影响
前端入门篇(十七)属性选择器_第4张图片
4.基本标签[属性^=值]:以某值开始,不要求值完全一样
css文件:

p[title^=qiuqiu] {
    color: red;
    font-size: 30px;
    border: 1px solid black;
}

html文件:

<body>
    <div>div1
        <div>div2
            <p title="qiuqiu cc">p1p>
        div>
        <p title="qiuqiu2 cc">p2p>
    div>
    <p>p3p>
body>

效果:p1p2均受影响
前端入门篇(十七)属性选择器_第5张图片
5.基本标签[属性$=值]:以指定值为结尾,不要求词汇完全一致
css文件:

p[title$=cc] {
    color: red;
    font-size: 30px;
    border: 1px solid black;
}

html文件:

<body>
    <div>div1
        <div>div2
            <p title="qiuqiu 123cc">p1p>
        div>
        <p title="qiuqiu2 cc">p2p>
    div>
    <p>p3p>
body>

效果:p1p2均受影响
前端入门篇(十七)属性选择器_第6张图片

你可能感兴趣的:(前端入门,css3)