سی ایس ایس اٹری بیوٹ سلیکشنر تفصیلی

CSS 2 引入了属性选择器。

属性选择器可以根据元素的属性及属性值来选择元素。

简单属性选择

如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。

ਉਦਾਹਰਣ 1

如果您希望把包含标题（title）的所有元素变为红色，可以写作：

*[title] {color:red;}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਉਦਾਹਰਣ 2

与上面类似，可以只对有 href 属性的锚（a 元素）应用样式：

a[href] {color:red;}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਉਦਾਹਰਣ 3

ਇਹ ਕਈ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੇ ਅਧਾਰ 'ਤੇ ਚੋਣ ਕਰ ਸਕਦੇ ਹਨ, ਜਿਸ ਲਈ ਵਿਸ਼ੇਸ਼ਤਾ ਚੋਣਕਾਰ ਲਿੰਕ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ。

例如，为了将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色，可以这样写：

a[href][title] {color:red;}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

例子 4

可以采用一些创造性的方法使用这个特性。

例如，可以对所有带有 alt 属性的图像应用样式，从而突出显示这些有效的图像：

img[alt] {border: 5px solid red;}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਸੁਝਾਅ:上面这个特例更适合用来诊断而不是设计，即用来确定图像是否确实有效。

例子 5：为 XML 文档使用属性选择器

属性选择器在 XML 文档中相当有用，因为 XML 语言主张要针对元素和属性的用途指定元素名和属性名。

假设我们为描述太阳系行星设计了一个 XML 文档。如果我们想选择有 moons 属性的所有 planet 元素，使之显示为红色，以便能更关注有 moons 的行星，就可以这样写：

planet[moons] {color:red;}

这会让以下标记片中的第二个和第三个元素的文本显示为红色，但第一个元素的文本不是红色：

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars

ਪ੍ਰਭਾਵ ਦੇਖੋ

根据具体属性值选择

除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。

ਉਦਾਹਰਣ 1

ਉਦਾਹਰਣ, ਇਸ ਤਰ੍ਹਾਂ ਕਿਉਂਕਿ ਤੁਸੀਂ Web ਸਰਵਰ 'ਤੇ ਕਿਸੇ ਵਿਸ਼ੇਸ਼ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਲਿੰਕ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਇਸ ਤਰ੍ਹਾਂ ਲਿਖ ਸਕਦੇ ਹੋ:

a[href="http://www.codew3c.com/about_us.asp"] {color: red;}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਉਦਾਹਰਣ 2

ਸਰਲ ਵਿਸ਼ੇਸ਼ਤਾ ਚੋਣਕਾਰ ਨਾਲ ਵਿਆਪਕ, ਕਈ ਵਿਸ਼ੇਸ਼ਤਾ-ਮੁੱਲ ਚੋਣਕਾਰਾਂ ਨੂੰ ਜੋੜ ਕੇ ਇੱਕ ਦਸਤਾਵੇਜ਼ ਚੋਣ ਕਰ ਸਕਦੇ ਹਾਂ。

a[href="http://www.codew3c.com/"][title="W3School"] {color: red;}

ਇਹ ਹੇਠਲੇ ਟੈਗ ਵਿੱਚ ਪਹਿਲੇ ਹਵਾਲੇ ਦੇ ਟੈਕਸਟ ਨੂੰ ਲਾਲ ਰੰਗ ਵਿੱਚ ਬਦਲ ਦੇਵੇਗਾ, ਪਰ ਦੂਜੇ ਜਾਂ ਤੀਜੇ ਲਿੰਕ ਪ੍ਰਭਾਵਿਤ ਨਹੀਂ ਹੋਣਗੇ:

<a href="http://www.codew3c.com/" title="W3School">W3School</a>
<a href="http://www.codew3c.com/css/" title="CSS">CSS</a>
<a href="http://www.codew3c.com/html/" title="HTML">HTML</a>

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਉਦਾਹਰਣ 3

ਇਸ ਤਰ੍ਹਾਂ, XML ਭਾਸ਼ਾ ਵੀ ਇਸ ਤਰ੍ਹਾਂ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੀ ਹੈ ਤਾਕਿ ਸਟਾਈਲ ਸੈਟ ਕੀਤੇ ਜਾਣ

