CSS 学习笔记 - 选择器

男娘i 2022-12-02 10:45 271阅读 0赞

### CSS 学习笔记 ###

*  选择器列表
 *  基础选择器
 *   *  1.通配选择器
     *  2.元素选择器
     *  3.类选择器
     *  4.ID选择器
     *  5.属性选择器
     *  6.伪类选择器
     *   *  :not
         *  an+b 常用举例
         *  :nth-child(an+b)
         *  :nth-of-type(an+b)
         *  :target
     *  7.伪元素
 *  关系选择器
 *   *  1. 兄弟选择器 ~
     *  2. 相邻兄弟选择器 +
     *  3. 子选择器 >
     *  4. 后代选择器 \`空格\`
 *  参考资料

CSS 的细节太多，只摘重点，以便查阅。

![盗图官网][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70_pic_center]

# 选择器列表 #

同时匹配多个选择器，可以用逗号分隔

h1, h2, h3, h4, h5, h6 {  font-family: helvetica; }

# 基础选择器 #

## [1.通配选择器][1.] ##

匹配所有元素

* { 
    	color:#f00;
      }

## [2.元素选择器][2.] ##

通过node节点名称匹配元素

span { 
      background-color: #F00;
      color: #FFF;
    }
    
    div { 
      background-color: #00F;
      color: #F0F;
    }

## [3.类选择器][3.] ##

匹配添加了此`类`的元素。

.className { 
      background-color: #F00;
    }

## [4.ID选择器][4.ID] ##

按`id`匹配元素。

.idName { 
      background-color: #0F0;
    }

## [5.属性选择器][5.] ##

通过已经存在的属性名或属性值匹配元素。例：`input[type="hidden"]` 取隐藏的input

<table> 
 <thead> 
  <tr> 
   <th align="left">选择器</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">[属性名]</td> 
   <td align="left">匹配所有包含此属性的元素</td> 
  </tr> 
  <tr> 
   <td align="left">[属性名<code>=</code>"属性值"]</td> 
   <td align="left">匹配包含此<code>属性</code>且等于给定<code>值</code>的元素</td> 
  </tr> 
  <tr> 
   <td align="left">[属性名<code>~=</code>"属性值"]</td> 
   <td align="left">匹配值由多个<code>空格</code>分隔，且包含一个给定<code>值</code>的元素<br>例：<code>lang="en-us en-gb en-au en-nz"</code>中任何一个</td> 
  </tr> 
  <tr> 
   <td align="left">[属性名<code>|=</code>"值前缀"]</td> 
   <td align="left">匹配值带有指定<code>前缀</code>且以<code>-</code>为连接符的元素</td> 
  </tr> 
  <tr> 
   <td align="left">[属性名<code>^=</code>"属性值开头字符"]</td> 
   <td align="left">匹配属性值以给定<code>字符</code>开头的元素</td> 
  </tr> 
  <tr> 
   <td align="left">[属性名<code>$=</code>"属性值结尾字符"]</td> 
   <td align="left">匹配属性值以给定<code>字符</code>结尾的元素</td> 
  </tr> 
  <tr> 
   <td align="left">[属性名<code>*=</code>"目标字符"]</td> 
   <td align="left">匹配属性值包含<code>目标字符</code>的元素</td> 
  </tr> 
  <tr> 
   <td align="left">[属性名<code>=</code>"属性值" <code>i</code>]</td> 
   <td align="left">匹配值时忽略大小写</td> 
  </tr> 
  <tr> 
   <td align="left">[属性名<code>=</code>"属性值" <code>s</code>]</td> 
   <td align="left">匹配值时区分大小写</td> 
  </tr> 
 </tbody> 
</table>

## [6.伪类选择器][6.] ##

伪类一般跟在其它选择器后，是对前者的补充描述。

### :not ###

[:not][not] 通常来用排除某个条件。例：选择id`main`子级的`div`中`aaa`属性不以`ss`结尾的元素

document.querySelectorAll('#main>div:not([aaa$="ss"])')

### an+b 常用举例 ###

<table> 
 <thead> 
  <tr> 
   <th align="left">例子</th> 
   <th align="left">效果</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">:nth-child(-n+a)</td> 
   <td align="left">前a名</td> 
  </tr> 
  <tr> 
   <td align="left">:nth-last-child(-n+a)</td> 
   <td align="left">后a名</td> 
  </tr> 
  <tr> 
   <td align="left">:nth-child(n+a)</td> 
   <td align="left">从第a个开始</td> 
  </tr> 
  <tr> 
   <td align="left">:nth-last-child(n+a)</td> 
   <td align="left">从倒数第a个开始</td> 
  </tr> 
  <tr> 
   <td align="left">:nth-child(an)</td> 
   <td align="left">a和a的倍数行</td> 
  </tr> 
  <tr> 
   <td align="left">:nth-child(2n) <code>或</code> :nth-child(even)</td> 
   <td align="left">偶数行</td> 
  </tr> 
  <tr> 
   <td align="left">:nth-child(2n+1) <code>或</code> :nth-child(odd)</td> 
   <td align="left">奇数行</td> 
  </tr> 
 </tbody> 
</table>

### [:nth-child(an+b)][nth-child_an_b] ###

1.  在兄弟元素中匹配，但效果只应用在当前元素上。（计算`索引`时把兄弟都算上了，应用`样式`时只顾自己）  
    1.1. <p> 和 <h1> 一起有Bug。可以用 `:nth-of-type()` 解决。
2.  a,b常量整数。`n`从`0`开始，`子元素`从`1`开始。a、n、b的位置不能变。
3.  [:nth-last-child()][nth-last-child] 从后向前匹配的版本。

### [:nth-of-type(an+b)][nth-of-type_an_b] ###

*  与 :nth-child(an+b) 类似。但只在当前选择的元素中匹配。
 *  [:nth-last-of-type][nth-last-of-type] 从后向前匹配的版本。

### [:target][target] ###

用于高亮目标对象。（点链接跳转锚点后就会生效）

## [7.伪元素][7.] ##

*  在元素的前后添加额外内容
 *  对占位符、段落首行首字 设置样式

<table> 
 <thead> 
  <tr> 
   <th>伪元素</th> 
   <th>例子</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/::before" rel="nofollow">::before</a></td> 
   <td>:hover::before {content: “★”;}</td> 
   <td>鼠标悬停时元素前面显示 ★</td> 
  </tr> 
  <tr> 
   <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/::after" rel="nofollow">::after</a></td> 
   <td></td> 
   <td>同理在元素后添加元素</td> 
  </tr> 
  <tr> 
   <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/::placeholder" rel="nofollow">::placeholder</a></td> 
   <td></td> 
   <td>设置站位符样式</td> 
  </tr> 
  <tr> 
   <td><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/::selection" rel="nofollow">::selection</a></td> 
   <td>::selection {color:red; background-color:gold;}</td> 
   <td>选中文字为黄底红字</td> 
  </tr> 
 </tbody> 
</table>

# 关系选择器 #

## 1. 兄弟选择器 ~ ##

当`selectorA` 与 `selectorB` 在同一父级下。匹配`selectorA`之后的所有`selectorB`。

selectorA ~ selectorB {  ... }

## 2. 相邻兄弟选择器 + ##

匹配`selectorB` ，条件是：当`selectorA` 与 `selectorB` 同一父级下，且 `selectorB`紧跟在`selectorA` 之后。

selectorA + selectorB {  ... }

## 3. 子选择器 > ##

匹配`selectorParent`子级的`selectorChildren` 只匹配儿子，不管孙子

selectorParent > selectorChildren {  ... }

## 4. 后代选择器 `空格` ##

匹配`selectorAncestor`下所有`selectorPosterity`子子孙孙，所有后代

selectorAncestor selectorPosterity {  ... }

# 参考资料 #

[MDN 之：CSS（层叠样式表）][MDN _CSS]  
[MDN 之：选择器][MDN]  
[后盾人 CSS 文字教程][CSS]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2p4NTIw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/fe4aba6efb9b45d0837812c64d559eb1.png
[1.]: https://wiki.developer.mozilla.org/zh-CN/docs/Web/CSS/Universal_selectors
[2.]: https://wiki.developer.mozilla.org/zh-CN/docs/Web/CSS/Type_selectors
[3.]: https://wiki.developer.mozilla.org/zh-CN/docs/Web/CSS/Class_selectors
[4.ID]: https://wiki.developer.mozilla.org/zh-CN/docs/Web/CSS/ID_selectors
[5.]: https://wiki.developer.mozilla.org/zh-CN/docs/Web/CSS/Attribute_selectors
[6.]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes
[not]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/:not
[nth-child_an_b]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child
[nth-last-child]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-last-child
[nth-of-type_an_b]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-of-type
[nth-last-of-type]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-last-of-type
[target]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/:target
[7.]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements
[MDN _CSS]: https://developer.mozilla.org/zh-CN/docs/Web/CSS
[MDN]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Selectors
[CSS]: https://houdunren.gitee.io/note/css/1%20%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86.html