html属性选择器 可见,web----html属性选择器

属性选择器

1. 语法：标签名[属性名]{规则}

只使用属性名，但没有确定任何属性值

/* 选择所有有class属性的标签，并且让他们的字体颜色变为粉红色 */

[class]{

color: #FFAEC9;

}

源代码：

属性选择器title>

li[class]{

color: #FFAEC9;

}

/* 选择所有有class属性并且属性值为 li2 的li标签，并且让他们的字体颜色变为淡青色 */

li[class="li2"]{

color: aquamarine;

}

/* 选择所有有class属性并且属性值含有 li3 的li标签，并且让他们的背景颜色变为青色 */

li[class~="li3"]{

background-color: powderblue;

}

/* 选择所有有class属性并且属性值以 l开头 的li标签，并且让它们的边框颜色为裸粉色，边框像素为1，颜色为虚线 */

li[class^="l"]{

border: 1px darksalmon dashed;

}

/* 选择所有有class属性并且属性值以 l结尾 的span标签，并且让它们的背景颜色为粉色 */

span[class$="1"]{

background-color: mistyrose;

}

/* 选择所有有class属性并且属性值含有 span 的span标签，并且让它们的字体为宋体 */

span[class*="span"]{

font-family: "宋体";

}style>

head>

item0li>

item1li>

item2li>

item3li>

item33li>

ul>

div>

这是一个class属性为span1的spanspan>

这是一个class属性为span2的spanspan>

这是一个class属性为span11的spanspan>

这是一个class属性为span111的spanspan>

这是一个class属性为span21的spanspan>

item4li>

item5li>

item6li>

item7li>

item8li>

ul>

div>

body>

html>

将代码更改为

/* 选择所有有class属性的li标签，并且让他们的字体颜色变为粉红色 */

li[class]{

color: #FFAEC9;

}

2. 语法：标签名[属性名=“属性值”]{规则}

属性名=“属性值” 是指定了属性值为 “属性值”

/* 选择所有有class属性并且属性值为 li2 的li标签，并且让他们的字体颜色变为淡青色 */

li[class="li2"]{

color: aquamarine;

}

3. 语法 标签名[属性名~=“属性值”]{规则}

对于有多个属性值的属性名，只要其中一个属性值与"属性值"相匹配就可以选中该元素

/* 选择所有有class属性并且属性值含有 li3 的li标签，并且让他们的背景颜色变为青色 */

li[class~="li3"]{

background-color: powderblue;

}

代码更改为：

为第一个li标签在它的class属性中增加了一个属性item3

item3li>

item33li>

4. 语法： 标签名[属性名^=“属性值”]{规则}语法： 标签名[属性名^=“属性值”]{规则}

选择属性名以"属性值"开头的所有元素

/* 选择所有有class属性并且属性值以 l开头 的li标签，并且让它们的边框颜色为裸粉色，边框像素为1，颜色为虚线 */

li[class^="l"]{

border: 1px darksalmon dashed;

}

5. 语法： 标签名[属性名$ =“属性值”]{规则}语法： 标签名[属性名$ =“属性值”]{规则}

选择属性名以"属性值"结尾的所有元素

/* 选择所有有class属性并且属性值以 l结尾 的span标签，并且让它们的背景颜色为粉色 */

span[class$="1"]{

background-color: mistyrose;

}

6. 语法： 标签名[属性名 =“属性值”]{规则}语法： 标签名[属性名=“属性值”]{规则}

所选择的属性，其属性值中有这个"属性值"都将被选中

/* 选择所有有class属性并且属性值含有 span 的span标签，并且让它们的字体为宋体 */

span[class*="span"]{

font-family: "宋体";

}