覚えておくべき30のCSSセレクター_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

覚えておくべき30のCSSセレクター_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:16 AM

はじめに

今日の主要なブラウザに適した 30 個の CSS セレクターがあります。

1.*

* {  margin: 0;  padding: 0;}

*セレクターは、それぞれの単一要素を選択します。多くのプログラマーは、上記の CSS を使用して、すべての要素のマージンとパディングをクリアします。これは機能しますが、ブラウザに大きな負荷がかかるため、これを行わないことをお勧めします。

*セレクターは子セレクターでも使用できます。

うわー

これにより、#container のすべての子に境界線が付きますが、必要がない場合は、スターセレクターを使用しないでください。

デモを見る

互換性

デモを見る

互換性

IE6+

Firefox

3..x

#container * {  border: 1px solid black;}

クラスセレクターとID セレクターはまず、優先度はそれほど高くありません。 ID セレクターは 1 つだけを選択できますが、クラスセレクターはグループをフィルターで除外できます。

デモを見る

互換性

IE6+

Firefox

Chrome

Safari
Opera

#container {   width: 960px;   margin: auto;}

互換性

IE6+

Firefox

Chrome

IE6+

Firefox

Chrome

Safari

6.x:visted と x:link

.error {  color: red;}

pseudo-class:link かどうかをフィルタリングします。タグはまだクリックされていません。クリックされていないものをフィルタするには use:visited を使用します。
デモを見る
互換性

IE7+

Firefox

Chrome

Safari

Opera

```
li a {  text-decoration: none;}
```

Firefox

Chrome

Safari

Opera

8.x > y

a { color: red; }ul { margin-left: 0; }

子孫セレクターですが、xy と同じ子孫を持ちます。セレクターは、直接の子孫のみを選択できるという点で異なります。例:

a:link { color: red; }a:visted { color: purple; }

この例では、#cotainer > ul は最初の ul のみを選択し、ul に li を含む ul は検索しません。
デモを見る
互換性

IE7+

Firefox

Chrome

Safari

Opera

```
ul + p {   color: red;}
```

Chrome

Safari

Opera

10.x[タイトル]

div#container > ul {  border: 1px solid black;}

属性選択デバイス。これにより、title 属性を持つすべてのタグが選択されます。
デモを見る
互換性
IE7+
Firefox

Chrome

Safari

Opera

11.x[href="foo"]

これセレクターはリンクを href="http として選択できます。「://net.tutsplus.com」というタグですが、ここのリンクが変更されたらどうなるでしょうか?これは少し厳密ですが、正規表現を使用して適切に一致させることができます。

デモを見る
互換性

Safari

Opera

12.x[href*="nettuts"]

<div id="container">   <ul>      <li> List Item        <ul>           <li> Child </li>        </ul>      </li>      <li> List Item </li>      <li> List Item </li>      <li> List Item </li>   </ul></div>

'*' は、nuttuts 文字を含む href と一致します。、より厳密にしたい場合は、^ と $ を使用して開始と終了を示すこともできます。

デモを見る
互換性
IE7+
Firefox
Chrome

Safari

Opera

13.x[href^="http"]

これ有効な href を使用してをフィルタリングする方法は、 http:// と https:// を一致させます。

デモを見る

Compatibility

IE7+
Firefox
Chrome
Safari
Opera

14.x[href$=".jpg"]

a[href$=".jpg"] {   color: red;}

这将会选择链接为jpg格式的图片链接，可是如果图片类型为png或gif等怎么办？

view demo

Compatibility

IE7+
Firefox
Chrome
Safari
Opera

15.x[data-*="foo"]

a[data-filetype="image"] {   color: red;}

按照规则14.我们可能得：

a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".gif"] {   color: red;}

可这也太。。。我们可以加一个属性用以标示。

<a href="path/to/image.jpg" data-filetype="image"> Image Link </a>

a[data-filetype="image"] {   color: red;}

view demo

Compatibility

IE7+
Firefox
Chrome
Safari
Opera

16.x[foo~="bar"]

a[data-info~="external"] {   color: red;}a[data-info~="image"] {   border: 1px solid black;}

~将会让我们匹配到属性值被空格分隔符分开的值，如：

