هل يوجد محدد CSS يحدد dt وعناصر dd المرتبطة به؟

StackOverflow https://stackoverflow.com/questions/1429483

  •  07-07-2019
  •  | 
  •  

سؤال

تعد قوائم التعريفات طريقة رائعة لترميز المعلومات حيث ترتبط بعض الكلمات الأساسية بقيمة واحدة أو أكثر.

نظرًا لوجود الارتباط الدلالي لـ dt مع واحد أو أكثر عناصر dd، هل هناك طريقة لاستخدام CSS لتحديد هذه العناصر المرتبطة.

خذ بعين الاعتبار HTML التالي:

<dl>
  <dt>Foo</dt><dd>foo</dd>
  <dt>Bar</dt><dd>bar</dd>
  <dt>Baz</dt><dd>baz</dd>
</dl>

إذا كنت أرغب في تقديم هذا dl كـ:

-------  -------  -------
| Foo |  | Bar |  | Baz |
| foo |  | bar |  | baz |
-------  -------  -------

أحتاج إلى طريقة لقول زوج dt/dd رقم واحد يطفو على اليسار، والحصول على حد، وما إلى ذلك.

في الوقت الحالي، الطريقة الوحيدة التي أعرف بها كيفية القيام بذلك هي إنشاء دلس منفصلة لكل مجموعة من عناصر dt/dd:

<dl>
  <dt>Foo</dt><dd>foo</dd>
</dl>
<dl>
  <dt>Bar</dt><dd>bar</dd>
</dl>
<dl>
  <dt>Baz</dt><dd>baz</dd>
</dl>

وهو أمر فظيع من الناحية الدلالية، فهذه العناصر كلها أعضاء في قائمة واحدة.

فهل هناك محدد أو مجموعة من المحددات التي ستسمح لي بالعمل على مجموعات عناصر dt/dd؟

تحديث

ما أبحث عنه/أقترحه هو شيء يشبه العنصر الزائف list-item, ، حيث سيحدد dl:list-item أ dt وكل ما يرتبط بها dd العناصر كعنصر واحد، بنفس الطريقة تقريبًا first-line يسمح العنصر الزائف باختيار مجموعة من الأحرف كوحدة واحدة.

هل كانت مفيدة؟

المحلول 2

هذا استجابة لإجابة Knittl. لا توجد مساحة أو القدرة على الرد بشكل كاف على إجابة Knittl في تعليق ، وهذا الرد ليس جزءًا من السؤال ، لأنه يعالج الإجابة على السؤال. لذا ، سأمضي قدمًا ونشره كإجابة.

يقول Knittl أن ما أبحث عنه غير ممكن. كنت أظن أن هذا هو الحال ، لكنني كنت قد فاتني شيء عند قراءة المعايير المختلفة.

ومع ذلك ، فإن السبب المقدم غير صحيح بشكل واضح.

يؤكد Knittl:

لا ، ليس هناك لأن أ <dt> يمكن أن يكون متعددة <dd>S والعكس جولة.

إذا كان قد توقف مع "لا ، ليس هناك" كان سيكون الإجابة الصحيحة.

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

يمكن دحض هذا الادعاء مباشرة من خلال توفير خوارزمية لإنتاج مجموعة من العناصر ذات الصلة لأي مجموعة من عناصر DT و DD التي هي أطفال DL. علاوة على ذلك ، يمكن دحضه من خلال مثال مضاد للعنصر الزائف الحالي الذي يعمل على جزء غير محدد من المستند.

المنطق لتنفيذ عنصر زائفة تفيد بأن عناصر DT و DD ذات الصلة DT و DD ليس بالأمر الصعب. وبالتالي فإن عدد العناصر من أي نوع ليس بالأمر.

لعنصر DL معين:

  • حدد نوع مجموعة لاحتواء dt و dd عناصر تسمى أ dt_dd_group
  • ابدأ مجموعة من dt_dd_groupدعا S. all_groups
  • فحص كل عنصر طفل (غير متكرر):
    • إذا كان العنصر DT:
      • إذا كان هذا هو العنصر الأول أو العنصر السابق لم يكن dt:
        • إنشاء جديد dt_dd_group
        • إلحاق الجديد dt_dd_group إلى all_groups
        • إلحاق العنصر إلى dt_dd_group
      • آخر إلحاق العنصر بالتيار dt_dd_group
    • آخر إذا كان العنصر DD:
      • إذا كان هذا هو العنصر الأول:
        • إنشاء جديد dt_dd_group
        • إلحاق الجديد dt_dd_group إلى all_groups
        • إلحاق العنصر إلى dt_dd_group
      • إلحاق العنصر بالتيار dt_dd_group
  • مجموعة العودة all_groups

تقوم هذه الخوارزمية بسهولة بتقسيم مجموعة من عناصر DT/DD داخل DL إلى مجموعات ذات صلة. لأي DL قانونية ، بما في ذلك الحالة المتوافقة ولكن المرضية حيث لا يتم توفير عناصر DT الأولية:

<dl><dd>foo</dd><dd>bar</dd><dl>

إن القول بأن هذا النمط من الاختيار مستحيل بسبب الرقم غير المحدد أو عناصر DT أو DD في مثل هذه المجموعة ، يُظهر أنه خاطئ. عدد الحروف في السطر الأول من الفقرة غير محدد أيضًا ، ولكن :first-line العنصر الزائف هو جزء من معايير CSS.

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

لذلك ، باختصار ، في حين أن المحدد الذي يعمل على مجموعة من علامات DT و DD ذات الصلة الدلالية يمكن من الناحية النظرية ، من الناحية النظرية ، لم يتم تنفيذ مثل هذا المحدد.

نصائح أخرى

لا ، ليس هناك لأن أ <dt> يمكن أن يكون متعددة <dd>S والعكس جولة.

ولكن ربما:

dt + dd {  }

يكفي في قضيتك

ماذا عن استخدام المعرف مع أداة دمج الأخوة العامة؟

    <html>
    <head>
          <style type="text/css">
                #id1 ~ DD { color: red; }
                #id2 ~ DD { color: blue; }
          </style>
    </head>
    <body>
        <dl>
        <dt id="id1">term 1</dt>
            <dd>def 1a</dd>
            <dd>def 1b</dd>

        <dt id="id2">term 2</dt>
            <dd>def 2a</dd>
            <dd>def 2b</dd>
        </dl>
    </body>
</html>​​​​​​​​​​​​​​​

تحقق من هذا الكمان، يبدو أنه يفعل ما تريد ... http://jsfiddle.net/6qEHQ/

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top