茉莉网
当前位置:首页»of»选择器

css 多类选择器 优设-UISDC /a>

2017年11月05日 来源:css 多类选择器 大字体小字体

  E+F:相邻兄弟选择器,该选择器定位与元素E具有相同父元素且在标记中紧邻E的元素F:

  E[attr$=val]:该选择器与E[attr^=val]正好相反,定位具有属性attr且属性值以val结尾的任何元素E:

  这是最基本的CSS选择器,HTML文档中的元素本身就是一个选择器:

  E[attr^=val]:该选择器定位具有属性attr且属性值以val开头的任何元素E:

  鍦ㄤ笂闈㈢殑杩欎釜渚嬪瓙涓紝绗竴涓粍鑹茬殑li鍏冪礌灏嗕細鏄鍥涗釜銆傚鏋滀篃鎯充粠绗竴涓紑濮嬪尮閰嶏紝浣犲彲浠ヤ娇鐢ㄤ竴涓畝鍗曠殑琛ㄨ揪寮忥細

  div[class^=a]{color:#666;}//定位页面里具有属性class且属性值以a开头的div容器,比如class="a"以及class="ab"

优设 UISDC

  E~F:一般兄弟选择器,该选择器定位与元素E具有相同父元素且在标记中位于E之后的所有元素F:

  E[attr~=val]:该选择器定位具有属性attr且属性值为完整单词val的任何元素E:

  li+li{border-top:1pxsolid#ddd;}//定位具有相同父元素ul里除第一个li之外的所有li

  如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器(Childselector)。

优设 UISDC

优设 UISDC

  璁╂垜浠亣璁句綘涓嶆兂璁╀綘鐨勬棩蹇楃殑div鐨勬渶鍚庝竴涓钀戒篃鏈変竴涓簳閮ㄨ竟璺濓細

  另外,当使用JavaScript类库的时候,比如jQuery,尽可能地使用原生的CSS3选择器。这样可以加快代码的运行速度,因为选择器引擎使用浏览器内置的解析器,速度更快。

优设 UISDC: 优秀网页设计联盟 S

  InternetExplorer(鐩村埌8.0鐗堟湰)閮戒笉鏀寔缁撴瀯浼被銆侳irefox銆丼afari鍜孫pera鍦ㄥ叾鏈€鏂扮増鏈殑娴忚鍣ㄤ腑鎸囧嚭杩欎簺閫夋嫨鍣ㄣ€傝繖鎰忓懗鐫€锛屼娇鐢ㄨ繖浜涢€夋嫨鍣ㄥ缃戠珯鐨勫彲鐢ㄦ€у拰鍙闂€ф槸寰堟湁鐢ㄧ殑锛屾垨鑰呭鏋滅綉绔欑殑鐢ㄦ埛涓殑澶ч儴鍒嗘槸浣跨敤IE鑰屼笖浣犱笉鎯冲湪鏌愪簺缁嗚妭涓婃棤瑙嗕粬浠紝鏈€濂借繕鏄繚鎸佷娇鐢ㄩ€氱敤鐨刢lass鍜岀畝鍗曠殑閫夋嫨鍣ㄦ潵杩庡悎杩欎簺閫夋嫨鍣ㄣ€傚惁鍒欎綘浼氳鎼炵柉鐨勶紒

优设 UISDC

  ulli{margin-bottom:0.5em;}

优设 UISDC

  E[attr|=avl]:该选择器定位具有属性attr且属性值为val或以val-开始的任何元素E:

  p{line-height:1.5em;margin-bottom:1em;}

优设 UISDC

  input:enabled{border:1pxsolid#899;}

  灞炴€ч€夋嫨鍣ㄧ殑鍙︿竴涓緢鏈夌敤鐨勭敤澶勬槸瀹氫綅涓嶅悓绫诲瀷鐨刬nput鍏冪礌銆傛瘮濡傦紝濡傛灉浣犳兂璁╀綘鐨勬枃鏈緭鍏ユ浣跨敤涓€涓壒瀹氱殑瀹藉害锛屼綘鍙互浣跨敤涓嬮潰鐨勫睘鎬ч€夋嫨鍣細

优设 UISDC

  写的代码多了,就会发现,自己越来越无知了,总以为htmlcss很简单,已经掌握的很熟练了,其实我还差的很多。

  :enabled:已启用的界面元素:

  :target:该选择器定位当前活动页面内定位点的目标元素:

  E[attr*=val]:该选择器与E[attr~=val]相似,但更进一步,定位具有属性attr且属性值任意位置包含val的元素E,val可以是一个完整的单词,也可以是一个单词中的一部分:

  如果一个多类选择器包含类名列表中没有的一个类名,匹配就会失败。请看下面的规则:

  input[type=password]{border:1pxsolid#aaa;}//定位页面里的密码输入框

  说起CSS的后代选择器。它属于派生选择器中的一种,两者附属关系如下:

  :focus:获得焦点时状态,不仅限于链接,可用于任何具有tabindex属性的无线:

  濡傛灉浣犳暍浜庡啋闄╋紝鎴栬€呬綘涓嶅鎬曟斁寮冧箣鍓嶇殑閬嶅湴鏃犵敤鍜岄潪璇箟鍖栫殑class鍜宨d锛屼负浠€涔堜笉灏濊瘯涓€涓や釜杩欎簺寮哄ぇ鐨凜SS閫夋嫨鍣ㄥ埌浣犵殑涓嬩竴涓」鐩腑鍛紵鎴戜滑淇濊瘉浣犱笉浼氬洖澶寸殑锛?/p>

  :disabled:已禁用的界面元素:

  如果你想让页面上所有指定标签的样式改变,可以直接使用标签选择器。

  E[attr=val]:该选择器定位具有属性attr且属性值为val的任何元素E:

  类选择器可以结合元素选择器来使用。

  input:focus{border:1pxsolid#333;}//输入框获得焦点时的样式

  div[class$=a]{color:#f00;}//定位页面里具有属性class且属性值以a结尾的div窗口,比如class="nba"以及class="cba"

  为了增加列表左上角的圆角效果,你需要选择第一个元素.这可以用如下的选择器来实现:

  姣斿锛屽鏋滀綘鎯宠鏀瑰彉浣犵殑鍗氬涓婄殑鏃ュ織閮ㄥ垎鍏冪礌鐨勮儗鏅鑹诧紝浣犲彲浠ヤ娇鐢ㄤ竴涓寚瀹氭瘡涓€涓猚lass灞炴€у€间互“post-”寮€濮嬬殑div鐨勫睘鎬ч€夋嫨鍣細

  #info:target{font-size:24px;}//当访问的URL网址为123.html#info时,id="info"将加载这个字体样式

  :link:未访问的链接;

  选择器是CSS的核心,从最初的元素、class/id选择器,演进到伪元素、伪类,以及CSS3中提供的更丰富的选择器,定位页面上的任意元素开始变得愈发的简单。

  :default:应用于一个或多个作为一组类似元素中的默认元素的UI元素;

  p[class|=a]{color:#333;}//定位页面里所有的P段落里具有class属性且属性值为a或是a-开始的,比如class="a"以及class="a-b"

  E[attr]:该选择器定位具有属性attr的任何元素E:

  E>F:子选择器,该选择器定位元素E的直接子元素中的所有元素F,它将忽略任何进一步的嵌套:

  div[title~=english]{color:#f88;}//定位页面里所有具有属性title且属性值里拥有完整单词english的div容器,比如title="english"以及title="aenglish"

  :hover:鼠标移动到容器,不仅限于链接,可用于页面中的任何元素;

  ul>li{list-style:none;}//仅限ul的直接子元素li,如果li里面还嵌套着另一个ul结构时,最里面的li将被忽略

  h1~p{color:#f00;}//定位具有相同父元素的,h1标签之后的所有p标签

  :active:被激活时的状态,不仅限于链接,可用于任何具有tabindex属性的元素;

  :visited:已访问的链接,不建议使用;

  当然,上面我介绍了一堆选择器,使用方法都差不多,例如要给第一句加样式,则可以这样

  閭d箞杩欎細浜х敓浠€涔堬紵

  a[title*=link]{text-decoration:underline;}//定位所有title里具有link字符串的a链接

  EF:后代选择器,该选择器定位元素E的后代中所有元素F:

  input[required]{border:1pxsolid#f00;}//定位页面里所有具有必填属性"required"的input

  input:disabled{background:#eee;}

相关内容

编辑精选

Copyright © 2015 茉莉网 http://www.szmlwh.cn. All rights reserved.