.class标签

#id

*

element

element, element

element > element

element + element 选中所有前面一个元素是div元素的p元素 div + p

  1. <body>
  2. <div></div>
  3. <p>被命中</p>
  4. <p>不被命中，因为前面一个元素不是div元素</p>
  5. </body>

element ~ element p~ul 选中所有前面有p元素的每个ul元素

  1. <body>
  2. <ul><li>不被命中，因为前面没有p元素</li></ul>
  3. <p>第一段。</p>
  4. <ul>
  5.   <li>当前ul被命中</li>
  6. </ul>
  7. <ul>
  8.   <li>当前ul被命中</li>
  9. </ul>
  10. </body>

[attribute] 获取具备某个属性的所有元素 [href], 可以用此方法获取document.querySelector(‘[href]’)

[attribute=value]等于某个值

[attribute~=value]包含某个值,将属性值以空格分割成数组，然后和数组里某一个值完全匹配的才能命中

  1. <img src="/i/eg_tulip.jpg" title="tulip flower" rel="apple-touch-icon-precomposed" />
  3. [title~=flower] // 注意，属性值用空格分割，要全等于才命中 [title~=f] 这种不命中
  4. {
  5. border:5px solid yellow;
  6. }

[attribute|=value]命中以什么开头的元素，用-分割，并且开头要完全相等才能匹配，例如

  1. [class|=en] 
  2. className="en" 匹配
  3. className="en-xxx" 匹配
  4. className="enxxx" 不匹配

[attribute^=value] 以什么开头的值[href^=https]

[attribute$=value] 以什么结束的值[src$=”.js”]注意$=后面必须用””扩起来使用，否则会抛出异常

[attribute=value] 命中包含匹配值的元素[src=”.js”]注意*=后面必须用””扩起来使用，否则会抛出异常

p:first-letter 命中p元素中的首个文字

  1. p:first-letter
  2. {
  3. font-size:200%;
  4. color:#8A2BE2;
  5. }
  6. <p>我爱你</p> <!-- 命中"我"字 -->

p:first-line 命中p元素中的第一行的内容

p:first-child 命中任意父元素中第一个元素是p的元素，并且不允许迭代计算

  1. <body>
  2.     <p>被命中</p> <!-- 因为他是body中第一个p元素 -->
  3.     <h1><span>不被命中</span></h1>
  4.     <p><p>虽然我是p元素下的第一个p元素，但是我不被命中</p>不被命中</p>
  5.     <div>
  6.         <p>被命中</p> <!-- 因为他是div中第一个p元素 -->
  7.         <p>不被命中</p>
  8.     </div>
  9. </body>

p:last-child 命中其父元素中最后一个子元素是p的元素，并且不允许迭代计算

p:only-child 选择属于其父元素的唯一子元素的每个

元素。

  1. <body>
  2. <h1>任意内容<p>被命中，因为我是h1中最后一个元素并且是p元素</p></h1>
  3. <div><p>被命中，因为我是div中最后一个元素并且是p元素</p></div>
  4. <p>第一个段落。<p>第一个段落。</p></p>
  5. <p>第二个段落。<p>第一个段落。</p><p>第一个段落。</p></p>
  6. <p>第三个段落。</p>
  7. <p>第四个段落。</p>
  8. <p>被命中，因为我是body中最后一个元素并且是p元素。</p>
  9. </body>

p:before 在每个p元素的开始位置追加内容

  1. p:before
  2. {
  3. content:"台词：";
  4. }
  5. <p>我是唐老鸭。</p>
  6. <p>我住在 Duckburg。</p>
  8. 结果
  9. <p>::before我是唐老鸭。</p>
  10. <p>::before我住在 Duckburg。</p>
  11. 最终结果展示
  12. 台词：我是唐老鸭。
  13. 台词：我住在 Duckburg。

p:after 在每个p元素的结束位置追加内容

  1. .item {
  2.   &:last-child:after {
  3.     border-bottom: none;
  4.   }
  5.   &:after{
  6.     content: ' ';
  7.     width: 96%;
  8.     margin: 0 auto;
  9.     border-bottom: 1px solid #eee;
  10.     display: block;
  11.   }
  12. }

p:first-of-type 选择属于其父元素的首个

元素的每个

元素。

p:last-of-type 选择属于其父元素的最后

元素的每个

元素。

p:only-of-type 选择属于其父元素唯一的

元素的每个

元素。

注意：first-of-type 与 first-child的区别

first-of-type验证的是类型，first-child验证的是子内容，例

  1. <div>
  2. <!-- div的第一个p元素 p:first-of-type 命中，p:first-child 命中-->
  3. <p></p>
  4. <!-- div的第一个h1元素 h1:first-of-type 命中，h1:first-child 不命中，因为不是div的第一个元素-->
  5. <h1></h1> 
  6. </div>

p:nth-child(2) 选择父元素下的第二个元素并且是p元素

p:nth-last-child(2) 选择父元素下的倒数第二个元素并且是p元素

p:nth-of-type(2) 选择父元素下第二个p元素

p:nth-last-of-type(2) 选择父元素下第二个p元素

p:nth-child(odd) 选择父元素下的奇数位的p元素

p:nth-child(even) 选择父元素下的偶数位的p元素

p:nth-child(an + b) 选择父元素下的an+b位置的元素

  1. 使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。
  2. 在这里，我们指定了下标是 3 的倍数的所有 p 元素的背景色：
  3. p:nth-child(3n+0)
:link a:link 选择所有未被访问的链接。 1
:visited a:visited 选择所有已被访问的链接。 1
:active a:active 选择激活链接（被按下时，触发）。 1
:hover a:hover 选择鼠标指针位于其上的链接。 1
:focus input:focus 选择获得焦点的 input 元素。 2
:root :root 选择文档的根元素。 3
:empty p:empty 选择没有子元素的每个

元素（包括文本节点）。

 3
:target #news:target 选择当前活动的 #news 元素。 3
:enabled input:enabled 选择每个启用的 元素。 3
:disabled input:disabled 选择每个禁用的 元素 3
:checked input:checked 选择每个被选中的 元素。 3
:not(selector) :not(p) 选择非

元素的每个元素。

 3
::selection ::selection 选择被用户选取的元素部分。 3