محدد CSS معقد لوالد الطفل النشط [نسخة مكررة]

Question

هذا السؤال لديه بالفعل إجابة هنا:

• هل هناك محدد CSS الأصلي؟ 28 إجابة

هل هناك طريقة لتحديد عنصر أصلي بناءً على فئة العنصر الفرعي في الفصل؟المثال المناسب لي فيما يتعلق بمخرجات HTML من خلال مكون إضافي لطيف للقائمة http://drupal.org.يتم عرض الإخراج مثل هذا:

<ul class="menu">  
    <li>  
        <a class="active">Active Page</a>  
    </li>  
    <li>    
        <a>Some Other Page</a>  
    </li>  
</ul>  

سؤالي هو ما إذا كان من الممكن تطبيق نمط على عنصر القائمة الذي يحتوي على نقطة الارتساء مع الفئة النشطة عليه أم لا.من الواضح أنني أفضل أن يتم وضع علامة على عنصر القائمة على أنه نشط، لكن ليس لدي سيطرة على الكود الذي يتم إنتاجه.يمكنني تنفيذ هذا النوع من الأشياء باستخدام جافا سكريبت (يتبادر إلى ذهني JQuery)، لكنني كنت أتساءل عما إذا كانت هناك طريقة للقيام بذلك باستخدام محددات CSS.

فقط للتوضيح، أريد تطبيق نمط على عنصر القائمة، وليس على نقطة الارتساء.

Answer 1

لسوء الحظ، لا توجد طريقة للقيام بذلك باستخدام CSS.

الأمر ليس صعبًا جدًا مع JavaScript بالرغم من ذلك:

// JavaScript code:
document.getElementsByClassName("active")[0].parentNode;

// jQuery code:
$('.active').parent().get(0); // This would be the <a>'s parent <li>.

Answer 2

بحسب ويكيبيديا:

المحددات غير قادرة على الصعود

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

وبالنسبة لأي شخص يبحث عن SO في المستقبل، فقد تتم الإشارة إلى هذا أيضًا باسم محدد الأسلاف.

تحديث:

ال محددات المستوى 4 المواصفات يسمح لك بتحديد أي جزء من التحديد هو الموضوع:

يمكن تحديد موضوع المحدد بشكل صريح من خلال إعداد علامة الدولار ($) إلى أحد محددات المركب في المحدد.على الرغم من أن هيكل العنصر الذي يمثله المحدد هو نفسه مع أو بدون علامة الدولار ، فإن الإشارة إلى أن الموضوع بهذه الطريقة يمكن أن يغير أي محدد مركب يمثل الموضوع في هذا الهيكل.

مثال 1:

على سبيل المثال ، يمثل المحدد التالي عنصرًا في قائمة LI طفل فريد من نوعه لقائمة مرتبة: OL:

OL > LI:only-child

ومع ذلك ، فإن القائمة التالية تمثل قائمة مرتبة أن لديها طفلًا فريدًا ، فإن هذا الطفل ليكون لي:

$OL > LI:only-child

الهياكل التي يمثلها هذين المختارين هي نفسها ، لكن موضوعات المحددات ليست كذلك.

على الرغم من أن هذا غير متوفر (حاليًا، نوفمبر 2011) في أي متصفح أو كمحدد في jQuery.

Answer 3

