20170619

属性选择器

之前了解过，但实际当中从来没用过，感觉一个team的队友用的很棒！现在将属性选择器的知识点总结如下。

• 根据属性名选择
  举例说明，p[class]表示将有class属性的p标签选择出来；a[href][title]表示将同时具有href和title属性的a标签选择出来。

• 根据具体属性值选择
  举例说明：a [href=“http://www.baidu.com”]表示将href属性值为http://www.baidu.com的a标签选择出来。与根据属性名选择类似，可以把多个属性-值选择器链接在一起来选择。这个属性值得注意的是需要完全匹配，举例来说就是，如果某个标签有多个类名，那么在选择这个标签时，必须要将其所有类名都要写上，完全匹配才可以，对于<p class=“top center”>要想选择这个p标签，写法就是p[class=“top center”]才能准确选出这个标签。

• 根据部分属性值选择
  根据属性的某个属性值进行选择，只要有这个属性值的标签都能被选择。
  举例说明，<p class=“top center”>，p [class~=“top”]就能选定这个标签。

• 子串匹配属性选择
  [abc^="def"]表示选择abc属性的属性值以 “def” 开头的所有元素；
  [abc$="def"]表示选择abc属性的属性值以 “def”结尾的所有元素；
  [abc*="def"]表示选择abc属性的属性值中包含子串 “def”的所有元素。

• 特定属性选择
  这种选择常用于匹配语言值，举例说明，*[lang|="en"]，会选择lang属性等于en或以en-开头的所有元素。

---

input标签的placeholder属性

在写代码的过程中第一次用到这个属性，它是H5的新属性，作用是规定帮助用户填写输入字段的提示。