CSS3 属性セレクターにはどのようなタイプが含まれますか
css3 属性セレクターには 3 つのタイプが含まれます: 1. "E[att^=value]" セレクター、E という名前のタグを選択します。タグは att 属性を定義し、属性値には値のプレフィックスが含まれます。 ; 2. "E[att$=value]" セレクター; 3. "E[att*=value]" セレクター。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
属性セレクターは、属性と属性値に基づいて要素を選択できます。 3 つの新しい属性セレクターが CSS3 に追加されました: E[att^=value]、E[att$=value]、および E[att*=value]# # ＃、以下で詳しく紹介します。
#E[att^=value]<span style="font-size: 18px;"><strong></strong></span>属性セレクター #E[att^=value]
div[id^=section] は、一致に id 属性が含まれており、id 属性値が "section" 文字列で始まる div 要素であることを示します。 以下では、例を使用して、E[att^=value]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>E[att^=value]属性选择器的应用</title>
<style type="text/css">
p[id^="one"]{
color:pink;
font-family: "微软雅黑";
font-size: 20px;
}
</style>
</head>
<body>
<p id="one">为了看日出，我常常早起。那时天还没有大亮，周围非常清静，船上只有机器的响声。</p>
<p id="two">天空还是一片浅蓝，颜色很浅。转眼间天边出现了一道红霞，慢慢地在扩大它的范围，加强它的亮光。我知道太阳要从天边升起来了，便目不转睛地望着那里。</p>
<p id="one1">果然过了一会儿，在那个地方出现了太阳的小半边脸，红是真红，却没有亮光。这个太阳好像负着重荷似地一步一步、慢慢地努力上升，到了最后，终于冲破了云霞，完全跳出了海面，颜色红得非常可爱。一刹那间，这个深红的圆东西，忽然发出了夺目的亮光，射得人眼睛发痛，它旁边的云朵也突然有了光彩。</p>
<p id="two1">有时太阳走进了云堆中，它的光线却从云里射下来，直射到水面上。这时候要分辨出哪里是水，哪里是天，倒也不容易，因为我就只看见一片灿烂的亮光。</p>
</body>
</html>上記のコードでは、[att^=value]セレクター「p[id^="one"]」が使用されています。 p 要素の id 属性値が「one」文字列で始まる限り、その文字列が選択され、特別なテキスト効果が表示されます。
<span style="max-width:90%"><strong></strong>属性セレクター</span>E[att$=value]属性セレクターは E という名前のタグの選択を参照し、タグは att 属性を定義し、att 属性値にはサフィックスが含まれます。値の部分文字列。
セレクターと同様に E 要素は省略可能で、省略した場合は条件を満たす要素であればすべて一致することを意味します。たとえば、div[id$=section] は、一致に id 属性が含まれており、id 属性値が "section" 文字列で終わる div 要素であることを示します。 以下では、例を使用して、E[att$=value] 属性セレクターの使用法を示します。
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>E[att$=value] 属性选择器的应用</title>
<style type="text/css">
p[id$="main"]{
color: #0cf;
font-family: "宋体";
font-size: 20px;
}
</style>
</head>
<body>
<p id="old1">盼望着，盼望着，东风来了，春天的脚步近了。</p>
<p id="old2">小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草绵软软的。</p>
<p id="oldmain">桃树、杏树、梨树，你不让我，我不让你，都开满了花赶趟儿。红的像火，粉的像霞，白的像雪。花里带着甜味，闭了眼，树上仿佛已经满是桃儿、杏儿、梨儿！花下成千成百的蜜蜂嗡嗡地闹着……</p>
<p id="newmain">“吹面不寒杨柳风”，不错的，像母亲的手抚摸着你。风里带来些新翻的泥土的气息，混着青草味，还有各种花的香，都在微微润湿的空气里酝酿。鸟儿将窠巢安在繁花嫩叶当中，高兴起来了……</p>
</body>
</html>上記のコードでは、[att$=value]セレクター「
」が使用されています。 p 要素の id 属性値が「main」文字列で終わっている限り、その文字列が選択され、特別なテキスト効果が表示されます。
#E[att*=value]
<span style="max-width:90%"><strong>属性セレクター</strong></span>E[att*=value]セレクターは E という名前のタグを選択するために使用され、タグは att 属性を定義し、att 属性値には値が含まれます。部分文字列 。このセレクターは前の 2 つのセレクターと同じです。E 要素も省略できます。省略した場合は、条件を満たすすべての要素が一致することを意味します。たとえば、div[id*=section]
以下では、例を使用して、E[att*=value] 属性セレクターの使用法を示します。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>E[att*=value]属性选择器的使用</title>
<style type="text/css">
p[id*="demo"]{
color:#0ca;
font-family: "宋体";
font-size: 20px;
}
</style>
</head>
<body>
<p id="demo1">我们消受得秦淮河上的灯影，当四月犹皎的仲夏之夜。 </p>
<p id="main1">在茶店里吃了一盘豆腐干丝，两个烧饼之后，以至歪的脚步踅上夫子庙前停泊着的画访，就懒洋洋地躺到藤椅上去了。好郁蒸的江南，傍也还是热的。"快开船罢！"桨声响了。</p>
<p id="newdemo">小的灯舫初次在河中荡漾;于我，情景是颇朦胧，滋味是怪羞涩的。我要错认它作七里的山塘;可是，河房里明窗洞启，映着玲珑入画的栏干，顿然省得身在何处了……</p>
<p id="olddemo">又早是夕阳西下，河上妆成一抹胭脂的薄媚。是被青溪的姊妹们所薰染的吗？还是匀得她们脸上的残脂呢？寂寂的河水，随双桨打它，终没言语。密匝匝的绣恨逐老去的年华，已都如蜜饧似的融在流波的心窝里、连呜咽也将嫌它多事，更哪里论到哀嘶……</p>
</body>
</html>[att*=value]セレクター「p[id*="demo"]
(学習ビデオ共有:
)
以上がCSS3 属性セレクターにはどのようなタイプが含まれますかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7500
15
1377
52
78
11
19
54
純粋な CSS3 で波の効果を実現するにはどうすればよいですか? (コード例)
Jun 28, 2022 pm 01:39 PM
純粋な CSS3 で波の効果を実現するにはどうすればよいですか?この記事ではSVGとCSSアニメーションを使って波のエフェクトを作成する方法をご紹介しますので、お役に立てれば幸いです。
CSSを上手に使って色々な変わった形のボタンを実現（コード付き）
Jul 19, 2022 am 11:28 AM
この記事では、頻繁に登場する様々な奇妙な形のボタンをCSSを使って簡単に実現する方法を紹介しますので、ぜひ参考にしてください。
スペースを取らずにCSS内の要素を非表示にする方法
Jun 01, 2022 pm 07:15 PM
2 つの方法: 1. display 属性を使用して、要素に「display:none;」スタイルを追加するだけです。 2. Position 属性と top 属性を使用して、要素の絶対位置を設定し、要素を非表示にします。要素に「position:absolute;top:-9999px;」スタイルを追加するだけです。
CSS3でレースボーダーを実装する方法
Sep 16, 2022 pm 07:11 PM
CSS では、border-image 属性を使用してレースの境界線を実現できます。 border-image 属性では、画像を使用して境界線を作成できます。つまり、境界線に背景画像を追加できます。背景画像をレース スタイルとして指定するだけで済みます。構文「border-image: url (画像パス) は、内側への画像境界線の幅。開始を繰り返すかどうか;"。
テキストカルーセルと画像カルーセルも純粋な CSS を使用して実現できることがわかりました。
Jun 10, 2022 pm 01:00 PM
テキストカルーセルと画像カルーセルを作成するにはどうすればよいですか?皆さんが最初に考えるのはjsを使うかどうかですが、実はテキストカルーセルや画像カルーセルも純粋なCSSでも実現できますので実装方法を見ていきましょう。
css3アダプティブレイアウトとは何ですか
Jun 02, 2022 pm 12:05 PM
「レスポンシブ レイアウト」とも呼ばれるアダプティブ レイアウトとは、画面の幅を自動的に認識し、それに応じて調整できる Web ページ レイアウトを指します。このような Web ページは、端末ごとに特定のバージョンを作成するのではなく、複数の異なる端末と互換性を持たせることができます。 。アダプティブ レイアウトは、モバイル Web ブラウジングの問題を解決するために生まれ、さまざまな端末を使用するユーザーに優れたユーザー エクスペリエンスを提供できます。
CSS3 フィルターを賢く使って、テキストのフラッシュ切り替えアニメーション効果を作成しましょう。
Jul 20, 2022 am 10:55 AM
この記事では、CSS3 フィルターを使用してハイエンドなテキスト フラッシュ切り替えアニメーション効果を実現する方法を説明します。
jQuery をエレガントに使用して、name 属性が未定義でない要素を検索する
Feb 27, 2024 pm 01:42 PM
タイトル: jQuery を使って name 属性が未定義でない要素をエレガントに検索する Web ページを開発する際、jQuery を使って DOM 要素を操作する必要があり、特定の条件に基づいて要素を検索する必要があることがよくあります。 name 属性が未定義ではない要素を検索するなど、特定の属性を持つ要素を検索する必要がある場合があります。この記事では、この機能を実現するために jQuery をエレガントに使用する方法を紹介し、具体的なコード例を添付します。まずはjQの使い方を見てみましょう。
