零基础教你学前端——60、CSS属性选择器

前面我们已经讲解了,CSS中的简单选择器,组合选择器,以及伪类和伪元素选择器。如果想做到更加精准的查找,并且提高查找元素的效率,我们可以使用CSS属性选择器来完成。

CSS属性选择器,是根据属性或属性值来查找元素;

基本语法为:Element中括号attribute([əˈtrɪbju:t ])(Element[attribute])或者Element,中括号attribute等于value(Element[attribute=’value’]),实现快速精准查找元素。

在这里注意的是:element译为元素,attribute译为属性,Element attribute 的含义是:查找带有该属性的元素,然后添加样式声明。

a[target] {

background-color: yellow;

}

例如:以上代码的含义是:查找带有target属性的a元素,并且添加了背景颜色为黄色的样式声明。

在CSS选择器中,目前有四种属性选择器可供大家使用:

第一种:通过,使用中括号attribute([attribute]),来查找HTML结构中,带有attribute属性的所有元素。

第二种:通过,使用中括号attribute等于value([attribute=’value’]),来查找HTML结构中带有attribute属性,并且属性值为value的元素。

第三种:通过,使用中括号attribute波浪线等于value([attribute~=‘value’]),来查找HTML结构中带有attribute属性,并且在多个属性值中包含value取值的元素。

第四种:通过,使用中括号attribute竖杠等于value([attribute|=”value”]),来查找HTML结构中带有attribute属性,并且属性值以value或者是value横岗(value-)开头的元素;在这里需要注意的是,该属性的值只能有一个,不能有多个。

接下来详细的为大家来介绍不同属性选择器的使用情况,在004目录下创建一个attribute_selector.html文件,构建基础代码,

在body元素内部,添加准备好的基本结构,里面包含输入框,密码框,单选框以及带有类名的p元素和div元素。

基础信息

用户名:

密码框:

回答问题:

性别选择:

是否核酸:

元素修饰

我是一个p元素我有三个类名,分别是:box big bobo

我是一个p元素,我有两个类名分别是:box和bobo

我是是一个div元素,我有一个类名叫做box

我是是一个div元素,我有一个类名叫做box-qf

在head元素里面添加style元素,使用属性选择器:中括号type([type]{}),查找页面元素中,所有携带type属性的元素。并添加样式声明:width:50px height:50px; ([type]{width:50px; height:50px;})在浏览器中能清楚的看到输入框,密码框以及单选框都实现了宽度高度的调整;

如果只想修饰单选框中的性别该如何实现呢?显然,直接使用中括号type([type])是不能完成的。因为,中括号type([type])查找到的是,所有携带type属性的元素,查找范围过于宽泛;

为了提高查找的精确度,可以使用中括号name等于sex([name=”sex”]),并添加样式声明:width:20px height:20px([name='sex']{width:20px;height:20px});再次观察浏览器,性别对应的单选框,大小已经发生了改变。

回到代码中我们继续编写一段代码,中括号class波浪线等于box([class~=”box”]),添加样式声明:background-color:yellow,我们发现,在浏览器中,第一个输入框,以及两个p元素,和第一个div元素,都实现了背景颜色的改变,因为这些标签,都带有class属性并且属性值中都有box这个取值;

回到代码中,再来编写一段代码,中括号class竖杠等于box([class|=”box”]),并添加样式声明backgrund-color:skyblue,回到浏览器中,这时,第一个输入框,和最后两个div元素背景颜色发生了改变。

也许你会想,为什么刚刚修饰完成的第一个input输入框,以及第一个div元素,背景颜色会再次发生样式改变呢?

这是因为在计算机编码世界中,代码是按照从上向下的顺序执行的。这就好比:我可以穿一件T恤出门,我也可以再穿一件外套,外套会将T恤遮盖掉。

中括号class波浪线等于box([class~=box]),能查找到页面中带有class属性,并且向取值中包含box的元素应用样式声明。

继续添加代码,通过中括号class竖杠等于box([class|=box]),再次查找页面中带有class属性,并将取值为box或者是box杠(box-)开头的元素,此时,第一个input输入框和第一个div元素再次被查找到,并添加样式声明,后面的样式把前面的样式覆盖掉了,所以会发生改变;

做到这里也许你还存有疑问:为什么完全可以起类名或者是起id名字来完成样式修饰,还要继续学习这么多的选择器呢?

简单选择器和组合选择器,可以完成元素的查找,但是我们学习的其他选择器可以更加精准高效的查找元素,从而能提高我们编码速度;本节课的属性选择器,在实际开发的过程中,大部分会应用在表单控件中,因为表单控件可添加的属性比较多,通过属性选择器,能够做到高效查找表单元素。

你可能感兴趣的:(前端html)