码迷,mamicode.com
首页 > Web开发 > 详细

CSS——属性选择器

时间:2016-07-15 12:46:45      阅读:624      评论:0      收藏:0      [点我收藏+]

标签:

参考:https://www.codementor.io/css/tutorial/how-to-use-css-selectors

 

Attribute Selectors

1. [attr]

eg: input[type] =>所有设置了type属性的input标签都生效(无论type的值是什么)

 

2. [attr="value"]

eg: input[type="text"]

 

3.Substring Matching Attribute Selectors

>> ^  Begin With Selector

  a[href^="http://"]

>> $  End With Selector

  a[href$=".pdf"]

>> *  Contains Selector

  a[href*="goo"]  包含,不区分大小写

 

4. [attr~=value]

eg:

  class="title"

  class="title colorMe"

>> 常规 [class="title"]  完全匹配,第1个生效

>> ~ [class~="title"]   子串匹配,1、2都生效

>> 常规 [class="colorMe"]   完全匹配,都不生效

>> ~ [class~="colorMe"]    子串匹配,第2个都生效

>> 常规 [class="title colorMe"]   完全匹配,第2个生效 

>> 常规 [class="colorMe title"]   完全匹配,都不生效

 

5. [attr|=value]

eg:

  lang="en"

  lang="en-es"

  lang="es"

>> Selecting [lang|=en] : [lang|=en]  1、2生效(|= 对于连接符可以生效)

>> Selecting [lang|=e] : [lang|=e]  都不生效

>> Selecting [lang^=e] : [lang^=en]  都生效

>> [lang|=en],[lang|=es]  都生效

>> div[lang|=es]  第2个生效 

CSS——属性选择器

标签:

原文地址:http://www.cnblogs.com/congyue-pepsi/p/5672815.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!