ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSセレクターについて
CSSセレクターについて
- 高洛峰オリジナル
- 2016-11-24 13:19:471664ブラウズ
CSS セレクターを紹介する前に、まず CSS について理解しましょう
CSS - カスケード スタイル シートは、Web ページ レイアウトの成果物として、Web フロントエンドの研究者によって常に賞賛されています。 。 。
次にこれについて話し合いましょう。 。
1. CSS の特徴
HTML 組版の欠点:
設定が面倒、修正が面倒、機能が大幅に不足する
CSS スタイル組版の利点:
組版属性は完全に機能し、組版ファイルは次のようになります。独立して存在し共有可能 組版ファイル
CSSスタイル組版分類:
インライン組版スタイル、インライン組版スタイル、外部リンク組版
2. CSS組版スタイル
インライン組版スタイル:
形式: eb030b60b3508ee6f9e3d26e43eae9aa…cc7a5ce605f03d28b59de844b556b746
例:98a7f2e93a1b98630a2c5686557a20f8タイプセット スタイル94b3e26ee717c64999d7867364b1b4a3
インライン タイプセット スタイル:
インライン タイプセットのすべてのスタイル定義は、c9ccee2e6ea535a969eb3f532ad9fe89..531ac245ce3e4fe3d50054a55f265927 と c9ccee2e6ea535a969eb3f532ad9fe89 の間にある必要があります。 93f0f5c25f18dab9d176bd4f6de5d30e..9c3bca370b5104690d9ef395f2c5f8d1 の間にある必要があります。
とその関数は 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 回のみ使用できます。ヘッダー、メイン ナビゲーション バー、レイアウト ブロックなど、ページの固有の要素にのみ使用されます。
例: 0ecb797e9ca55ec46ea0a0fe11323c07 この段落には赤色のテキストが含まれています
/*すべての h2 タイトルに適しています*/
h2{ color: #333; font-size:16px; }
/*タイトル h2 タイトルにのみ適しています*/
h2#title { color: #eee; }
対応する HTML コード:
<h2>Title Of My Article</h2> <h2 id=”title”>Title Of My Article</h2>
(3) ID の使用場面
このスタイルでは、ID は 1 つの要素のみ使用できます。各ページに固有で一度だけ使用される要素には保持しないでください。
(4) 同じ CSS ルールを複数の場所で使用する必要がある場合は、ID を使用しないでください。 .
(5)。アプリケーション クラスは無制限に使用できるため、CSS を適用する非常に柔軟な方法です
964bb13a67a0e53e393fe4dddb73a9db彼の段落には赤いテキストがあります。ff5d119d0de2c67cf2fccb36ea7393ba
6fd5cd95685985f00d6d87ce4c39be89
303d96eeadf05ac75ab1ad201d4a3115
(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;
}
<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>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$='.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;
/*选中所有行*/
}