ਹੁਣ ਅਸੀਂ ਫਿਰ ਪਲੈਨਟ ਦੇ ਉਦਾਹਰਣ ਵਿੱਚ ਵਾਪਸ ਆਉਂਦੇ ਹਾਂ। ਅਸੀਂ ਇਹ ਸੁਪਨਾ ਦੇਖਦੇ ਹਾਂ ਕਿ ਸਿਰਫ moons ਅਟ੍ਰੀਬਿਊਟ ਦਾ ਮੁੱਲ 1 ਹੋਣ ਵਾਲੇ planet ਇਲੈਕਟਰਾਂ ਨੂੰ ਚੁਣੇ ਜਾਣ

planet[moons="1"] {color: red;}

ਇਸ ਕੋਡ ਨਾਲ ਹੇਠ ਲਿਖੇ ਟੈਗ ਦੇ ਦੂਜੇ ਇਲੈਕਟਰ ਨੂੰ ਲਾਲ ਕੀਤਾ ਜਾਵੇਗਾ, ਪਰ ਪਹਿਲਾ ਅਤੇ ਤੀਜਾ ਇਲੈਕਟਰ ਪ੍ਰਭਾਵਿਤ ਨਹੀਂ ਹੋਣਗੇ:

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

ਪ੍ਰਭਾਵ ਦੇਖੋ

ਅਟ੍ਰੀਬਿਊਟ ਅਤੇ ਅਟ੍ਰੀਬਿਊਟ ਦਾ ਮੁੱਲ ਪੂਰੀ ਤਰ੍ਹਾਂ ਮੈਚ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ

ਕਿਰਪਾ ਕਰਕੇ, ਇਹ ਫਾਰਮੈਟ ਮੂਲ ਅਟ੍ਰੀਬਿਊਟ ਨਾਲ ਪੂਰੀ ਤਰ੍ਹਾਂ ਮੈਚ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ。

ਜੇਕਰ ਅਟ੍ਰੀਬਿਊਟ ਦਾ ਮੁੱਲ ਸਪੇਸ ਨਾਲ ਵੰਡੇ ਸ਼ਬਦ ਸੂਚੀ ਵਿੱਚ ਹੈ, ਤਾਂ ਮੈਚ ਵਿੱਚ ਸਮੱਸਿਆ ਆ ਸਕਦੀ ਹੈ。

ਇਹ ਟੈਗ ਫਰੈਗਮੈਂਟ ਦੇਖੋ:

<p class="important warning">This paragraph is a very important warning.</p>

ਜੇਕਰ ਇਸ ਤਰ੍ਹਾਂ ਲਿਖਿਆ ਜਾਵੇ, ਤਾਂ ਇਹ ਰੂਲ ਨਾਲ ਉਦਾਹਰਣ ਟੈਗ ਨਾਲ ਮੈਚ ਨਹੀਂ ਕਰੇਗਾ:

ਜੇਕਰ ਤੁਹਾਨੂੰ ਕਿਸੇ ਵਿਸ਼ੇਸ਼ ਅਟ੍ਰੀਬਿਊਟ ਦੀ ਮੁੱਲ ਨੂੰ ਚੁਣਨਾ ਹੈ, ਤਾਂ ਇਸ ਤਰ੍ਹਾਂ ਲਿਖਣਾ ਹੈ:

p[class="important warning"] {color: red;}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਪਾਰਟੀਅਲ ਅਟ੍ਰੀਬਿਊਟ ਸਿਲੈਕਟਰ ਦੀ ਵਰਤੋਂ

ਜੇਕਰ ਤੁਹਾਨੂੰ ਅਟ੍ਰੀਬਿਊਟ ਦੀ ਮੁੱਲ ਵਿੱਚ ਕਿਸੇ ਸ਼ਬਦ ਦੀ ਸੂਚੀ ਦੇ ਕਿਸੇ ਸ਼ਬਦ ਨੂੰ ਚੁਣਨਾ ਹੈ, ਤਾਂ ਉਸ ਲਈ ਵਾਵ ( ~ ) ਵਰਤਣਾ ਹੈ。

