关闭

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

标签: WEB前端选择器
63人阅读 评论(0) 收藏 举报
分类:

一、关系选择器包含:

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元素



0
0
查看评论

jQuery 层次选择器,属性选择器

jQuery层次选择器 jquery属性选择器 jq根据是否有某属性选择 jq选取子元素、后边的元素等 $("div >span") $("#one +div") $("#one~div")
  • tangdou5682
  • tangdou5682
  • 2016-12-01 10:40
  • 655

HTML5中CSS3的属性选择器

HTML5中CSS3的属性选择器 E[att] E[att="val"] E[att^="val"] E[att$="val"] E[att*="val"] E[att~="val"]
  • qq_37768482
  • qq_37768482
  • 2017-05-09 16:54
  • 493

javascript的选择器、节点属性

一、获取html元素,选择器 1、document.getElementById("id") Document对象的该方法通过id获取元素,在低于IE8版本的浏览器中,getElementById()对匹配元素的ID不区分大小写,而且也返回匹配name属性的元素。 2、docu...
  • u012841667
  • u012841667
  • 2016-10-20 19:21
  • 1155

jquery用户自定义选择器及选择器高级用法实验

//用户自定义选择器       $(function(){        // Define custom filter by extending $.expr[":"]     ...
  • luozhonghua2014
  • luozhonghua2014
  • 2015-05-17 12:19
  • 1444

Zepto自定义选择器与Jq存在差异

jq //可以这么写 $.expr[':']["voice-playing"] = function(el) {     var $sel = $(el)...
  • heiliuer
  • heiliuer
  • 2015-11-13 14:56
  • 208

css3选择器详细探索

css3选择器详细探索 可链接W3School详细查看 CSS3(以下简称C3)是一种用于屏幕上渲染html,xml的一种语言,C3主要是在相应的元素中应用样式,来渲染相对应用的元素,那么这样我们选择相应的元素就很重要了,如何选择对应的元素,此时就需要我们所说的选择器。选择器主要是用来确定htm...
  • xiaowu_hhb
  • xiaowu_hhb
  • 2016-11-16 15:58
  • 465

jquery选择器-根据多个属性选择E[attr=val][attr=val]

根据多个属性选择E[attr=val][attr=val] $("div[title='ttt'][class='aaaa']").click()................   所有div元素下所有属性title值是等于ttt并...
  • Elite_1989
  • Elite_1989
  • 2013-10-21 10:50
  • 9449

选择器的组合使用

选择器 1.结构选择器 1.1后代选择器 这个选择器可以选中content中所有的a标签,并对标签a应用相应的样式 .content a{ font-size: 30px; } 1.2子元素选择器 这个选择器可以选中 所有的子元素a,也就是直接后代,下下代都不行。 ...
  • besttoby01
  • besttoby01
  • 2017-07-17 20:50
  • 121

属性选择器 优先级

1.属性选择器 ^     表示属性以某一个字符开头,匹配以某一个字符开头的属性 span[test^="a"]{ color: rgb(200, 100, 100); } $    ...
  • Fly_hello
  • Fly_hello
  • 2017-06-28 19:01
  • 118

目前最全的浏览器/CSS选择器兼容性总结

2009年2月24日,Safari 4.0beta版正式发布,Safari从它的3.2版本开始就已经支持所有的CSS选择器(包括最新的CSS3)。不过为了方便大家的工作,下面提供了最新版本的CSS选择器浏览器支持情况,其中包括最新的CSS3和Safari 4.0 Beta的支持情况。感谢Estell...
  • wxl2012
  • wxl2012
  • 2010-01-11 17:06
  • 3777
    个人资料
    • 访问:2281次
    • 积分:463
    • 等级:
    • 排名:千里之外
    • 原创:36篇
    • 转载:20篇
    • 译文:0篇
    • 评论:0条
    文章分类