CSS2 السمة محددات مع Regex

Question

السمة محددات CSS تسمح مجموعة من العناصر استنادا إلى قيم السمة.لسوء الحظ أن كنت لا تستخدم لهم في سنة (أساسا لأنها ليست مدعومة من قبل جميع المتصفحات الحديثة).ومع ذلك, أنا أتذكر بوضوح أن كنت قادرا على استخدامها لتزين جميع الروابط الخارجية مع رمز باستخدام تعليمة برمجية مشابهة لما يلي:

a[href=http] {
    background: url(external-uri);
    padding-left: 12px;
}

رمز أعلاه لا تعمل.سؤالي هو: كيف يعمل ؟ كيف يمكنني تحديد الكل <a> العلامات التي href السمة يبدأ مع "http"?الرسمية CSS المواصفات (الرابط أعلاه) حتى لا أذكر أن هذا أمر ممكن.ولكن أنا لا أتذكر هذا.

(ملاحظة:الحل الواضح أن استخدام class سمات التمييز.كنت ترغب في تجنب هذا لأن لدي القليل من تأثير طريقة الكود هو بناؤها.كل ما يمكنني تحرير CSS رمز.)

Answer 1

أما بالنسبة CSS 2.1 ، انظر http://www.w3.org/TR/CSS21/selector.html#attribute-selectors

الملخص التنفيذي:

    Attribute selectors may match in four ways:

    [att]
    Match when the element sets the "att" attribute, whatever the value of the attribute.
    [att=val]
    Match when the element's "att" attribute value is exactly "val".
    [att~=val]
    Match when the element's "att" attribute value is a space-separated list of
    "words", one of which is exactly "val". If this selector is used, the words in the 
    value must not contain spaces (since they are separated by spaces).
    [att|=val]
    Match when the element's "att" attribute value is a hyphen-separated list of
    "words", beginning with "val". The match always starts at the beginning of the
    attribute value. This is primarily intended to allow language subcode matches
    (e.g., the "lang" attribute in HTML) as described in RFC 3066 ([RFC3066]).

CSS3 أيضا يحدد قائمة محددات, ولكن التوافق يختلف بشكل كبير.

هناك أيضا أنيق اختبار جناح التي يظهر فيها محددات العمل في المتصفح الخاص بك.

أما بالنسبة المثال الخاص بك ،

a[href^=http]
{
    background: url(external-uri);
    padding-left: 12px;
}

ينبغي أن تفعل خدعة.للأسف غير معتمد من قبل أي.

Answer 2

Antti إجابة كافية لاختيار مرساة الذي href ما تبدأ http و يعطي الكمال المتهدمة المتاحة CSS2 regex سقو السمة محددات مثل:

Attribute selectors may match in four ways:

[att]
Match when the element sets the "att" attribute, whatever the value of the attribute.
[att=val]
Match when the element's "att" attribute value is exactly "val".
[att~=val]
Match when the element's "att" attribute value is a space-separated list of
"words", one of which is exactly "val". If this selector is used, the words in the 
value must not contain spaces (since they are separated by spaces).
[att|=val]
Match when the element's "att" attribute value is a hyphen-separated list of
"words", beginning with "val". The match always starts at the beginning of the
attribute value. This is primarily intended to allow language subcode matches
(e.g., the "lang" attribute in HTML) as described in RFC 3066 ([RFC3066]).

ولكن هنا هو المناسبة, تحديث طريقة لتحديد جميع الروابط المنتهية ولايته الجديدة CSS3 :لا الزائفة فئة محدد فضلا عن الجديد *= فرعية بناء الجملة للتأكد من أنه يتجاهل أي الروابط الداخلية التي قد لا تزال تبدأ مع http:

a[href^=http]:not([href*="yourdomain.com"])
{
    background: url(external-uri);
    padding-left: 12px;
}

*لاحظ أن هذا هو غير معتمد من قبل أي في IE8.شكرا, أي أنك أفضل :P

Answer 3

علما أنه في Antti المثال ربما كنت ترغب في إضافة قبض على أي المطلق الروابط قد تضطر إلى المجال الخاص بك ، والتي ربما لا تريد أن العلم 'الخارجية' ، على سبيل المثال:

a[href^="http://your.domain.com"]
{
    background: none;
    padding: 0;
}

و أنت تريد هذا بعد في الإعلان السابق.

قد تحتاج أيضا لتشمل كامل البروتوكول البادئة فقط في حال كنت قد المحلي الوثيقة المسماة "http-info.html" أن كنت ترغب في الارتباط ، على سبيل المثال:

a[href^="http://"]
{
    background: url(external-uri);
    padding-left: 12px;
}

علما أنه في كل من هذه قليلا-أكثر القضايا تعقيدا ، يجب أن اقتبس القيمة.هذا العمل بالنسبة لي في IE7.