CSS|属性选择器-CFANZ编程社区

CSS|属性选择器

如果我们有四个a标签，并且现在样式被初步定义了：

a{
    float: left;
    display: block;
    border-radius: 10px;
    background-color: aqua;
    width: 50px;
    height: 50px;
    text-align: center;
    font:20px/50px Arial;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
    <link rel="stylesheet" href="Style-demo08.css">
</head>
<body>

<a href="https:/www.baidu.com" class="c1" name="baidu">1</a>
<a href="" class="c2 c3">2</a>
<a href="http">3</a>
<a href="http/www">4</a>

</body>
</html>

CSS|属性选择器_css

标签中存在某个属性

标签中存在某个属性，用：标签[属性]来选择，如a[name]表示选择存在name属性的a标签：

a[name]{
    background-color: red;
}

这样就会把存在name属性的a标签的背景颜色变为红色：

CSS|属性选择器_css_02

如果a标签有name的值不同的情况还可以用a[name=值]来选择name属性特定值的标签。

属性中存在某个值

比如上述例子中，第一个a标签的class属性有c1，第二个a标签的class属性有c2，c3。我们选择有c2的标签的方法：

a[class *= c2]{
    background-color: blueviolet;
}

这样就把class中存在c2值的a标签的背景颜色变成了blueviolet色。

CSS|属性选择器_html_03

以某个内容开头

如果我们要选择href属性以http1开头的：

标签[属性^=内容]
如a[href^=http1]

a[href ^= http1]{
    background-color: aquamarine;
}

这样就会把href属性中以http1开头的a标签的背景颜色变为aquamarine：

CSS|属性选择器_css_04

以某个内容结尾

有开头当然有结尾，以某个内容结尾：

标签[属性$=内容]
如a[href$=http1]

a[href $= www]{
    background-color: blue;
}

这样就会把第四个标签的背景颜色变为蓝色：

CSS|属性选择器_a标签_05

人生没有白走的路，每一步都算数！

0 条评论