ਇਸ ਪ੍ਰਕਾਰ, class ਅਟ੍ਰੀਬਿਊਟ ਵਿੱਚ important ਹੋਣ ਵਾਲੇ ਇਲੈਕਟਰਾਂ ਨੂੰ ਚੁਣਨ ਲਈ ਇਹ ਸਿਲੈਕਟਰ ਵਰਤ ਸਕਦੇ ਹਾਂ:

p[class~="important"] {color: red;}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਜੇਕਰ ਵਾਵ ਨੂੰ ਨਾ ਮੰਨਿਆ ਜਾਵੇ, ਤਾਂ ਇਹ ਸੂਚੀਬੱਧ ਮੈਚ ਪੂਰਾ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਹੈ。

ਪਾਰਟੀਅਲ ਅਟ੍ਰੀਬਿਊਟ ਸਿਲੈਕਟਰ ਅਤੇ ਪੁੰਜ ਕਲਾਸ ਨੋਟੇਸ਼ਨ ਦਾ ਅਲਗ ਹੈ

ਇਹ ਸਿਲੈਕਟਰ ਅਸੀਂ ਜਿਸ ਤਰ੍ਹਾਂ ਨਾਲ class ਸਿਲੈਕਟਰ ਵਿੱਚ ਚਰਚਾ ਕੀਤੀ ਸੀ, ਉਸੇ ਨਾਲ ਬਰਾਬਰ ਹੈ。

ਯਾਨੀ, p.important ਅਤੇ p[class="important"] ਹੀ ਹੀ ਹੈ ਜਦੋਂ ਇਹਨਾਂ ਨੂੰ HTML ਦਸਤਾਵੇਜ਼ ਉੱਤੇ ਲਾਗੂ ਕੀਤਾ ਜਾਵੇ。

ਤਾਂ, ਜੋ ਕਿ "~=" ਅਟ੍ਰੀਬਿਊਟ ਸਿਲੈਕਟਰ ਲਈ ਕਿਉਂ ਦੇਖਣਾ ਹੈ? ਕਿਉਂਕਿ ਇਹ ਕਿਸੇ ਵੀ ਅਟ੍ਰੀਬਿਊਟ ਵਿੱਚ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ, ਨਾ ਕੇ ਸਿਰਫ class ਵਿੱਚ。

ਜਿਵੇਂ ਕਿ, ਇੱਕ ਸਾਰੇ ਚਿੱਤਰਾਂ ਵਾਲਾ ਦਸਤਾਵੇਜ਼ ਹੋ ਸਕਦਾ ਹੈ, ਜਿਸ ਵਿੱਚੋਂ ਸਿਰਫ ਹਿੱਸਾ ਚਿੱਤਰ ਹੀ ਹੋਣਗੇ। ਇਸ ਲਈ, ਇੱਕ title ਦੇ ਦਸਤਾਵੇਜ਼ ਦੇ ਪਾਰਟੀਅਲ ਅਟ੍ਰੀਬਿਊਟ ਸਿਲੈਕਟਰ ਵਰਤ ਸਕਦੇ ਹਾਂ, ਜੋ ਇਨ੍ਹਾਂ ਚਿੱਤਰਾਂ ਨੂੰ ਚੁਣੇ:

img[title~="Figure"] {border: 1px solid gray;}

这个规则会选择 title 文本包含 "Figure" 的所有图像。没有 title 属性或者 title 属性中不包含 "Figure" 的图像都不会匹配。

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਉਪਸ਼ੇ਷ਣ ਮੁੱਲ ਪ੍ਰੋਪਰਟੀ ਸੈਲੈਕਟਰ

ਹੇਠ ਇੱਕ ਵਧੇਰੇ ਉੱਚ ਪੱਧਰੀ ਸੈਲੈਕਟਰ ਮੌਡਿਊਲ ਦੀ ਜਾਣਕਾਰੀ ਦੇਣਾ ਹੈ ਜੋ ਸੀਐੱਸਐੱਸ2 ਦੇ ਬਾਅਦ ਜਾਰੀ ਕੀਤਾ ਗਿਆ ਹੈ ਅਤੇ ਸ਼ਾਮਲ ਹੁੰਦੇ ਹਨ ਅਧਿਕ ਪਾਰਟ ਵੇਲਿਊ ਪ੍ਰੋਪਰਟੀ ਸੈਲੈਕਟਰਾਂ। ਨਿਯਮਾਂ ਦੇ ਅਨੁਸਾਰ ਇਸ ਨੂੰ "ਉਪਸ਼ੇ਷ਣ ਮੁੱਲ ਪ੍ਰੋਪਰਟੀ ਸੈਲੈਕਟਰ" ਕਿਹਾ ਜਾਂਦਾ ਹੈ。

