CSSセレクターの整理

CSS は非常に簡単だと思っている人が多いですが、実際には CSS をうまく書くのは簡単ではありません。 CSS の各ポイントには実際に が含まれています。セレクターを例にとると、CSS セレクターは次の 5 つのカテゴリに大別できます。

• CSS特别简单，但其实真正写好CSS并不容易，CSS的每一点其实内容都很多，就拿选择器来说，CSS选择器大概可以分为五类：

  • 元素选择器

  • 关系选择器

  • 属性选择器

  • 伪类选择器

  • 伪对象选择器

  元素选择器

  选择器	名称	描述
  *	通配选择器	选择所有的元素
  E	元素选择器	选择指定的元素
  #idName	id选择器	选择id属性等于idName的元素
  .className	class选择器	选择class属性包含className的元素

  元素选择器只要是写CSS都会经常用，这一块的内容非常简单，没什么特别要说的。

  关系选择器

  选择器	名称	描述
  E F	包含选择器	选择所有包含在E元素里面的F元素
  E>F	子选择器	选择所有作为E元素的子元素F
  E+F	相邻选择器	选择紧贴在E元素之后的F元素
  E~F	兄弟选择器	选择E元素所有兄弟元素F

  这里要注意几点：

  • 子选择器只能选中字元素，而不能选中孙辈；而包含选择符将会选中所有符合条件的后代，包括儿子，孙子，孙子的孙子...

  • 相邻选择符只会选中符合条件的相邻的兄弟元素；而兄弟选择符会选中所有符合条件的兄弟元素，不强制是紧邻的元素。

  • 在Android Browser4.2.*及以下，伪类选择器:checked与兄弟选择符一起使用会有一个bug，查看详情。

  属性选择器

  関係セレクター
  疑似クラスセレクター
  疑似オブジェクト セレクター

  要素セレクター

  选择器	描述
  E[att]	选择具有att属性的E元素
  E[att="val"]	选择具有att属性且属性值等于val的E元素
  E[att~="val"]	选择具有att属性且属性值其中一个等于val的E元素（包含只有一个值且该值等于val的情况）
  E[att|="val"]	选择具有att属性且属性值为以val开头并用连接符-分隔的字符串的E元素，如果属性值仅为val，也将被选择
  E[att^="val"]	选择具有att属性且属性值为以val开头的字符串的E元素
  E[att$="val"]	选择具有att属性且属性值为以val结尾的字符串的E元素
  E[att*="val"]要素セレクター	属性セレクター

  セレクター / th>	名前	説明

  *🎜🎜ワイルドカードセレクター🎜🎜すべての要素を選択🎜🎜🎜E🎜🎜要素セレクター🎜🎜指定した要素を選択🎜🎜🎜#idName🎜🎜id selector🎜🎜id idNameと等しい属性を持つ要素を選択🎜🎜 🎜.className🎜🎜クラスセレクター🎜🎜class属性にclassNameが含まれる要素を選択します🎜🎜🎜🎜🎜 CSSを記述するだけの要素セレクターがよく使われます。このセクションの内容は非常にシンプルであり、特に言うことはありません。

  関係セレクター

  🎜🎜E F🎜🎜セレクターが含まれます🎜🎜E 要素に含まれるすべての F 要素を選択します🎜🎜🎜E&gt ;F🎜🎜子セレクター🎜🎜 E 要素の子であるすべての F 要素を選択します🎜🎜🎜E+F🎜🎜隣接セレクター🎜🎜 E 要素の後の F 要素をすぐに選択します🎜 🎜🎜E~F🎜🎜兄弟セレクター🎜🎜 E 要素のすべての兄弟要素 F を選択します🎜🎜🎜🎜🎜 ここで注意すべき点がいくつかあります:
  • 🎜子セレクターは単語要素のみを選択できますが、孫は選択できません。包含セレクターは、息子、孫、孫の孫など、条件を満たすすべての子孫を選択します。
  • 🎜隣接セレクターは条件を満たす隣接する兄弟要素のみを選択しますが、兄弟セレクターは条件を満たすすべての兄弟要素を選択しますが、直接隣接する要素は必須ではありません。
  • 🎜Android Browser4.2.* 以下では、擬似クラスセレクター :checked を兄弟セレクターと併用するとバグが発生します。詳細を確認してください。

  属性セレクター

  セレクター	名前	説明

  🎜🎜E[att]🎜🎜 att 属性を持つ E 要素を選択します🎜🎜🎜E[att="val "] 🎜🎜 att 属性を持ち、属性値が val に等しい E 要素を選択します🎜🎜🎜E[att~="val"]🎜🎜 E 要素を選択しますatt 属性と属性値が val に等しい E 要素の 1 つ (値が 1 つしかなく、値が val に等しい場合を含む)🎜🎜🎜E[att|= "val"]🎜🎜属性値が val で始まり結合子 - で区切られた文字列である att 属性と E 要素を選択します。属性値が val のみの場合は、も選択できます🎜🎜🎜E[att^= "val"]🎜🎜 att 属性を持ち、属性値が val で始まる文字列である E 要素を選択します🎜🎜🎜E[att$="val"]🎜 🎜 att 属性を持ち、属性値が val で終わる文字列である E 要素を選択します🎜🎜🎜E[ att*="val"]🎜🎜 att 属性を持ち、その属性値が val を含む文字列の E 要素である E 要素を選択します 🎜🎜🎜🎜

  疑似クラスセレクター

  セレクター	説明

  訪問される前にハイパーリンクのスタイルを設定しますE: Visited

  セレクター	説明
  E:linkE:link	设置超链接a在未被访问前的样式
  E:visited	设置超链接a在其链接地址已被访问过时的样式
  E:hover	设置元素鼠标在其悬停时的样式
  E:active	设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式
  E:focus	设置元素在成为输入焦点（该元素的onfocus事件发生）时的样式。(一般应用于表单元素)
  E:checked	匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
  E:enabled	匹配用户界面上处于可用状态的元素E。(一般应用于表单元素)
  E:disabled	匹配用户界面上处于禁用状态的元素E。(一般应用于表单元素)
  E:empty	匹配没有任何子元素（包括text节点）的元素E
  E:root	匹配E元素在文档的根元素。在HTML中，根元素永远是HTML
  E:not(s)	匹配不含有s选择符的元素E
  E:first-child	匹配父元素的第一个子元素E
  E:last-child	匹配父元素的最后一个子元素E
  E:only-child	匹配父元素仅有的一个子元素E
  E:nth-child(n)	匹配父元素的第n个子元素E
  E:nth-last-child(n)	匹配父元素的倒数第n个子元素E
  E:first-of-type	匹配同类型中的第一个同级兄弟元素E
  E:last-of-type	匹配同类型中的最后一个同级兄弟元素E
  E:only-of-type	匹配同类型中的唯一的一个同级兄弟元素E
  E:nth-of-type(n)	匹配同类型中的第n个同级兄弟元素E
  E:nth-last-of-type(n)

  🎜リンクアドレスにアクセスしたときのハイパーリンクのスタイルを設定します🎜🎜🎜🎜E:hover🎜🎜マウスをホバーしたときの要素のスタイルを設定します。 🎜🎜🎜E:active🎜🎜ユーザーによってアクティブ化されたときの要素のスタイルを設定します (マウスのクリックとリリースの間に発生するイベント) 🎜🎜🎜🎜E:focus🎜🎜要素が入力フォーカスになったとき (要素の onfocus イベントが発生したとき)、要素のスタイルを設定します。 (通常はフォーム要素に適用されます) 🎜🎜🎜🎜<code>E:checked🎜🎜 は、ユーザー インターフェイスで選択された要素 E と一致します。 (入力タイプがラジオとチェックボックスの場合に使用されます)🎜🎜🎜🎜E:enabled🎜🎜は、ユーザー インターフェイスで使用可能な状態にある要素 E と一致します。 (通常はフォーム要素に適用されます) 🎜🎜🎜🎜E:disabled🎜🎜 は、ユーザー インターフェイスの無効な要素 E と一致します。 (通常、フォーム要素に適用されます)🎜🎜🎜🎜E:empty🎜🎜は、子要素 (テキストを含む) を持たない要素 E🎜🎜🎜🎜E:root と一致します。ノード) 🎜🎜ドキュメントのルート要素の E 要素と一致します。 HTML では、ルート要素は常に HTML です🎜🎜🎜🎜E:not(s)🎜🎜要素 E🎜🎜🎜🎜E:first-child と一致します🎜🎜最初の子要素 ​​E🎜🎜🎜🎜E:last-child と一致します🎜🎜 最後の子要素 ​​E🎜🎜🎜🎜E :only-child と一致します🎜🎜親要素の子要素 ​​E のみ🎜🎜🎜🎜E:nth-child(n)🎜🎜は親要素の n 番目の子要素 ​​E と一致します🎜🎜🎜🎜E:nth- last-child(n)🎜🎜は、親要素の下から n 番目の子要素 ​​E と一致します🎜🎜🎜🎜E:first-of-type🎜🎜は、最初の兄弟要素と一致します同じ型の E 🎜🎜🎜🎜E:last-of-type🎜🎜同じ型の最後の兄弟要素 E と一致します🎜🎜 🎜🎜E:only-of-type🎜🎜同じ型の唯一の兄弟要素 E と一致します🎜🎜🎜🎜<code>E:nth-of-type(n) code>🎜🎜 n 番目の兄弟要素 E🎜🎜🎜🎜<code>E:nth-last-of-type(n)🎜🎜同じタイプの兄弟要素 E🎜🎜🎜🎜 の n 番目の兄弟要素と一致します

  注意事项：

  • 超链接的4种状态(访问前，鼠标悬停，当前被点击，已访问)，需要有特定的书写顺序才能生效；a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后。

  • E:first-child选择符，E必须是它的兄弟元素中的第一个元素，换言之，E必须是父元素的第一个子元素。与之类似的伪类还有E:last-child，只不过情况正好相反，需要它是最后一个子元素。

  关于:not()的用法

  假定有个列表，每个列表项都有一条底边线，但是最后一项不需要底边线。

   li:not(:last-child) {
      border-bottom: 1px solid #ddd;
  }

  ログイン後にコピー

  ログイン後にコピー

  ログイン後にコピー

  上述代码的意思是：给该列表中除最后一项外的所有列表项加一条底边线。是不是很方便。

  关于:nth-child()的用法

  要使E:nth-child(n)生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素。:first-child、:last-child、:only-child、:nth-last-child(n)也是一样。
  nth-child(n)括号里的n可以是一个数字，一个关键字，或者一个公式。

  :nth-child(length) /*参数是具体数字 length为整数*/
  :nth-child(n) /*参数是n,n从0开始计算*/
  :nth-child(n*length) /*n的倍数选择，n从0开始算*/
  :nth-child(n+length) /*选择大于等于length后面的元素*/
  :nth-child(-n+length) /*选择小于等于length前面的元素*/
  :nth-child(n*length+1) /*表示隔几选一*/
  :nth-child(2n) / :nth-child(even) /*表示偶数*/
  :nth-child(2n+1) / :nth-child(odd) /*表示奇数*/

  ログイン後にコピー

  ログイン後にコピー

  ログイン後にコピー

  关于:...-child和:...-of-type的差异

  这两个系列的属性确实很相似，对于不熟悉的人可能很难区分。

  E:first-of-type 总是能命中父元素的第1个为E的子元素，不论父元素第1个子元素是否为E；而E:first-child里的E元素必须是它的兄弟元素中的第一个元素，否则匹配失效。E:last-of-type 与E:last-child也是同理。
  E:nth-of-type(n)总是能命中父元素的第n个为E的子元素，不论父元素第n个子元素是否为E；而E:nth-child(n)会选择父元素的第n个子元素E，如果第n个子元素不是E，则是无效选择符，但n会递增。
  关于:nth-child()与:nth-of-type()的区别可以看这篇文章

  用:empty区分空元素

  选择不包含子元素的p元素：

  p:empty

  ログイン後にコピー

  ログイン後にコピー

  ログイン後にコピー

  选择包含子元素的p元素：

  p:not(:empty)

  ログイン後にコピー

  ログイン後にコピー

  ログイン後にコピー

  伪对象选择器

  选择器	描述
  E:before/E::before	在目标元素E的前面插入的内容。用来和content属性一起使用
  E:after/E::after	在目标元素E的后面插入的内容。用来和content属性一起使用
  E:first-letter/E::first-letter	设置元素内的第一个字符的样式
  E:first-line/E::first-line	设置元素内的第一行的样式
  E::placeholder	设置元素文字占位符的样式。(一般用于input输入框)
  E::selection	设置元素被选择时的字体颜色和背景颜色

  注意事项：

  • ::placeholder在使用时需要加上各个浏览器的前缀；除了Firefox是 ::[prefix]placeholder，其他浏览器都是使用 ::[prefix]input-placeholder。

  总结

  选择器用得好其实可以让我们少些很多代码。其实还有一些东西没有展开来讲，比如:before和:after，后面专门写一篇文章来说。

  
  

  CSS は非常に簡単だと思っている人が多いですが、実際には CSS をうまく書くのは簡単ではありません。 CSS の各ポイントには実際に が含まれています。セレクターを例にとると、CSS セレクターは次の 5 つのカテゴリに大別できます。

  • CSS特别简单，但其实真正写好CSS并不容易，CSS的每一点其实内容都很多，就拿选择器来说，CSS选择器大概可以分为五类：

    • 元素选择器

    • 关系选择器

    • 属性选择器

    • 伪类选择器

    • 伪对象选择器

    元素选择器

    选择器	名称	描述
    *	通配选择器	选择所有的元素
    E	元素选择器	选择指定的元素
    #idName	id选择器	选择id属性等于idName的元素
    .className	class选择器	选择class属性包含className的元素

    元素选择器只要是写CSS都会经常用，这一块的内容非常简单，没什么特别要说的。

    关系选择器

    选择器	名称	描述
    E F	包含选择器	选择所有包含在E元素里面的F元素
    E>F	子选择器	选择所有作为E元素的子元素F
    E+F	相邻选择器	选择紧贴在E元素之后的F元素
    E~F	兄弟选择器	选择E元素所有兄弟元素F

    这里要注意几点：

    • 子选择器只能选中字元素，而不能选中孙辈；而包含选择符将会选中所有符合条件的后代，包括儿子，孙子，孙子的孙子...

    • 相邻选择符只会选中符合条件的相邻的兄弟元素；而兄弟选择符会选中所有符合条件的兄弟元素，不强制是紧邻的元素。

    • 在Android Browser4.2.*及以下，伪类选择器:checked与兄弟选择符一起使用会有一个bug，查看详情。

    属性选择器

    関係セレクター
    疑似クラスセレクター
    疑似オブジェクト セレクター

    要素セレクター

    选择器	描述
    E[att]	选择具有att属性的E元素
    E[att="val"]	选择具有att属性且属性值等于val的E元素
    E[att~="val"]	选择具有att属性且属性值其中一个等于val的E元素（包含只有一个值且该值等于val的情况）
    E[att|="val"]	选择具有att属性且属性值为以val开头并用连接符-分隔的字符串的E元素，如果属性值仅为val，也将被选择
    E[att^="val"]	选择具有att属性且属性值为以val开头的字符串的E元素
    E[att$="val"]	选择具有att属性且属性值为以val结尾的字符串的E元素
    E[att*="val"]要素セレクター	属性セレクター

    セレクター / th>	名前	説明

    *🎜🎜ワイルドカードセレクター🎜🎜すべての要素を選択🎜🎜🎜E🎜🎜要素セレクター🎜🎜指定した要素を選択🎜🎜🎜#idName🎜🎜id selector🎜🎜id idNameと等しい属性を持つ要素を選択🎜🎜 🎜.className🎜🎜クラスセレクター🎜🎜class属性にclassNameが含まれる要素を選択します🎜🎜🎜🎜🎜 CSSを記述するだけの要素セレクターがよく使われます。このセクションの内容は非常にシンプルであり、特に言うことはありません。

    関係セレクター

    🎜🎜E F🎜🎜セレクターが含まれます🎜🎜E 要素に含まれるすべての F 要素を選択します🎜🎜🎜E&gt ;F🎜🎜子セレクター🎜🎜 E 要素の子であるすべての F 要素を選択します🎜🎜🎜E+F🎜🎜隣接セレクター🎜🎜 E 要素の後の F 要素をすぐに選択します🎜 🎜🎜E~F🎜🎜兄弟セレクター🎜🎜 E 要素のすべての兄弟要素 F を選択します🎜🎜🎜🎜🎜 ここで注意すべき点がいくつかあります:
    • 🎜子セレクターは単語要素のみを選択できますが、孫は選択できません。包含セレクターは、息子、孫、孫の孫など、条件を満たすすべての子孫を選択します。
    • 🎜隣接セレクターは条件を満たす隣接する兄弟要素のみを選択しますが、兄弟セレクターは条件を満たすすべての兄弟要素を選択しますが、直接隣接する要素は必須ではありません。
    • 🎜Android Browser4.2.* 以下では、擬似クラスセレクター :checked を兄弟セレクターと併用するとバグが発生します。詳細を確認してください。

    属性セレクター

    セレクター	名前	説明

    🎜🎜E[att]🎜🎜 att 属性を持つ E 要素を選択します🎜🎜🎜E[att="val "] 🎜🎜 att 属性を持ち、属性値が val に等しい E 要素を選択します🎜🎜🎜E[att~="val"]🎜🎜 E 要素を選択しますatt 属性と属性値が val に等しい E 要素の 1 つ (値が 1 つしかなく、値が val に等しい場合を含む)🎜🎜🎜E[att|= "val"]🎜🎜属性値が val で始まり結合子 - で区切られた文字列である att 属性と E 要素を選択します。属性値が val のみの場合は、も選択できます🎜🎜🎜E[att^= "val"]🎜🎜 att 属性を持ち、属性値が val で始まる文字列である E 要素を選択します🎜🎜🎜E[att$="val"]🎜 🎜 att 属性を持ち、属性値が val で終わる文字列である E 要素を選択します🎜🎜🎜E[ att*="val"]🎜🎜 att 属性を持ち、その属性値が val を含む文字列の E 要素である E 要素を選択します 🎜🎜🎜🎜

    疑似クラスセレクター

    セレクター	説明

    訪問される前にハイパーリンクのスタイルを設定しますE: Visited

    セレクター	説明
    E:linkE:link	设置超链接a在未被访问前的样式
    E:visited	设置超链接a在其链接地址已被访问过时的样式
    E:hover	设置元素鼠标在其悬停时的样式
    E:active	设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式
    E:focus	设置元素在成为输入焦点（该元素的onfocus事件发生）时的样式。(一般应用于表单元素)
    E:checked	匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
    E:enabled	匹配用户界面上处于可用状态的元素E。(一般应用于表单元素)
    E:disabled	匹配用户界面上处于禁用状态的元素E。(一般应用于表单元素)
    E:empty	匹配没有任何子元素（包括text节点）的元素E
    E:root	匹配E元素在文档的根元素。在HTML中，根元素永远是HTML
    E:not(s)	匹配不含有s选择符的元素E
    E:first-child	匹配父元素的第一个子元素E
    E:last-child	匹配父元素的最后一个子元素E
    E:only-child	匹配父元素仅有的一个子元素E
    E:nth-child(n)	匹配父元素的第n个子元素E
    E:nth-last-child(n)	匹配父元素的倒数第n个子元素E
    E:first-of-type	匹配同类型中的第一个同级兄弟元素E
    E:last-of-type	匹配同类型中的最后一个同级兄弟元素E
    E:only-of-type	匹配同类型中的唯一的一个同级兄弟元素E
    E:nth-of-type(n)	匹配同类型中的第n个同级兄弟元素E
    E:nth-last-of-type(n)

    🎜リンクアドレスにアクセスしたときのハイパーリンクのスタイルを設定します🎜🎜🎜🎜E:hover🎜🎜マウスをホバーしたときの要素のスタイルを設定します。 🎜🎜🎜E:active🎜🎜ユーザーによってアクティブ化されたときの要素のスタイルを設定します (マウスのクリックとリリースの間に発生するイベント) 🎜🎜🎜🎜E:focus🎜🎜要素が入力フォーカスになったとき (要素の onfocus イベントが発生したとき)、要素のスタイルを設定します。 (通常はフォーム要素に適用されます) 🎜🎜🎜🎜<code>E:checked🎜🎜 は、ユーザー インターフェイスで選択された要素 E と一致します。 (入力タイプがラジオとチェックボックスの場合に使用されます)🎜🎜🎜🎜E:enabled🎜🎜は、ユーザー インターフェイスで使用可能な状態にある要素 E と一致します。 (通常はフォーム要素に適用されます) 🎜🎜🎜🎜E:disabled🎜🎜 は、ユーザー インターフェイスの無効な要素 E と一致します。 (通常、フォーム要素に適用されます)🎜🎜🎜🎜E:empty🎜🎜は、子要素 (テキストを含む) を持たない要素 E🎜🎜🎜🎜E:root と一致します。ノード) 🎜🎜ドキュメントのルート要素の E 要素と一致します。 HTML では、ルート要素は常に HTML です🎜🎜🎜🎜E:not(s)🎜🎜要素 E🎜🎜🎜🎜E:first-child と一致します🎜🎜最初の子要素 ​​E🎜🎜🎜🎜E:last-child と一致します🎜🎜 最後の子要素 ​​E🎜🎜🎜🎜E :only-child と一致します🎜🎜親要素の子要素 ​​E のみ🎜🎜🎜🎜E:nth-child(n)🎜🎜は親要素の n 番目の子要素 ​​E と一致します🎜🎜🎜🎜E:nth- last-child(n)🎜🎜は、親要素の下から n 番目の子要素 ​​E と一致します🎜🎜🎜🎜E:first-of-type🎜🎜は、最初の兄弟要素と一致します同じ型の E 🎜🎜🎜🎜E:last-of-type🎜🎜同じ型の最後の兄弟要素 E と一致します🎜🎜 🎜🎜E:only-of-type🎜🎜同じ型の唯一の兄弟要素 E と一致します🎜🎜🎜🎜<code>E:nth-of-type(n) code>🎜🎜 n 番目の兄弟要素 E🎜🎜🎜🎜<code>E:nth-last-of-type(n)🎜🎜同じタイプの兄弟要素 E🎜🎜🎜🎜 の n 番目の兄弟要素と一致します

    注:

    • ハイパーリンクの 4 つの状態 (アクセス前、マウスホバー、現在クリック中、訪問中) を有効にするには、特定の書き込み順序が必要です。a:hover は、a:link と After :visited の間に配置する必要があります。 , a:active は a:hover の後に来る必要があります。

    • E:first-child セレクター、E は兄弟要素の最初の要素でなければなりません。つまり、E は親要素の最初の子要素でなければなりません。同様の疑似クラスは E:last-child ですが、状況はまったく逆で、最後の子要素である必要があります。 E:first-child选择符，E必须是它的兄弟元素中的第一个元素，换言之，E必须是父元素的第一个子元素。与之类似的伪类还有E:last-child，只不过情况正好相反，需要它是最后一个子元素。

    关于:not()的用法

    假定有个列表，每个列表项都有一条底边线，但是最后一项不需要底边线。

     li:not(:last-child) {
        border-bottom: 1px solid #ddd;
    }

    ログイン後にコピー

    ログイン後にコピー

    ログイン後にコピー

    上述代码的意思是：给该列表中除最后一项外的所有列表项加一条底边线。是不是很方便。

    关于:nth-child()的用法

    要使E:nth-child(n)生效，E元素必须是某个元素的子元素，E的父元素最高是body，即E可以是body的子元素。:first-child、:last-child、:only-child、:nth-last-child(n)也是一样。
    nth-child(n)括号里的n可以是一个数字，一个关键字，或者一个公式。

    :nth-child(length) /*参数是具体数字 length为整数*/
    :nth-child(n) /*参数是n,n从0开始计算*/
    :nth-child(n*length) /*n的倍数选择，n从0开始算*/
    :nth-child(n+length) /*选择大于等于length后面的元素*/
    :nth-child(-n+length) /*选择小于等于length前面的元素*/
    :nth-child(n*length+1) /*表示隔几选一*/
    :nth-child(2n) / :nth-child(even) /*表示偶数*/
    :nth-child(2n+1) / :nth-child(odd) /*表示奇数*/

    ログイン後にコピー

    ログイン後にコピー

    ログイン後にコピー

    关于:...-child和:...-of-type的差异

    这两个系列的属性确实很相似，对于不熟悉的人可能很难区分。

    E:first-of-type 总是能命中父元素的第1个为E的子元素，不论父元素第1个子元素是否为E；而E:first-child里的E元素必须是它的兄弟元素中的第一个元素，否则匹配失效。E:last-of-type 与E:last-child也是同理。
    E:nth-of-type(n)总是能命中父元素的第n个为E的子元素，不论父元素第n个子元素是否为E；而E:nth-child(n)会选择父元素的第n个子元素E，如果第n个子元素不是E，则是无效选择符，但n会递增。
    关于:nth-child()与:nth-of-type()的区别可以看这篇文章

    用:empty区分空元素

    选择不包含子元素的p元素：

    p:empty

    ログイン後にコピー

    ログイン後にコピー

    ログイン後にコピー

    选择包含子元素的p元素：

    p:not(:empty)

    ログイン後にコピー

    ログイン後にコピー

    ログイン後にコピー

    伪对象选择器

    选择器	描述
    E:before/E::before	在目标元素E的前面插入的内容。用来和content属性一起使用
    E:after/E::after	在目标元素E的后面插入的内容。用来和content属性一起使用
    E:first-letter/E::first-letter	设置元素内的第一个字符的样式
    E:first-line/E::first-line	设置元素内的第一行的样式
    E::placeholder	设置元素文字占位符的样式。(一般用于input输入框)
    E::selection	设置元素被选择时的字体颜色和背景颜色

    注意事项：

    • ::placeholder在使用时需要加上各个浏览器的前缀；除了Firefox是 ::[prefix]placeholder，其他浏览器都是使用 ::[prefix]input-placeholder。

    总结

    选择器用得好其实可以让我们少些很多代码。其实还有一些东西没有展开来讲，比如:before和:after

    :not()

    の使用法について

    リストがあり、各リスト項目にはボトムラインがあるとしますが、最後の項目にはボトムラインが必要ありません究極の副業。

     li:not(:last-child) {
        border-bottom: 1px solid #ddd;
    }

    ログイン後にコピー

    ログイン後にコピー

    ログイン後にコピー

    上記のコードは、リストの最後の項目を除くすべてのリスト項目に最後の行を追加することを意味します。とても便利ではないでしょうか？

    :nth-child()

    の使い方について🎜E:nth-child(n)を有効にするには、E要素がa 要素の子要素。E の最上位の親要素は body です。つまり、E は body の子要素になることができます。 :first-child、:last-child、:only-child、:nth-last-child(n) code> code> についても同様です。 <br><code>nth-child(n)括弧内の n には、数値、キーワード、または数式を指定できます。 🎜

    :nth-child(length) /*参数是具体数字 length为整数*/
    :nth-child(n) /*参数是n,n从0开始计算*/
    :nth-child(n*length) /*n的倍数选择，n从0开始算*/
    :nth-child(n+length) /*选择大于等于length后面的元素*/
    :nth-child(-n+length) /*选择小于等于length前面的元素*/
    :nth-child(n*length+1) /*表示隔几选一*/
    :nth-child(2n) / :nth-child(even) /*表示偶数*/
    :nth-child(2n+1) / :nth-child(odd) /*表示奇数*/

    ログイン後にコピー

    ログイン後にコピー

    ログイン後にコピー

    :...-child と :...-of-type

    の違いについて🎜 これら 2 つのシリーズのプロパティは次のとおりです。確かに非常に異なりますが、同様に、慣れていない人にとっては区別するのが難しいかもしれません。 🎜🎜🎜E:first-of-type は、親要素の最初の子要素が E であるかどうかに関係なく、常に E である親要素の最初の子要素にヒットします。 E: first-child の E 要素は、兄弟要素の最初の要素である必要があります。そうでない場合、一致は失敗します。 E:last-of-type と E:last-child についても同様です。 🎜
    🎜E:nth-of-type(n) は、親要素の n 番目の子要素が E であるかどうかに関係なく、常に E である親要素の n 番目の子要素にヒットします。 E; そして E:nth-child(n) は親要素の n 番目の子要素 ​​E を選択します。n 番目の子要素が E でない場合、それは無効なセレクターですが、n はインクリメントされます。 。 🎜
    :nth-child() と :nth-of-type() の違いについては、この記事をご覧ください 🎜

    :empty

    空の要素を区別する🎜子要素を含まない p 要素を選択する: 🎜

    p:empty

    ログイン後にコピー

    ログイン後にコピー

    ログイン後にコピー
    🎜 子要素を含む p 要素を選択する: 🎜

    p:not(:empty)

    ログイン後にコピー

    ログイン後にコピー

    ログイン後にコピー

    擬似オブジェクト セレクター

    要素内の最初の文字のスタイルを設定します 要素テキストのプレースホルダーのスタイルを設定します。 (通常、入力ボックスに使用されます)

    セレクター	説明
    E: before/E::before	ターゲット要素 E の前に挿入されるコンテンツ。 content 属性とともに使用されます。
    E:after/E::after	挿入されたコンテンツターゲット要素 E の後。 content 属性とともに使用されます。
    E:first-letter/E::first-letter
    E:first-line/E::first-line code>	要素内の最初の行のスタイルを設定します
    E::placeholder
    E::selection	要素が表示されているときのフォントの色と背景を設定します。選択した色

    🎜注: 🎜🎜🎜🎜::placeholder を使用する場合は、各ブラウザのプレフィックスを追加する必要があります。 Firefox の場合は ::[prefix]placeholder、他のブラウザは ::[prefix]input-placeholder を使用します。 🎜🎜

    概要

    🎜セレクターをうまく使用すると、実際に多くのコードを節約できます。実際には、:before や :after など、詳しく説明していないものがまだいくつかあります。それらについては、後で特別に記事を書きます。 🎜🎜 CSS セレクター構成に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。 🎜🎜🎜