CSSセレクターについて-CSSチュートリアル-php.cn

CSS セレクターを紹介する前に、まず CSS について理解しましょう

CSS - カスケード スタイル シートは、Web ページ レイアウトの成果物として、Web フロントエンドの研究者によって常に賞賛されています。 。 。

次にこれについて話し合いましょう。 。

1. CSS の特徴

HTML 組版の欠点:

設定が面倒、修正が面倒、機能が大幅に不足する

CSS スタイル組版の利点:

組版属性は完全に機能し、組版ファイルは次のようになります。独立して存在し共有可能 組版ファイル

CSSスタイル組版分類:

インライン組版スタイル、インライン組版スタイル、外部リンク組版

2. CSS組版スタイル

インライン組版スタイル:

形式: …

例: タイプセット スタイル

インライン タイプセット スタイル:

インライン タイプセットのすべてのスタイル定義は、 .. と の間にある必要があります。 .. の間にある必要があります。

とその関数は 3 つのタイプに分類できます。

1. マーク定義タイプ

2. クラス定義タイプ

3. id 定義タイプ

タグ定義型形式:

标记名称{属性 1:属性值 1;属性 2:属性值 2;} 标记名称{属性 1:属性值 2;属性 2:属性值 2;} … class 定义型格式: .定义名称{属性 1:属性值 1;属性 2:属性值 2;} .定义名称 1,.定义名称 2{属性 1:属性值 1;属性 2:属性值 2;} … id 定义型格式: #定义名称{属性 1:属性值 1;属性 2:属性值 2;} #定义名称 1,#定义名称 2{属性 1:属性值 1;属性 2:属性值 2;} … 外部排版样式定义: 独立的样式排版: 标记名称{属性 1:属性值 1;属性 2:属性值 2;} .定义名称{属性 1:属性值 1;属性 2:属性值 2;} 在 … 之间使用 格式: 在 … 之间使用 import 格式： @import "style.css" ログイン後にコピー CSSレイアウトスタイル導入後。 。 。 。次に、CSS の強力なセレクターを見てみましょう

1. ワイルドカード セレクター (Web ページ全体に作用します)

*{ font-size:13px; font-family:"微软雅黑","华文楷体"; } ログイン後にコピー

2. 要素セレクター

p,h1,h2,h3,a{ font-size:13px; } ログイン後にコピー

3. ID とクラス

セレクターは、ページ デザインのスタイルを制御するために使用されます。これには、ID セレクターとクラス セレクターが含まれます。長い間、多くの開発者が ID とクラスを混同したり、これら 2 つのセレクターを正しく使用できなかったり、単純に考えたりしていました。この理解は非常に間違っています。

(1)。各 ID は 1 つのページ内でのみ使用できます。一般に、ID は 1 つの要素に対して 1 回のみ使用できます。ヘッダー、メイン ナビゲーション バー、レイアウト ブロックなど、ページの固有の要素にのみ使用されます。

例: この段落には赤色のテキストが含まれています

/*すべての h2 タイトルに適しています*/

h2{ color: #333; font-size:16px; }

/*タイトル h2 タイトルにのみ適しています*/

h2#title { color: #eee; }

対応する HTML コード:

Title Of My Article Title Of My Article ログイン後にコピー

(3) ID の使用場面

このスタイルでは、ID は 1 つの要素のみ使用できます。各ページに固有で一度だけ使用される要素には保持しないでください。

(4) 同じ CSS ルールを複数の場所で使用する必要がある場合は、ID を使用しないでください。 .

(5)。アプリケーション クラスは無制限に使用できるため、CSS を適用する非常に柔軟な方法です

彼の段落には赤いテキストがあります。

関連 CSS コード:

.hightlight {color:FFFFFF; } ログイン後にコピー

(6) 複数のクラスと ID の結合 例:

Beer Spirtis Cola Lemonade ログイン後にコピー

対応する CSS コード:

ul#drinks { color:FF6600; } .mix { Color:#999999; } .hot { Color:#333333; } (7).利用类改写基本样式: p{Color:#ff6600; } .bleached {Color:#ccc; } ログイン後にコピー

対応する HTMLコード:

rreee

(8) クラスを要素

p.bleached {color:red; }

に対応する HTML コード:

This paragraph has red text.

ログイン後にコピー

(9) を再利用する場合。複数回使用するか、サブクラス セレクターを使用してから、レイアウトなどの一意性を定義する一意のタグの場合は、id を使用します。

4. カスケード

(1)。外部リンクはカスケード

(2). カスケードを実現するためにスタイルをインポートします

@import url("one.css" )

@import url("two.css")

@import url("three.css")

注: ルールが後から与えられるほど、覚えておく必要があります。

5

(1 ).要素セレクター

p{color:black;}

a{text-decoration:underline;}

h1{font -weight:bold;}

(2)。子孫セレクター

h2 i{color:red; }

li a{text-decoration:none;} #main h1{Color:red;}

(3).伪类

a:link{color:blue;}

a:visited{color:green;}

a:hover,a:active{color:red;}

input:focus{background-color:yellow;}

(4).高级选择器

高级选择器,目前支持还不太完善,所以,对于站点功能很重要的任何元素上,应该避 免使用这些高级选择器.

10、子选择器和相邻同胞选择器

子选择器

#nav > li { background:url(bg.gif) no-repeat left top; } Home Development Consultancy Contact Us ログイン後にコピー

相邻同胞选择器:

h1+p{font-weight:bold;} Main Heading First Paragraph

Second Paragraph

ログイン後にコピー

11、属性选择器

CSS strong[title] {border-bottom: 1px dotted #999;} strong[title]:hover {cursor:help;background:#ccc} 12、针对列表项特别好用的两个伪类选择器： ol li:first-child{ /*选中ol下面的第一个li*/ } ol li:last-child{ /*选中ol下面的一最后一个li*/ } CSS3选择器新特性 a[href$='.jsp']{ /*所有a标签中href属性为.jsp结尾的被选中*/ } a[href^='asd]{ /*所有a标签中href属性为asd开头的被选中*/ } a[href*='asd]{ /*所有a标签中href属性中包含asd的被选中*/ } ログイン後にコピー 选择表中的行：

tr:nth-of-type(even){ background-color:red; /*选中偶数行*/ } tr:nth-of-type(odd){ background-color:red; /*选中奇数行*/ } tr:nth-of-child(n){ background-color:red; /*选中所有行*/ } ログイン後にコピー