ਕਈ ਆਧੁਨਿਕ ਬਰਾਊਜ਼ਰ ਇਹ ਸੈਲੈਕਟਰਾਂ ਨੂੰ ਸਮਰਥਨ ਕਰਦੇ ਹਨ ਜਿਵੇਂ ਕਿ ਆਈਈ7。

ਹੇਠ ਲਿਖੇ ਟੇਬਲ ਵਿੱਚ ਇਹ ਸੈਲੈਕਟਰਾਂ ਦਾ ਸਰਲ ਸਾਰਾਂਕ ਹੈ:

ਟਾਈਪ وصف
[abc^="def"] abc ਪ੍ਰੋਪਰਟੀ ਮੁੱਲ "def" ਨਾਲ ਸ਼ੁਰੂ ਹੋਣ ਵਾਲੇ ਸਾਰੇ ਤੱਤਾਂ ਨੂੰ ਚੁਣੋ
[abc$="def"] abc ਪ੍ਰੋਪਰਟੀ ਮੁੱਲ "def" ਨਾਲ ਸਮਾਪਤ ਹੋਣ ਵਾਲੇ ਸਾਰੇ ਤੱਤਾਂ ਨੂੰ ਚੁਣੋ
[abc*="def"] abc ਪ੍ਰੋਪਰਟੀ ਮੁੱਲ ਵਿੱਚ "def" ਸ਼ਬਦ ਸ਼ਾਮਲ ਹੋਣ ਵਾਲੇ ਸਾਰੇ ਤੱਤਾਂ ਨੂੰ ਚੁਣੋ

ਇਹ ਸੈਲੈਕਟਰਾਂ ਦੀਆਂ ਬਹੁਤ ਸਾਰੀਆਂ ਵਰਤੋਂ ਹੁੰਦੀਆਂ ਹਨ。

ਉਦਾਹਰਣ ਵਜੋਂ ਜੇਕਰ ਤੁਸੀਂ ਸਾਰੇ CodeW3C.com ਦੇ ਲਿੰਕਾਂ 'ਤੇ ਸਟਾਈਲ ਲਾਗੂ ਕਰਨੇ ਚਾਹੁੰਦੇ ਹੋ ਤਾਂ ਇਨ੍ਹਾਂ ਸਾਰੇ ਲਿੰਕਾਂ ਲਈ class ਨਹੀਂ ਨਿਰਧਾਰਤ ਕਰਨੇ ਚਾਹੀਦੇ ਅਤੇ ਫਿਰ ਉਸ ਵਾਲੇ class ਦੇ ਅਨੁਸਾਰ ਸਟਾਈਲ ਲਿਖਣੇ ਚਾਹੀਦੇ ਹਨ, ਬਲਕਿ ਨਿਮਨਲਿਖਤ ਰੂਲ ਲਿਖਣਾ ਚਾਹੀਦਾ ਹੈ:

a[href*="codew3c.com"] {color: red;}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਸੁਝਾਅ:ਕਿਸੇ ਵੀ ਪ੍ਰੋਪਰਟੀ ਨੂੰ ਇਹ ਸੈਲੈਕਟਰ ਵਰਤ ਸਕਦੇ ਹਨ。

ਵਿਸ਼ੇਸ਼ ਪ੍ਰੋਪਰਟੀ ਸੈਲੈਕਟਰ ਟਾਈਪ

ਆਖਰੀ ਵਿੱਚ ਤੁਹਾਨੂੰ ਵਿਸ਼ੇਸ਼ ਪ੍ਰੋਪਰਟੀ ਸੈਲੈਕਟਰ ਦੀ ਜਾਣਕਾਰੀ ਦੇਣਾ ਹੈ। ਨਿਮਨਲਿਖਤ ਉਦਾਹਰਣ ਦੇਖੋ:

*[lang|="en"] {color: red;}

