css选择器总结

一、属性选择器

1. 属性选择器

属性选择器(Attribute selector)让你可以基于属性来定位一个元素。你可以只指定该元素的某个属性，这样所有使用该属性——而不管它的值——的这个元素都将被定位，也可以更加明确并定位在这些属性上使用特定值的元素 —— 这就是属性选择器展示它们的威力的地方。

有6个不同类型的属性选择器attr：

 

[att=value]   // 该属性有指定的确切的值。
[att~=value]  //该属性的值必须是一系列用空格隔开的多个值，(比如，class=”title featured home”)，而且这些值中的一个必须是指定的值”value”。
[att|=value] //属性的值就是“value”或者以“value”开始并立即跟上一个“-”字符，也就是“value-”。(比如lang=”zh-cn”)
[att^=value] // 该属性的值以指定值开始。
[att$=value] //该属性的值包含指定的值(而无论其位置)。
[att*=value] //该属性的值以指定的值结束

 

---------------------------------

二、子选择器 >

子选择器用符号“>”表示。它允许你定位某个元素的第一级子元素。

比如，如果你想匹配所有的作为你的网站侧栏的div的子元素的h2元素，而不是可能是在div元素内的所有h2元素，也不是div的孙元素(或者更低级别的)，你就可以使用下面的选择器：

div#sidebar > h2 {   font-size: 20px;   }

div#sidebar  h2 {   font-size: 20px;   }  // div元素内的所有h2元素,包括子、孙、子子孙孙的h2

 

---------------------------------

三、 兄弟 + ~

兄弟组合

有两类兄弟组合：临近兄弟组合和普通兄弟组合

• 临近兄弟组合 +

该选择器使用加号“+”来链接前后两个选择器。选择器中的元素有同一个父亲，而且第二个必须紧紧的跟着第一个。

• 普通兄弟组合 ~

普通兄弟组合则能匹配所有

CSS:

p + h2{color:red;   } 
p ~ h2{font-weight:700;   }

HTML:

<p>咳咳，内容。</p>
<h2>标题1</h2>
<h2>标题2</h2>

 

---------------------------------

4. 伪类

:link 
:visited
:hover
:active 
:focus。

:first-child

:first-child伪类允许你定位某个元素第一个子元素

语言伪类

:lang()  //:lang(en)

语言伪类:lang()，允许你匹配一个基于它的语言的元素

---------------------------------

5. CSS 3 伪类

:target

当你使用锚点(片段标识符 fragment identifier)的时候，比如，http://www.smashingmagazine.com/2009/08/02/bauhaus-ninety-years-of-inspiration/#comments，这“#comments”就是一个片段标识符，你就可以使用:target伪类来控制目标的样式

 

:enabled
:disabled 
:checked 

---------------------------------------

6. CSS 3 结构伪类

:nth-child(n)  //ul li:nth-child(3)

:nth-child()伪类允许你定位某个父级元素的一个或多个特定的子元素.

ul li:nth-child(3n+4) {   color: yellow;   }
// 你可以使用表达式来定位子元素。比如，下面的表达式将从第四个开始匹配每第三个元素。

 

--------------------------------------

::before 和 ::after

::before和::after 伪元素用于在一个元素的前面或后面插入内容，纯CSS方法。必须有content属性，，可以设置display,width\height\border\color 等属性；

这些元素将继承它们将附加的元素的大部分属性。可以做出很多效果

比如加书名号，或特定文字

 p.description::before { 
  content: "《";
  }
 p.description::after { 
  content: "》";
  }

------------------references------------------------------------------

https://blog.csdn.net/qq_27828675/article/details/73089649