css3选择器 与css选择器汇总

css3选择器

1、基本选择器

（1）通配符选择器（*）

* {
  marigin: 0;
  padding: 0;
}

　（2）标签选择器 如div   p  li

p{
    background-color: grey;
      color: orange;
}

　　(3) 类选择器（.class）

.important {
  font-weight: bold;
  color: yellow;
}

　　(4)多类名 选择器

p.items {
  color: red;
}

　（5）id选择器

#first {
  background: lime;
  color: #000;
}

　（6）群组选择器

.first, .last {
  background: green;
  color: yellow;
  border: 1px solid #ccc;
}

2、复杂选择器

 

（1）后代选择器 

.demo li {
  color: blue;
}

（2）子元素选择器

ul > li {
  background: green;
  color: yellow;
}

（3）兄弟元素选择器

li + li {
  background: green;
  color: yellow;
  border: 1px solid #ccc;
}

　（4）通用兄弟选择器

.active ~ li {
  background: green;
  color: yellow;
  border: 1px solid #ccc;
}

　　

3、CSS3属性选择器

[attribute] [target]选择所有带有target属性元素

.demo a[href][title] {
}

　　

[attribute=value] [target=-blank]选择所有使用target="-blank"的元素

/**选择了.demo下id="first"的a元素 **/
.demo a[id="first"] {
}
 
/**选择了.demo下id="first"，且拥有title属性的a元素 **/
.demo a[id="first"][title] {
}

　　

[attribute^=value] a[src^="https"]选择每一个src属性的值以"https"开头的元素

a[href^="mailto:"] {
}

　　

[attribute$=value] a[src$=".pdf"]选择每一个src属性的值以".pdf"结尾的元素

a[href$="png"] {
}

　　

[attribute*=value] a[src*="runoob"]选择每一个src属性的值包含子字符串"runoob"的元素 元素值匹配。

a[title*="site"] {

}

 

E[attribute|=value]

img[src|="figure"] {
 
}
 
<img src="figure-0.png" alt="图1">
<img src="figure-1.png" alt="图1">
<img src="figure-2.png" alt="图1">

　

E[attribute~=value]

a[class~="links"] {
}
 
<a href="" class="links item">hangge.com</a>

 4、动态伪类选择器

a:link {color:gray;} /*链接没有被访问时前景色为灰色*/
a:visited{color:yellow;} /*链接被访问过后前景色为黄色*/
a:hover{color:green;} /*鼠标悬浮在链接上时前景色为绿色*/
a:active{color:blue;} /*鼠标点中激活链接那一下前景色为蓝色*/

5、UI元素状态伪类选择器

• <input type="text"/> 有 enable 和 disabled 两种状态，前者为可写状态后者为不可写状态
• <input type="radio"/> 和 <input type="checkbox"/> 有 checked 和 unchecked 两种状态。

• input[type="text"]:disabled {
  }
   
  /** 下面对所选中的的复选框设置样式 **/
  input[type="checkbox"]:checked {
  }
  

5、CSS3伪类选择器

:nth-child(n) p:nth-child(2)选择每个p元素是其父级的第二个子元素 父类的2个元素要是标签，不是则不匹配。

.demo li:nth-child(3) {
}
 
/** 选择.demo下所有偶数位置的li子元素（2,4,6...）  **/
.demo li:nth-child(even) {
}
 
/** 选择.demo下第5个位置起的所有li子元素（5,6,7...）  **/
.demo li:nth-child(n+5) {
}
 
/** 选择.demo下前5个li子元素（1,2,3,4,5）  **/
.demo li:nth-child(-n+5) {
}
 
/** 选择.demo下从1起，隔3取1的所有li子元素（1,5,9...）  **/
.demo li:nth-child(4n+1) {
}

　　

:nth-last-child(n) p:nth-last-child(2)选择每个p元素的是其父级的第二个子元素，从最后一个子项计数

.demo li:nth-last-child(3) {
}
 
/** 选择.demo下倒数第2个起偶数位置的li子元素（倒数第2个,倒数第4个...）  **/
.demo li:nth-last-child(even) {
}
 
/** 选择.demo下倒数第5个位置起的所有li子元素（倒数第5个,倒数第6个...）  **/
.demo li:nth-last-child(n+5) {
}
 
/** 选择.demo下最后5个li子元素（倒数第1,2,3,4,5）  **/
.demo li:nth-last-child(-n+5) {
}
 
/** 选择.demo下从最后1个起，隔3取1的所有li子元素（倒数第1,5,9...）  **/
.demo li:nth-last-child(4n+1) {
}

　　

:last-child p:last-child指定只有选择每个p元素是其父级的最后一个子级。

.demo li:last-child {
}

　　

:first-child  p:first-child指定只有当<p>元素是其父级的第一个子级的样式

.demo li:first-child {
}

E:only-child

.demo p:only-child {
}

E:empty

p:empty {
  display: none;
}

　　

• E:first-of-type：类似于 E:fisrt-child，只不过它选择父元素内具有指定类型的第一个 E 元素
• E:last-of-type：类似于 E:last-child，只不过它选择父元素内具有指定类型的最后一个 E 元素
• E:nth-of-type(n)：类似于 E:nth-child(n)，只不过它选择父元素内具有指定类型的第 n 个 E 元素
• E:nth-last-of-type(n)：类似于 E:nth-last-child(n)，只不过它选择父元素内具有指定类型的倒数第 n 个 E 元素
• E:only-of-type：类似于 E:only-child，只不过它选择父元素只包含一个同类型子元素，且该子元素匹配 E 元素

6、否定伪类选择器

匹配所有除元素 F 外的 E 元素，类似以 jQuery 中的 :not 选择器。

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

　

7、CSS3伪元素选择器

是一个行内元素，需要转换成块:display:block  float:**position:。

注意： Before 与 after

必须添加content,哪怕不设置内容，也需要content:””。

E:after、E:before在旧版本里是伪类，在新版本里是伪元素，新版本下E:after、

E:before会被自动识别为E::after、E::before，按伪元素来对待，这样做的目的是用来做兼容处理。

:first-letter p:first-letter选择每一个<P>元素的第一个字母或者第一个汉字

/** 首字下沉 **/
p::first-letter {
  font-size: 56px;
  float:left;
  margin-right:3px;
}

　　

:first-line p:first-line选择每一个<P>元素的第一行

/** 比如说改变每个段落的第一行文本的样式 **/
p::first-line {
  font-weight:bold;
}

　　

:before p:before在每个<p>元素之前插入内容  使用contant插入内容

.clearfix::before {clear: both;}

　　

:after p:after在每个<p>元素之后插入内容

::selection 

 

用来改变浏览网页选中文的默认效果。::selection 只能设置两个属性：一个就是 background,另一个就是 color 属性。

p::selection {
  background: red;
  color: #fff;
}