CSS 基本チュートリアル selector_html/css_WEB-ITnose

カテゴリ: WEB フロントエンド 時間: 2015 年 9 月 8 日

CSS では、スタイルを設定する必要がある要素を選択するためにセレクターが使用されます。簡単に言えば、スタイルを設定する必要がある要素を決定することです。にスタイルを与えます。 Web フロントエンドを作成するときは、セレクターを頻繁に使用します。セレクターを適切に使用すると、多くのコードが簡素化されます。 CSS セレクターは、基本セレクターと準拠セレクターの 2 つのカテゴリに大別されます。

1. 基本セレクター:

a、htmlタグセレクター:

タグ{属性: 属性値}

div、p、h1、span...

b、クラスクラスセレクター、共有可能:

.name {属性: 属性値}

タグ

c 内に class="name" の要素があり、id selector: Uniqueness

#name{属性: 属性値}

tag id="name"の要素

d、属性セレクター

*[title] {属性: 属性値}

title(タイトル)を含む全要素

e、ワイルドカードセレクター、全要素 ：

* {属性: 属性値}

例: * {マージン: 0; パディング: 0}

2. 複合セレクター

a、子孫セレクター:

A B { 属性: 属性値 }

注: A は、親セレクターへ B は子セレクター

b を参照、疑似クラス セレクター:

a:link {属性: 属性値} デフォルト

a:visited {属性: 属性値} アクセス 過去のリンク

a:hover {属性: 属性値} にマウスを置く

a:active {属性: 属性値} のアクティブ化状態 (選択時の状態)

注: 順序は l v h a のように間違ってはいけません。また、{属性 :属性値} もあります。も記述する必要があり、ハイパーリンク内の同じ属性がその中に配置され、異なる属性が異なる疑似クラス セレクターに書き込まれます。