css选择器记录大全

最新推荐文章于 2024-10-16 17:48:16 发布

weixin_34023982

最新推荐文章于 2024-10-16 17:48:16 发布

阅读量110

点赞数

文章标签： python ui

原文链接：https://my.oschina.net/daladida/blog/719763

版权

基础选择器 *,id,class,元素选择器这些年头用到年尾的就不多说了。

**p.wola{}**这样就是选择含有wola类名的p元素
.wola.hahua这个选择器选择同时包含wola和hahua两个类的元素，注这种选择器并没有入ie6的法眼，ie6残忍的拒绝支持。
.wola(空格).hahua这种写法就是选择含有wola类的元素的里边含有hahua类的所有后代元素，包括儿子，孙子，曾孙子等等。类似的div（空格）hahua就是选择d有hahua类且父亲是div的元素；
div>.hahua这种写法就是div中含有hahua类的直接儿子元素，不包括孙子等后代元素。然而ie6表示也不支持这种选择器；
E+F 相邻兄弟选择器，E和F两个元素具有一个相同的父元素，而且F元素跟在E元素后面（注意是相邻关系），这样就可以选择到F元素；然而ie6表示也不支持这种选择器；
E~F 通用兄弟元素选择器，选择E元素后面所有的兄弟元素，前提是拥有同一个父元素。然而ie6表示也不支持这种选择器；
群组选择器多个选择器具有相同样式的话，每个选择器之间用逗号“,”隔开；

属性选择器

.wola div[id] 选择父元素是含有wola类且含有id属性的元素；类似的 .wola div[id][href]就是选择父元素含有wola类且同时含有id和href属性的元素；然而ie6表示也不支持这种选择器；
div[id="mydiv"] 更加具体了，选择id属性值为mydiv的div元素；类似的 div[id="mydiv"][title="adiv"]就是选择id属性值为mydiv且title属性值为adiv的div元素；然而ie6表示也不支持这种选择器；
div[title~="wola"] 选择含有title属性值含有wola这个词的div元素，title属性值可以有几个词，但是只需有wola这个词就被选择；然而ie6表示也不支持这种选择器；
div[href^="http://"] 选择href属性值开头是http://的div元素；然而ie6表示也不支持这种选择器；
img[src$="jpg"] 选择src属性值结尾是jpg的img元素；这种选择器通常用于选择规定格式的元素；然而ie6表示也不支持这种选择器；
div[title="hua"]* 选择title属性值含有“hua”字符串的div元素；然而ie6表示也不支持这种选择器；
div[attr|="value"] 选择attr属性值为value或者以value-开头的所有元素；然而ie6表示也不支持这种选择器；

伪类选择器

同样:link, :visited, :hover, :active这些很熟悉了，就不多说了；不过要注意一点就是要按顺序写，不然可能会BOOM；

:focus 用于元素成为焦点，这个经常用于表单元素上； :hover在ie6下只有a元素支持； ie6-7不支持 :active和:focus；
:enabled,disabled,:checked，这三个伪类成为UI元素状态伪类，主要用于form元素，最常见的比如type="text"有enable和disabled两种状态；而单选框和复选框有checked和unchecked两种状态； ie6-8表示不支持这三个伪类选择器；
:first-child 选择某个元素的第一个子元素；
:last-child 选择某个元素的最后一个子元素；
:nth-child() 这里分两种情况，贴上例子代码

<div id="haha">
  	<div>123</div>
  	<div>123</div>
  	<div>123</div>
  	<div>123</div>
  	<div>123</div>
  	<div>123</div>
  	<div>123</div>
 </div>

#haha div:nth-child(3){
	color: red;
}

第三个div就会字体变红色，请注意是第三个而不是第四个，也就是说不是从0算起；

#haha div:nth-child(n){
	color: red;
}

所有的子div字体都会变红色；

#haha div:nth-child(2n){
	color: red;
}

偶数的子div字体就会变红色；

#haha div:nth-child(2n-1){
	color: red;
}

奇数的子div字体就会变红色；

#haha div:nth-child(n+5){
	color: red;
}

从第五个子div开始字体变红色

#haha div:nth-child(-n+5){
	color: red;
}

前五个子div字体变红色；

#haha div:nth-child(4n+1){
	color: red;
}

每隔4个子div元素字体变红色； **ie6-8和FF3-**浏览器不支持:nth-child选择器；

#haha div:nth-of-type(even){
	color: red;
}

奇数的子div字体颜色变红；类似的even改成odd就是偶数； **ie6-8和FF3-**浏览器不支持:nth-of-type选择器；

#haha div:not(:first-child){
	color: red;
}

除了第一个子div外，其他都字体颜色变成红色

input:not([type="submit"]) {border: 1px solid red;}

除了submit之外，其他input元素的边框都改变； ie6-8不支持:not()选择器；

p::first-line {font-weight:bold;}

   ::selection {
	background: 颜色值；
	color:颜色值；
   }
   /*Mozilla Firefox*/
   ::-moz-selection {
	background: 颜色值；
	color:颜色值；
    }

本文参考出处：W3CPLUS

转载于:https://my.oschina.net/daladida/blog/719763

关注