تأخرت في الحفلة مرة أخرى ولكن مقابل ما يستحق، من الممكن استخدام jQuery ليكون أكثر إيجازًا.في حالتي كنت بحاجة للعثور على <ul> العلامة الأم ل <span> العلامة الموجودة في الطفل <li>.jQuery لديه :has المحدد بحيث يكون من الممكن التعرف على أحد الوالدين من خلال الأطفال الذين يحتوي عليهم (تم التحديث وفقًا لتعليق @Afrowave المرجع: https://api.jquery.com/has-selector/):

$("ul").has("#someId")

سوف يختار ul العنصر الذي يحتوي على عنصر فرعي بالمعرف someId.أو للإجابة على السؤال الأصلي، شيء مثل ما يلي يجب أن يفي بالغرض (لم يتم اختباره):

$("li").has(".active")

Answer 4

محدد "الوالد".

في الوقت الحالي، لا يوجد خيار لتحديد أصل العنصر في CSS (ولا حتى CSS3).ولكن مع CSS4, ، أهم الأخبار في مسودة W3C الحالية هو دعم المحدد الأصلي.

$ul li:hover{
    background: #fff;
}

باستخدام ما سبق، عند تحريك عنصر القائمة، سيتم تمييز القائمة غير المرتبة بأكملها عن طريق إضافة خلفية بيضاء إليها.

الوثائق الرسمية: https://www.w3.org/TR/2011/WD-selectors4-20110929/#overview (الصف الأخير).

Answer 5

المسودة الأولى ل محددات المستوى 4 يوضح طريقة لتعيين صراحة موضوع من محدد.سيسمح هذا لـ OP بتصميم عنصر القائمة باستخدام المحدد $li > a.active

من تحديد موضوع محدد:

على سبيل المثال، يمثل المحدد التالي عنصر قائمة LI تابعًا فريدًا لقائمة مرتبة OL:

OL > LI:only-child

ومع ذلك فإن القائمة التالية تمثل قائمة مرتبة OL لها طفل فريد، وهذا الطفل هو LI:

$OL > LI:only-child

الهياكل التي يمثلها هذين المحددين هي نفسها، ولكن موضوعات المحددات ليست كذلك.

يحرر:نظرًا لمدى "صعوبة" مسودة المواصفات، فمن الأفضل مراقبة ذلك عن طريق التحقق من صفحة CSSWG على مستوى المحددات 4.

Answer 6

الإجابة المستقبلية مع محددات CSS4

تحتوي مواصفات CSS الجديدة على نسخة تجريبية :has محدد زائف قد يكون قادرًا على القيام بهذا الشيء.

li:has(a:active) {
  /* ... */
}

ال دعم المتصفح وهذا أمر غير موجود أساسًا في هذا الوقت، ولكنه في الاعتبار المواصفات الرسمية.

---

الإجابة في عام 2012 كانت خاطئة في عام 2012 وأكثر خطأ في عام 2018

في حين أنه من الصحيح أن CSS لا يمكنه الصعود، إلا أنه من غير الصحيح أنه لا يمكنك الحصول على العنصر الأصلي لعنصر آخر.اسمحوا لي أن أكرر:

باستخدام رمز مثال HTML الخاص بك، يمكنك الحصول على li دون تحديد li

ul * a {
    property:value;
}

في هذا المثال، ul هو أصل بعض العناصر وهذا العنصر هو أصل المرساة.الجانب السلبي لاستخدام هذه الطريقة هو أنه إذا كان هناك ul مع أي عنصر فرعي يحتوي على مرساة، فإنه يرث الأنماط المحددة.

يمكنك أيضًا استخدام المحدد الفرعي أيضًا حيث سيتعين عليك تحديد العنصر الأصلي على أي حال.

ul>li a {
    property:value;
}

في هذا المثال، يجب أن يكون المرساة سليلًا لـ li الذي يجب أن يكون تابعًا لـ ul، مما يعني أنه يجب أن يكون داخل الشجرة التي تلي إعلان ul.سيكون هذا أكثر تحديدًا وسيحصل فقط على عنصر قائمة يحتوي على نقطة ربط وهو تابع لـ ul.

لذلك، للإجابة على سؤالك عن طريق الرمز.

ul.menu > li a.active {
    property:value;
}

يجب أن يحصل هذا على ul مع فئة القائمة، وعنصر القائمة الفرعي الذي يحتوي فقط على نقطة ربط مع الفئة النشطة.

Answer 7

واجهت نفس المشكلة مع دروبال.نظرًا للقيود المفروضة على CSS، فإن طريقة تنفيذ هذا الأمر هي إضافة الفئة "النشيطة" إلى العناصر الأصلية عند إنشاء قائمة HTML.هناك مناقشة جيدة لهذا في http://drupal.org/node/219804, والنتيجة هي أن هذه الوظيفة قد تم دمجها في الإصدار 6.x-2.x من وحدة Nicemenus.نظرًا لأن هذا لا يزال قيد التطوير، فقد قمت بنقل التصحيح إلى الإصدار 6.x-1.3 في http://drupal.org/node/465738 حتى أتمكن من الاستمرار في استخدام الإصدار الجاهز للإنتاج من الوحدة.

Answer 8

أجاب كثير من الناس مع jQuery أحد الوالدين، ولكن فقط للإضافة إلى ذلك، أردت مشاركة مقتطف سريع من التعليمات البرمجية التي أستخدمها لإضافة فئات إلى التنقل الخاص بي حتى أتمكن من إضافة التصميم إلى liالتي تحتوي فقط على قوائم فرعية وليست كذلك liهذا لا يحدث.

$("li ul").parent().addClass('has-sub');

Answer 9

لقد واجهت بالفعل نفس المشكلة مثل الملصق الأصلي.هناك حل بسيط وهو الاستخدام فقط .parent() محدد مسج.كانت مشكلتي أنني كنت أستخدم .parent بدلاً من .parent().خطأ غبي وأنا أعلم.

ربط الأحداث (في هذه الحالة نظرًا لأن علامات التبويب الخاصة بي موجودة في Modal، كنت بحاجة إلى ربطها بها .live بدلا من الأساسية .click.

$('#testTab1 .tabLink').live('click', function() {
    $('#modal ul.tabs li').removeClass("current"); //Remove any "current" class
    $(this).parent().addClass("current"); //Add "current" class to selected tab
    $('#modal div#testTab1 .tabContent').hide();
    $(this).next('.tabContent').fadeIn();   
    return false;
})
$('#testTab2 .tabLink').live('click', function() {
    $('#modal ul.tabs li').removeClass("current"); //Remove any "current" class
    $(this).parent().addClass("current"); //Add "current" class to selected tab
    $('#modal div#testTab2 .tabContent').hide();
    $(this).next('.tabContent').fadeIn();   
    return false;
})

هنا هو HTML..

<div id="tabView1" style="display:none;">
  <!-- start: the code for tabView 1 -->
  <div id="testTab1" style="width:1080px; height:640px; position:relative;">
    <h1 class="Bold_Gray_45px">Modal Header</h1>
    <div class="tabBleed"></div>
    <ul class="tabs">
      <li class="current"> <a href="#" class="tabLink" id="link1">Tab Title Link</a>
        <div class="tabContent" id="tabContent1-1">
          <div class="modalCol">
            <p>Your Tab Content</p>
            <p><a href="#" class="tabShopLink">tabBased Anchor Link</a> </p>
          </div>
          <div class="tabsImg"> </div>
        </div>
      </li>
      <li> <a href="#" class="tabLink" id="link2">Tab Title Link</a>
        <div class="tabContent" id="tabContent1-2">
          <div class="modalCol">
            <p>Your Tab Content</p>
            <p><a href="#" class="tabShopLink">tabBased Anchor Link</a> </p>
          </div>
          <div class="tabsImg"> </div>
        </div>
      </li>
    </ul>
  </div>
</div>

بالطبع يمكنك تكرار هذا النمط.. مع المزيد من LI

Answer 10

خطرت لي فكرة أخرى الآن والتي يمكن أن تكون حلاً خالصًا لـ CSS.اعرض فصلك النشط ككتلة موضوعة بشكل مطلق واضبط نمطها لتغطية الأصل.

a.active {
   position:absolute;
   display:block;
   width:100%;
   height:100%;
   top:0em;
   left:0em;
   background-color: whatever;
   border: whatever;
}
/* will also need to make sure the parent li is a positioned element so... */
ul.menu li {
    position:relative;
}    

لأولئك منكم الذين يريدون استخدام جافا سكريبت دون مسج ...

اختيار الوالدين أمر تافه.أنت بحاجة إلى getElementsByClass وظيفة من نوع ما، ما لم تتمكن من الحصول على البرنامج المساعد drupal الخاص بك لتعيين معرف للعنصر النشط بدلاً من الفئة.الوظيفة التي قدمتها حصلت عليها من عبقري آخر في SO.إنها تعمل بشكل جيد، فقط ضع في اعتبارك عند تصحيح الأخطاء أن الوظيفة ستعيد دائمًا مجموعة من العقد، وليس مجرد عقدة واحدة.

active_li = getElementsByClass("active","a");
active_li[0].parentNode.style.whatever="whatever";

function getElementsByClass(node,searchClass,tag) {
    var classElements = new Array();
    var els = node.getElementsByTagName(tag); // use "*" for all elements
    var elsLen = els.length;
    var pattern = new RegExp("\\b"+searchClass+"\\b");
    for (i = 0, j = 0; i < elsLen; i++) {
       if ( pattern.test(els[i].className) ) {
       classElements[j] = els[i];
       j++;
   }
}
return classElements;
}