ਉੱਤੇ ਇਹ ਰੂਲ ਸਭ ਤੋਂ ਬਾਅਦ ਲੈਂਗ ਪ੍ਰੋਪਰਟੀ ਜੋ ਕਿ en ਨਾਲ ਸਮਾਨ ਹੈ ਜਾਂ en- ਨਾਲ ਸ਼ੁਰੂ ਹੁੰਦੀ ਹੈ ਦੇ ਸਾਰੇ ਤੱਤਾਂ ਨੂੰ ਚੁਣੇਗੀ। ਇਸ ਲਈ ਨਿਮਨਲਿਖਤ ਮਾਰਕਅੱਪ ਵਿੱਚ ਪਹਿਲੇ ਤਿੰਨ ਤੱਤਾਂ ਨੂੰ ਚੁਣਿਆ ਜਾਵੇਗਾ ਅਤੇ ਬਾਕੀ ਦੋ ਤੱਤਾਂ ਨੂੰ ਨਹੀਂ ਚੁਣਿਆ ਜਾਵੇਗਾ:

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-<p lang="au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਆਮ ਤੌਰ 'ਤੇ [att|="val"] ਕਿਸੇ ਵੀ ਅਤੀਤ ਅਤੇ ਉਸ ਦੇ ਮੁੱਲ ਲਈ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ。

ਇਕ ਹਾਲ ਹੀ ਐੱਚਟੀਐੱਮਐੱਲ ਦਸਤਾਵੇਜ਼ ਵਿੱਚ ਇੱਕ ਲੜੀ ਅਤੇ ਇਮੇਜਾਂ ਹਨ ਜਿਸ ਵਿੱਚ ਹਰ ਇਮੇਜਾ ਦਾ ਫਾਇਲ ਨਾਮ ਇਸ ਤਰ੍ਹਾਂ ਹੋਵੇ: figure-1.jpg ਅਤੇ figure-2.jpg। ਇਸ ਤਰ੍ਹਾਂ ਸਾਰੇ ਇਮੇਜਾਂ ਨੂੰ ਮੈਚ ਕਰਨ ਲਈ ਨਿਮਨਲਿਖਤ ਸੈਲੈਕਟਰ ਵਰਤ ਸਕਦੇ ਹਾਂ:

img[src|="figure"] {border: 1px solid gray;}

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

ਕੀ ਇਹ ਲੈਕਸਿਕਲ ਪ੍ਰੋਪਰਟੀ ਸੈਲੈਕਟਰ ਸਭ ਤੋਂ ਆਮ ਵਰਤੋਂ ਹੈ ਕਿ ਭਾਸ਼ਾ ਮੁੱਲ ਨਾਲ ਮੈਚ ਕਰਨ ਲਈ。

سی ایس ایس سلیکشنر مرجع دکشنری

سلیکشنر وصف
[اطلاعت] مقررہ مقابلہ کا حامل اطلاعت کا جوڑا جاتا ہے。
[اطلاعت=مقابلہ] مقررہ مقابلہ کا حامل اطلاعت اور مقررہ مقابلہ کا حامل کا جوڑا جاتا ہے。
[اطلاعت~=مقابلہ] مقابلہ میں دینے والی اطلاعات میں مقررہ مقابلہ کا حامل لفظ کو جوڑا جاتا ہے。
[اطلاعت|=مقابلہ] مقررہ مقابلہ کا حامل اطلاعت کی شروعات میں مقررہ مقابلہ کا حامل عنصر کو جوڑا جاتا ہے، یہ مقررہ مقابلہ کا حامل اطلاعت پورا لفظ ہونا چاہئیے。
[اطلاعت^=مقابلہ] مقابلہ میں دینے والی اطلاعات کی شروعات میں مقررہ مقابلہ کا حامل ہر عنصر کو جوڑا جاتا ہے。
[اطلاعت$=مقابلہ] مقابلہ میں دینے والی اطلاعات کی خاتمہ میں مقررہ مقابلہ کا حامل ہر عنصر کو جوڑا جاتا ہے。
[اطلاعت*=مقابلہ] مقابلہ میں دینے والی اطلاعات میں مقررہ مقابلہ کا حامل ہر عنصر کو جوڑا جاتا ہے。