"<a href="path/to/image.jpg" data-info="external image"> Click Me, Fool </a>

view demo

Compatibility

IE7+
Firefox
Chrome
Safari
Opera

17.x:checked

input[type=radio]:checked {   border: 1px solid black;}

这个常常对checkbox非常有用。

view demo

Compatibility

IE9+
Firefox
Chrome
Safari
Opera

18.x:after

伪类before和after已经有了一些新的用法，比如最常见的：

.clearfix:after {    content: "";    display: block;    clear: both;    visibility: hidden;    font-size: 0;    height: 0;    }.clearfix {    *display: inline-block;    _height: 1%;}

没错，这就是默认标准clearfix的实现原理。

Compatibility

IE8+
Firefox
Chrome
Safari
Opera

19.x:hover

div:hover {  background: #e3e3e3;}

但是得注意，:hover在早期IE中并不适用。

Compatibility

IE6+（In IE6, :hover must be applied to an anchor element）
Firefox
Chrome
Safari
Opera

20.x:not(selector)

div:not(#container) {   color: blue;}

反选选择器。

view demo

Compatibility

IE9+
Firefox
Chrome
Safari
Opera

21.x::pseudoElement

p::first-line {   font-weight: bold;   font-size: 1.2em;}p::first-letter {   float: left;   font-size: 2em;   font-weight: bold;   font-family: cursive;   padding-right: 2px;}

伪元素选择器，注意尽量还是按标准来，多使用::而不是:。

view demo

Compatibility

IE6+
Firefox
Chrome
Safari
Opera

22.x:nth-child(n)

li:nth-child(3) {   color: red;}

选择一组中特定的孩子。n表示第几个，也可以是表达式，如2n+1,2n.

view demo

Compatibility

IE9+
Firefox 3.5+
Chrome
Safari
Opera

23.x:nth-last-child(n)

li:nth-last-child(2) {   color: red;}

如果li有400个，而你需要target到第397个，那用这个咱合适不过了。

view demo

Compatibility

IE9+
Firefox 3.5+
Chrome
Safari
Opera

24.x:nth-of-type(n)

ul:nth-of-type(3) {   border: 1px solid black;}

如果ul没有id，而你又要找第三个ul，那个这种方式是不错。

view demo

Compatibility

IE9+
Firefox 3.5+
Chrome
Safari
Opera

25.x:nth-last-of-type(n)

ul:nth-last-of-type(3) {   border: 1px solid black;}

与ul:nth-of-type刚好相反。

Compatibility

IE9+
Firefox 3.5+
Chrome
Safari
Opera

26.x:first-child

ul li:first-child {   border-top: none;}

view demo

Compatibility

IE7+
Firefox
Chrome
Safari
Opera

27.x:last-child

Example

<ul>   <li> List Item </li>   <li> List Item </li>   <li> List Item </li></ul>

ul { width: 200px; background: #292929; color: white; list-style: none; padding-left: 0;}li { padding: 10px; border-bottom: 1px solid black; border-top: 1px solid #3c3c3c;}

view demo

但是我不想要第一个的上边框和最后一个的下边框，可以这么做：

li:first-child {    border-top: none;}li:last-child {   border-bottom: none;}

view demo

Compatibility

IE9+
Firefox
Chrome
Safari
Opera

28.X:only-child

div p:only-child {   color: red;}

这将匹配div里只有一个p的元素。如：

<div><p> My paragraph here. </p></div><div>   <p> Two paragraphs total. </p>   <p> Two paragraphs total. </p></div>

view demo

Compatibility

IE9+
Firefox
Chrome
Safari
Opera

29.X:only-of-type

li:only-of-type {   font-weight: bold;}

这将匹配元素内只有一个li的元素，有时这个做法很简便。比如要寻找只有一个列表的ul，可以：

ul > li:only-of-type {   font-weight: bold;}

view demo

Compatibility

IE9+
Firefox 3.5+
Chrome
Safari
Opera

30.x:first-of-type

Example

<div>   <p> My paragraph here. </p>   <ul>      <li> List Item 1 </li>      <li> List Item 2 </li>   </ul>   <ul>      <li> List Item 3 </li>      <li> List Item 4 </li>   </ul>   </div>

如何寻找上面的 "List Item 2"呢？

办法1

ul:first-of-type > li:nth-child(2) {   font-weight: bold;}

办法2

p + ul li:last-child {   font-weight: bold;}

办法3

ul:first-of-type li:nth-last-child(1) {   font-weight: bold;   }

view demo

互換性

IE9+
Firefox 3.5+
Chrome
Safari
Opera

概要

IE6 で上記のセレクターを使用する場合は特に注意してください。ただし、この記事を読んでも影響を受けないように注意してください。。ブラウザー互換性マトリックスを参照することも、Dean Edward の優れた IE9.js スクリプトを使用して、古いブラウザーでこれらのセレクターをサポートすることもできます。

さらに、jQuery などの Javascript ライブラリを使用している場合は、これらのネイティブ CSS3 セレクターを使用するようにしてください。これは、ブラウザーセレクターエンジンがブラウザーのネイティブメソッドに従って解析し、コードがより効率的になるためです。

注: この記事は翻訳です、私のブログをクリックしてください原文をクリックしてください

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

自己閉鎖タグとは何ですか？例を挙げてください。Apr 27, 2025 am 12:04 AM

セルフクロージングのlandxmlareTagstatemtatemsem onedinedingsingaseparateclosingtag、SimmarifiedMarkupStructureanddendingCodingInefciency.1）areEssentionalinforementswithoutcontent、2）

HTMLを超えて：Web開発のための重要なテクノロジーApr 26, 2025 am 12:04 AM

強力な機能と優れたユーザーエクスペリエンスを備えたWebサイトを構築するには、HTMLだけでは十分ではありません。次のテクノロジーも必要です。JavaScriptは、Webページに動的とインタラクティブ性を与え、リアルタイムの変更がDOMを操作することで達成されます。 CSSは、美学とユーザーエクスペリエンスを向上させるために、Webページのスタイルとレイアウトを担当しています。 React、Vue.JS、Angularなどの最新のフレームワークとライブラリは、開発効率とコード組織構造を改善します。

HTMLのブール属性とは何ですか？いくつかの例を挙げてください。Apr 25, 2025 am 12:01 AM

ブール属性は、値なしでアクティブ化されるHTMLの特別な属性です。 1.ブール属性は、無効化された入力ボックスを無効にするなど、存在するかどうかによって、要素の動作を制御します。 2.彼らの実用的な原則は、ブラウザが異なっているときに属性の存在に応じて要素の動作を変更することです。 3.基本的な使用法は、属性を直接追加することであり、高度な使用法はJavaScriptを介して動的に制御できます。 4.一般的な間違いは、値を設定する必要があると誤って考えており、正しい執筆方法は簡潔にする必要があります。 5.ベストプラクティスは、コードを簡潔に保ち、ブールのプロパティを合理的に使用して、Webページのパフォーマンスとユーザーエクスペリエンスを最適化することです。

HTMLコードをどのように検証できますか？Apr 24, 2025 am 12:04 AM

HTMLコードは、オンラインバリデーター、統合ツール、自動化されたプロセスを使用するとクリーンになります。 1）w3cmarkupvalidationserviceを使用して、HTMLコードをオンラインで確認します。 2）リアルタイム検証のためにVisualStudiocodeにhtmlhint拡張機能をインストールして構成します。 3）HTMLTIDYを使用して、建設プロセスでHTMLファイルを自動的に検証およびクリーニングします。

HTML対CSSおよびJavaScript：Webテクノロジーの比較Apr 23, 2025 am 12:05 AM

HTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。

マークアップ言語としてのHTML：その機能と目的Apr 22, 2025 am 12:02 AM

HTMLの機能は、Webページの構造とコンテンツを定義することであり、その目的は、情報を表示するための標準化された方法を提供することです。 1）HTMLは、タイトルやパラグラフなどのタグや属性を使用して、Webページのさまざまな部分を整理しています。 2）コンテンツとパフォーマンスの分離をサポートし、メンテナンス効率を向上させます。 3）HTMLは拡張可能であり、カスタムタグがSEOを強化できるようにします。

HTML、CSS、およびJavaScriptの未来：Web開発動向Apr 19, 2025 am 12:02 AM

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

HTML：構造、CSS：スタイル、JavaScript：動作Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

See all articles