Detaljer om attributselektorer i CSS
Denne artikel forklarer detaljerne om attributselektorer i CSS.
Du kan lære, hvordan du skriver fremadrettet matching, baglæns matching og delvis matching for attributselektorer.
YouTube Video
HTML til forhåndsvisning
css-attribute-selector.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Pseudo Class/Element</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-attribute-selector.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Attribute Selectors</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header><h2>CSS Attribute Selectors</h2></header>
19 <article>
20 <h3>element[attribute]</h3>
21 <section>
22 <header><h4>CSS</h4></header>
23<pre class="sample">
24a[target] {
25 font-weight: bold;
26}
27</pre>
28 <header><h4>HTML</h4></header>
29<pre>
30<a href="https://example.com" target="_blank">Example Link (target="_blank")</a>
31<a href="https://example.com">Example Link (no target)</a>
32</pre>
33 <header><h4>HTML+CSS</h4></header>
34 <section class="sample-view">
35 <a href="https://example.com" target="_blank">Example Link (target="_blank")</a>
36 <a href="https://example.com">Example Link (no target)</a>
37 </section>
38 </section>
39 </article>
40 <article>
41 <h3>element[attribute=value] : =</h3>
42 <section>
43 <header><h4>CSS</h4></header>
44<pre class="sample">
45input[type="text"] {
46 border: 2px solid green;
47}
48</pre>
49 <header><h4>HTML</h4></header>
50<pre>
51<input type="text" placeholder="Enter text here">
52<input type="password" placeholder="Password (no border)">
53<input type="text" placeholder="Another text input">
54</pre>
55 <header><h4>HTML+CSS</h4></header>
56 <section class="sample-view">
57 <input type="text" placeholder="Enter text here">
58 <input type="password" placeholder="Password (no border)">
59 <input type="text" placeholder="Another text input">
60 </section>
61 </section>
62 </article>
63 <article>
64 <h3>element[attribute^=value] : ^=</h3>
65 <section>
66 <header><h4>CSS</h4></header>
67<pre class="sample">
68a[href^="https://"] {
69 font-weight: bold;
70}
71</pre>
72 <header><h4>HTML</h4></header>
73<pre>
74<a href="https://example.com">Secure Link (https)</a>
75<a href="http://example.com">Non-Secure Link (http)</a>
76<a href="https://another-example.com">Another Secure Link (https)</a>
77</pre>
78 <header><h4>HTML+CSS</h4></header>
79 <section class="sample-view">
80 <a href="https://example.com">Secure Link (https)</a>
81 <a href="http://example.com">Non-Secure Link (http)</a>
82 <a href="https://another-example.com">Another Secure Link (https)</a>
83 </section>
84 </section>
85 </article>
86 <article>
87 <h3>element[attribute$=value] : $=</h3>
88 <section>
89 <header><h4>CSS</h4></header>
90<pre class="sample">
91img[src$=".jpg"] {
92 border-radius: 10px;
93}
94</pre>
95 <header><h4>HTML</h4></header>
96<pre>
97<img src="image.jpg" alt="JPG Image" width="100">
98<img src="pattern.png" alt="PNG Image (no border radius)" width="100">
99<img src="example.jpg" alt="Another JPG Image" width="100">
100</pre>
101 <header><h4>HTML+CSS</h4></header>
102 <section class="sample-view">
103 <img src="image.jpg" alt="JPG Image" width="100">
104 <img src="pattern.png" alt="PNG Image (no border radius)" width="100">
105 <img src="example.jpg" alt="Another JPG Image" width="100">
106 </section>
107 </section>
108 </article>
109 <article>
110 <h3>element[attribute*=value] : *=</h3>
111 <section>
112 <header><h4>CSS</h4></header>
113<pre class="sample">
114p[class*="highlight"] {
115 background-color: yellow;
116}
117</pre>
118 <header><h4>HTML</h4></header>
119<pre>
120<p class="highlight-text">This paragraph is highlighted.</p>
121<p class="normal-text">This paragraph is not highlighted.</p>
122<p class="text-highlight-important">This is another highlighted paragraph.</p>
123</pre>
124 <header><h4>HTML+CSS</h4></header>
125 <section class="sample-view">
126 <p class="highlight-text">This paragraph is highlighted.</p>
127 <p class="normal-text">This paragraph is not highlighted.</p>
128 <p class="text-highlight-important">This is another highlighted paragraph.</p>
129 </section>
130 </section>
131 </article>
132 <article>
133 <h3>element[attribute~=value] : ~=</h3>
134 <section>
135 <header><h4>CSS</h4></header>
136<pre class="sample">
137div[class~="featured"] {
138 border: 1px solid red;
139}
140</pre>
141 <header><h4>HTML</h4></header>
142<pre>
143<div class="featured">This div is featured.</div>
144<div class="content featured">This div is also featured.</div>
145<div class="content">This div is not featured.</div>
146</pre>
147 <header><h4>HTML+CSS</h4></header>
148 <section class="sample-view">
149 <div class="featured">This div is featured.</div>
150 <div class="content featured">This div is also featured.</div>
151 <div class="content">This div is not featured.</div>
152 </section>
153 </section>
154 </article>
155 <article>
156 <h3>element[attribute|=value] : |=</h3>
157 <section>
158 <header><h4>CSS</h4></header>
159<pre class="sample">
160p[lang|="en"] {
161 font-style: italic;
162}
163</pre>
164 <header><h4>HTML</h4></header>
165<pre>
166<p lang="en">This paragraph is in English.</p>
167<p lang="en-US">This paragraph is in American English.</p>
168<p lang="fr">Ce paragraphe est en français.</p>
169</pre>
170 <header><h4>HTML+CSS</h4></header>
171 <section class="sample-view">
172 <p lang="en">This paragraph is in English.</p>
173 <p lang="en-US">This paragraph is in American English.</p>
174 <p lang="fr">Ce paragraphe est en français.</p>
175 </section>
176 </section>
177 </article>
178
179 <article>
180 <h3>CSS Attribute Selector Example : input[required] & input[placeholder]</h3>
181 <section>
182 <header><h4>CSS</h4></header>
183<pre class="sample">
184input[required] {
185 background-color: #ffcccc;
186}
187
188input[placeholder] {
189 font-style: italic;
190 color: #999;
191}
192</pre>
193 <header><h4>HTML</h4></header>
194<pre>
195<input type="text" required placeholder="Enter your name">
196<input type="email" required placeholder="Enter your email">
197<input type="text" placeholder="Optional field">
198</pre>
199 <header><h4>HTML+CSS</h4></header>
200 <section class="sample-view">
201 <input type="text" required placeholder="Enter your name">
202 <input type="email" required placeholder="Enter your email">
203 <input type="text" placeholder="Optional field">
204 </section>
205 </section>
206 </article>
207 <article>
208 <h3>CSS Attribute Selector Example : a[href^="https://"]</h3>
209 <section>
210 <header><h4>CSS</h4></header>
211<pre class="sample">
212a[href^="http://"] {
213 color: orange;
214}
215
216a[href^="https://"] {
217 color: green;
218}
219</pre>
220 <header><h4>HTML</h4></header>
221<pre>
222<a href="http://example.com">HTTP Link</a>
223<a href="https://secure.example.com">HTTPS Link</a>
224<a href="/relative/path">Relative Link</a>
225</pre>
226 <header><h4>HTML+CSS</h4></header>
227 <section class="sample-view">
228 <a href="http://example.com">HTTP Link</a>
229 <a href="https://secure.example.com">HTTPS Link</a>
230 <a href="/relative/path">Relative Link</a>
231 </section>
232 </section>
233 </article>
234 <article>
235 <h3>Attribute Selectors</h3>
236 <section>
237 <header><h4>CSS</h4></header>
238<pre class="sample">
239img[src$=".png"] {
240 border: 2px solid blue;
241}
242
243img[src$=".jpg"] {
244 opacity: 0.5;
245}
246</pre>
247 <header><h4>HTML</h4></header>
248<pre>
249<img src="pattern.png" alt="PNG Image" width="100">
250<img src="document.jpg" alt="JPEG Image" width="100">
251</pre>
252 <header><h4>HTML+CSS</h4></header>
253 <section class="sample-view">
254 <img src="pattern.png" alt="PNG Image" width="100">
255 <img src="image.jpg" alt="JPEG Image" width="100">
256 </section>
257 </section>
258 </article>
259
260 </main>
261</body>
262</html>Detaljer om attributselektorer i CSS
CSS-attributselektorer bruges til at vælge HTML-elementer, der har bestemte attributter. Dette giver dig mulighed for at style elementer baseret på deres attributværdier. Vi vil nu forklare trin-for-trin fra det grundlæggende til avanceret brug af attributselektorer.
Typer og syntaks for attributselektorer
Der er forskellige typer attributselektorer. Her vil vi tage et detaljeret kig på hver type selektor.
Valg af elementer med en attribut
1a[target] {
2 font-weight: bold;
3}- Ved at angive attributnavnet kan du vælge alle elementer, der har den angivne attribut.
- I dette eksempel er teksten for alle
<a>-elementer medtarget-attribut gjort fed.
Valg af elementer med en specifik attributværdi
1input[type="text"] {
2 border: 2px solid green;
3}- Ved at bruge
=kan du vælge elementer, hvis attributværdi præcist matcher en bestemt værdi. - I dette eksempel vil alle
<input>-elementer medtype-attributten sat til"text"få en grøn kant.
Valg af elementer med delvis attributværdimatch
Du kan angive delvise matches af attributværdier ved hjælp af følgende tre selektorer.
- Starter med (
^=)
1a[href^="https://"] {
2 font-weight: bold;
3}- Vælger elementer, hvor attributværdien starter med den angivne streng.
- I dette eksempel vil alle links med en
href-attribut, der starter med"https://", blive fremhævet med fed.
- Slutter med (
$=)
1img[src$=".jpg"] {
2 border-radius: 10px;
3}- Vælger elementer, hvis attributværdi slutter med den angivne streng.
- I dette eksempel anvendes stilarter, der afrunder hjørnerne, på alle billeder med en
src-attribut, der slutter med.jpg.
- Indeholder (
*=)
1p[class*="highlight"] {
2 background-color: yellow;
3}- Vælger elementer, hvis attributværdi indeholder den angivne streng.
- I dette eksempel anvendes en gul baggrundsfarve på alle
<p>-elementer, hvisclass-attribut indeholder"highlight".
Vælger elementer, hvor attributværdi indeholder et mellemrum-adskilt ord (~=)
1div[class~="featured"] {
2 border: 1px solid red;
3}~=vælger elementer, hvis attributværdien indeholder et specifikt ord blandt hvidt-rums-adskilte ord.- I dette eksempel anvendes en rød kant på alle
<div>-elementer, hvisclass-attribut indeholder ordet"featured".
Vælger elementer, hvor attributværdien starter med en bindestregs-adskilt værdi (|=)
1p[lang|="en"] {
2 font-style: italic;
3}|=vælger elementer, hvis attributværdien matcher den angivne streng eller starter med den efterfulgt af en bindestreg. Det bruges primært med sprog-attributten (lang).- I dette eksempel anvendes kursiv på alle
<p>-elementer, hvislang-attribut starter med"en", såsom"en"eller"en-US".
Praktiske eksempler og anvendelser
Lad os derefter se på nogle praktiske scenarier.
Stiljustering af formular-indtastningsfelter
1input[required] {
2 background-color: #ffcccc;
3}
4
5input[placeholder] {
6 font-style: italic;
7 color: #999;
8}- I dette eksempel anvendes en rødlig baggrundsfarve på alle inputfelter med
required-attributten, og pladsholderteksten i inputfelter medplaceholder-attributten er stiliseret med kursiv og en lys farve.
Stiljustering baseret på linkprotokoller
1a[href^="http://"] {
2 color: orange;
3}
4
5a[href^="https://"] {
6 color: green;
7}- Her sættes links, der starter med
http://, til orange, og links, der starter medhttps://, til grøn. Dette giver mulighed for en visuel differentiering mellem sikre og usikre links.
Stiljustering baseret på billedformater
1img[src$=".png"] {
2 border: 2px solid blue;
3}
4
5img[src$=".jpg"] {
6 opacity: 0.5;
7}- I dette eksempel tilføjes en blå kant til billeder i
.png-format, og opaciteten for billeder i.jpg-format sættes til 50%.
Sammendrag
CSS-attributvælgere er en fleksibel og kraftfuld måde at vælge elementer baseret på HTML-attributter. Brugen af disse vælgere gør det muligt at foretage mere specifik stiljustering.
Brug den grundlæggende syntaks og anvendte eksempler, der er forklaret i denne artikel, for nemt at opnå mere avanceret stiljustering.
Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.