WEB前端 -- 关系选择器、属性选择器

一、关系选择器包含:

1)包含选择器(A B):如ul li{}

2)子选择器(A>B)

3)相邻选择器(A+B)

4)兄弟选择器(A~B):注意对它后面的元素起作用

1.包含选择器

2.子选择器

  <div>
      <a href="#">子链接</a>
      <p><a href="#">子孙链接</a></p>
  </div>
div>a{ background-color:#F66; color:#C36}

3.相邻选择器(A+B)

A元素之后相邻的第一个B元素

4.兄弟选择器(A~B)

A元素之后所有的兄弟元素B

二、属性选择器

1)E[att]:选择属性为att的E元素

2)E[att="val"]:选择属性值为val的属性att的E元素

3)E[att~="val"]:选择属性att中属性值中有一个符合val的E元素

<div class="div1 divColor">第一个div</div>
<div class="div1 div2">第一个div</div>
<div class="Pmo div1">第一个div</div>
<div class="p11"></div>
div[class~="div1"]{color:blue;}即前3个div被选中,其中的字体变色

4)E[att^="val"]:选择属性值中以“val”开头的属性att的E元素

<div class="div1 divColor">第一个div</div>
<div class="div1 div2">第一个div</div>
<div class="Pmo div1">第一个div</div>
<div class="p11"></div>
div[class^="d"]{color:blue;}即前2个div被选中,其中的字体变色

5)E[att$="val"]:选择属性值中以“val”结尾的属性att的E元素

6)E[att*="val"]:属性值中包含val的属性att的E元素



阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq814965130/article/details/78642394
文章标签: WEB前端 选择器
个人分类: 前端
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

WEB前端 -- 关系选择器、属性选择器

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