HTML5前端开发入门之CSS属性选择器

属性选择器

1.什么是属性选择器？

作用：

根据指定的属性名称，找到对应的标签然后设置属性

 

格式：

[attribute]

作用：根据指定的属性名称找到对应的标签，然后设置属性

 

[attribute=value]

作用：

找到有指定属性，并且指定属性的值等于value的标签，然后设置属性

最常见的应用场景，就是用于区分input属性

例如：

input[tye=password]{}

<input type="text" name="" id="">

<input type="password" name="" id="">

 

还有五个属性选择器可以分为以下三类：

 

1.属性的取值是否以什么开头的

[attribute|=value]  CSS2推出仅作了解

[attribute^=value]  css3推出的重点掌握

两者之间的区别：

css2中的只能找到value开头，并且value是被-符号和其他内容隔开的

css3中的只要是以value开头的都可以找到

 

2.属性的取值是否以什么结尾

[attribute$=value]  css3

 

3.属性的取值是否包含某个特定的值

[attribute~=value]  css2

[attribute*=value]  css3

两者之间的区别:

css2中的只能找到独立的单词，也就是包含value，并且value是被空格隔开的

css3中的只要是包含value的都可以找到