CSS属性选择器的高级用法（内含一道编程测试题）

 

目录

 0.简述属性选择器

1.[href="url"] 设置页面上所有包含href属性并且属性值为https://www.baidu.com的a元素

2.[class~="..."] 设置页面上所有含有class属性并且属性值的词列表的某个词等于baidu的div元素

3.[class^="..."] 设置页面上所有含有class属性并且属性值中以baidu开头的div元素

4.[class$="..."] 设置页面上所有含有class属性并且以baidu结尾的div的元素

5.[class*="..."] 设置页面上所有含有class属性并且属性中包含baidu的div元素

6.[class|="..."] 设置页面上所有含有class属性并且属性值等于baidu或者以baidu开头的div元素

测试题

测试题答案

---

0.简述属性选择器

属性选择器：检索HTML页面中符合所设置的属性条件的元素。

通过 [ ] 设置被选元素的属性条件。

下面举个例子：

1./*功能：选择HTML页面中所有包含了alt属性的img元素，并为其设置CSS样式*/

img[alt] { width:80px; color:red; ...; }

img:元素

alt :对应属性

width、color: 属性

80px 、red:  属性值



2./***设置页面上所有含有id属性的div元素***/
div[id]{
    color:red;
}


3./***设置页面上所有同时含有class和id属性的div元素***/
a[class][id]{
    color:red;
}

and so on.

1.[href="url"] 设置页面上所有包含href属性并且属性值为https://www.baidu.com的a元素

a[href="www.baidu.com"]{
  color:red;
}

2.[class~="..."] 设置页面上所有含有class属性并且属性值的词列表的某个词等于baidu的div元素

常用于针对设置可多个class名称的元素使用

div[class~="baidu"]{
  color:red;
}

3.[class^="..."] 设置页面上所有含有class属性