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

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSセレクターについて

高洛峰

Nov 24, 2016 pm 01:19 PM

css

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

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

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

1. CSS の特徴

HTML 組版の欠点:

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

CSS スタイル組版の利点:

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

CSSスタイル組版分類:

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

2. CSS組版スタイル

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

形式: …タグ名>

例:

タイプセットスタイル

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

インラインタイプセットのすべてのスタイル定義は、と

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

1. マーク定義タイプ

2. クラス定義タイプ

3. id 定義タイプ

タグ定義型形式:

<head>
 
　　<style type=”text/css”> 　　
 
　　　　标记名称{属性 1:属性值 1;属性 2:属性值 2;} 　　
 
　　　　标记名称{属性 1:属性值 2;属性 2:属性值 2;}
 
　　</style>
 
</head>
 
<body>
 
　　<标记名称>…</标记名称>
 
</body>
 
class 定义型格式:
 
<head>
 
　　<style type=”text/css”> 　　
 
　　　　.定义名称{属性 1:属性值 1;属性 2:属性值 2;} 　　
 
　　　　.定义名称 1,.定义名称 2{属性 1:属性值 1;属性 2:属性值 2;}
 
　　</style>
 
</head>
 
<body> 　　
 
　　<标记名称 class=”定义名称”>…</标记名称>
 
</body>
 
id 定义型格式:
 
<head>
 
　　<style> 　　
 
　　　　#定义名称{属性 1:属性值 1;属性 2:属性值 2;} 　　
 
　　　　#定义名称 1,#定义名称 2{属性 1:属性值 1;属性 2:属性值 2;}
 
　　</style>
 
</head>
 
<body> 　　
 
　　<标记名称 id=”定义名称”>…</标记名称>
 
</body>
 
外部排版样式定义:
 
独立的样式排版: 　　
 
标记名称{属性 1:属性值 1;属性 2:属性值 2;} 　　
 
.定义名称{属性 1:属性值 1;属性 2:属性值 2;}
 
在<head>…</head>之间使用<link> 格式:
 
<head> 　　
 
　　<link rel=”stylesheet” type=”text/css” href="http://www.php1.cn/">
 
</head>
 
在<head>…</head>之间使用 import 格式：
 
<head>
 
　　<style type="text/css">
 
　　　　@import "style.css"
 
　　</style>
 
</head>

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 コード:

<h2 id="Title-nbsp-Of-nbsp-My-nbsp-Article">Title Of My Article</h2>
 
<h2 id="Title-nbsp-Of-nbsp-My-nbsp-Article">Title Of My Article</h2>

(3) ID の使用場面

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

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

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

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

関連 CSS コード:

.hightlight {color:FFFFFF; }

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

<ul id=”drinks”>
 
　　<li class=”mix”>Beer</li>
 
　　<li class=”mix”>Spirtis</li>
 
　　<li class=”hot”>Cola</li>
 
　　<li class=”hot”>Lemonade</li>
 
</ul>

対応する 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 コード:

<p>This paragraph has red text.</p>
 
<p class=”bleached”>This paragraph has red text.</p>

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

4. カスケード

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

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

@import url("one.css" )

@import url("two.css")

@import url("three.css")

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

(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;
 
}
 
<ul id="nav"> 　　
 
　　<li>Home</li> 　　
 
　　<li>
 
　　　　<ul> 　　　　　　
 
　　　　　　<li>Development</li> 　　　　　　
 
　　　　　　<li>Consultancy</li> 　　　　
 
　　　　</ul> 　　
 
　　</li>
 
　　<li>Contact Us</li>
 
</ul>

相邻同胞选择器:

h1+p{font-weight:bold;}
 
<h1 id="Main-nbsp-Heading">Main Heading</h1>
 
<p>First Paragraph</p>
 
<p>Second Paragraph</p>

11、属性选择器

<strong title=”Cascading Style Sheets”>CSS</strong>
 
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$=&#39;.jsp&#39;]{
 
　　/*所有a标签中href属性为.jsp结尾的被选中*/
 
}
 
a[href^=&#39;asd]{
 
　　/*所有a标签中href属性为asd开头的被选中*/
 
}
 
a[href*=&#39;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;
 
　　/*选中所有行*/
 
}

声明

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

@KeyFrames対CSSトランジション：違いは何ですか？May 14, 2025 am 12:01 AM

@keyframesandcsstransitionsdifferincomplexity：@keyframesallowsfordeTailedAnimationのシーケンス、whilecsstransitionshandlesimplestatechanges.usecsstransitionsは、ButtonColorChanges、および@keyframesforintricateanimationslikerotatingingspinnnersを使用します。

静的サイトコンテンツ管理にページCMSを使用しますMay 13, 2025 am 09:24 AM

私は知っています、私は知っています：たくさんのコンテンツ管理システムオプションが利用可能であり、私はいくつかテストしましたが、実際にはY＆＃039;知っているものはありませんでしたか？奇妙な価格設定モデル、困難なカスタマイズ、一部は全体になることさえあります＆

HTMLのCSSファイルをリンクするための究極のガイドMay 13, 2025 am 12:02 AM

CSSファイルをHTMLにリンクすることは、HTMLの一部で要素を使用することで実現できます。 1）タグを使用して、ローカルCSSファイルをリンクします。 2）複数のタグを追加することにより、複数のCSSファイルを実装できます。 3）外部CSSファイルは、そのような絶対URLリンクを使用します。 4）ファイルパスとCSSファイルの読み込み順序の正しい使用を確認し、パフォーマンスを最適化すると、CSSプリプロセッサを使用してファイルをマージできます。

CSS Flexbox vsグリッド：包括的なレビューMay 12, 2025 am 12:01 AM

FlexBoxまたはグリッドの選択は、レイアウト要件によって異なります。1）FlexBoxは、ナビゲーションバーなどの1次元レイアウトに適しています。 2）グリッドは、雑誌のレイアウトなどの2次元レイアウトに適しています。この2つは、レイアウト効果を改善するためにプロジェクトで使用できます。

CSSファイルを含める方法：メソッドとベストプラクティスMay 11, 2025 am 12:02 AM

CSSファイルを含める最良の方法は、タグを使用してHTMLパーツに外部CSSファイルを導入することです。 1.タグを使用して、外部CSSファイルを導入します。 2。小さな調整のために、インラインCSSを使用できますが、注意して使用する必要があります。 3.大規模プロジェクトでは、@Importを介して他のCSSファイルをインポートするために、SASS以下などのCSSプリプロセッサを使用できます。 4。パフォーマンスのために、CSSファイルをマージし、CDNを使用し、CSSNANOなどのツールを使用して圧縮する必要があります。

FlexBox対グリッド：両方を学ぶべきですか？May 10, 2025 am 12:01 AM

はい、Youはrelearnbothlexboxandgrid.1）FlexBoxisidealforone-Dimensional、FlexiblleayoutslikenavigationMenus.2）Gridexcelsintwo-digsignssuchasmagazinelayouts.3）Bothenhanceslaysutibulivedibulisunivedivition、floctonsulururを