css - weschool - كلمات html




هل هناك محدد رئيسي لل CSS؟ (18)

كيف أختار العنصر <li> الذي يكون أصلًا مباشرًا لعنصر الارتساء؟

في المثال ، سيكون CSS الخاص بي شيئًا كالتالي:

li < a.active {
    property: value;
}

من الواضح أن هناك طرق للقيام بذلك باستخدام JavaScript ، لكنني آمل أن يكون هناك نوع من الحل البديل موجود في CSS المستوى 2.

يتم إغفال القائمة التي أحاول نمطها بواسطة نظام إدارة المحتوى حتى لا أستطيع تحريك العنصر النشط إلى العنصر <li> ... (ما لم أصمم وحدة إنشاء القائمة التي أفضل ألا أفعلها).

أيه أفكار؟


أعرف أن OP تبحث عن حل CSS ولكن من السهل تحقيق ذلك باستخدام jQuery. في حالتي كنت بحاجة إلى العثور على العلامة <ul> لعلامة <span> الموجودة في الطفل <li> . jQuery has the :has selector لذا من الممكن تحديد أحد الوالدين من قبل الأطفال الذي يحتوي عليه:

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

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

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

استبعد W3C هذا المحدد بسبب تأثير الأداء الضخم الذي سيحدثه على المتصفح.


العنصر الزائف :focus-within يسمح :focus-within بتحديد أحد الوالدين في حالة تركيز أحد السلالات.

يمكن التركيز على عنصر إذا كان يحتوي على سمة tabindex .

دعم المتصفح للتركيز في الداخل

Tabindex

مثال

.click {
  cursor: pointer;
}

.color:focus-within .change {
  color: red;
}

.color:focus-within p {
  outline: 0;
}
<div class="color">
  <p class="change" tabindex="0">
    I will change color
  </p>
  <p class="click" tabindex="1">
    Click me
  </p>
</div>


حاليا لا يوجد محدد أولي ولا تتم مناقشته حتى في أي من محادثات W3C. تحتاج إلى فهم كيفية تقييم CSS بواسطة المتصفح لفهم ما إذا كنا بحاجة إليه أم لا.

هناك الكثير من الشرح الفني هنا.

يشرح جوناثان سنوك كيف يتم تقييم CSS .

كريس كويير يتحدث عن محادثات الوالدين .

هاري روبرتس مرة أخرى في كتابة كفاءة اختيار المغلق .

لكن نيكول سوليفان لديها بعض الحقائق المثيرة للاهتمام حول الاتجاهات الإيجابية .

هؤلاء الناس هم من الدرجة العليا في مجال تطوير الواجهة الأمامية.


ربما كان من الممكن استخدام محدد CSS " General Sibling Combinator " لما تريد:

E ~ F {
    property: value;
}

يطابق هذا أي عنصر F مسبوقًا بعنصر E


على الأقل حتى CSS3 لا يمكنك تحديد مثل هذا. ولكن يمكن القيام به بسهولة في الوقت الحاضر في JS ، تحتاج فقط إلى إضافة القليل من JavaScript ، لاحظ أن الرمز قصير جدًا.

      cells = document.querySelectorAll('div');
              [].forEach.call(cells, function (el) {
              //console.log(el.nodeName)
                if (el.hasChildNodes() && el.firstChild.nodeName=="A") {
                console.log(el)};
            });
            <div>Peter</div>
            <div><a href="#">Jackson link</a></div>
            <div>Philip</div>
            <div><a href="#">Pullman link</a></div>


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

$el.closest('.parent').css('prop','value');

في ما يلي الاختراق باستخدام pointer-events مع hover :

<!doctype html>
<html>
	<head>
		<title></title>
		<style>
/* accessory */
.parent {
	width: 200px;
	height: 200px;
	background: gray;
}
.parent, 
.selector {
	display: flex;
	justify-content: center;
	align-items: center;
}
.selector {
	cursor: pointer;
	background: silver;
	width: 50%;
	height: 50%;
}
		</style>
		<style>
/* pertinent */
.parent {
	background: gray;
	pointer-events: none;
}
.parent:hover {
	background: fuchsia;
}
.parent 
.selector {
	pointer-events: auto;
}
		</style>
	</head>
	<body>
		<div class="parent">
			<div class="selector"></div>
		</div>
	</body>
</html>


لا أعتقد أنه يمكنك تحديد الأصل في css فقط.

ولكن كما يبدو أن لديك .active فئة .active ، أليس من الأسهل نقل هذه الفئة إلى li (بدلاً من a )؟ بهذه الطريقة يمكنك الوصول إلى كل من الـ li والـ css فقط.


لا توجد حاليًا أية طريقة لتحديد أصل عنصر في CSS.

إذا كانت هناك طريقة لإجراء ذلك ، فستكون في أي من محددات محددات CSS الحالية:

في غضون ذلك ، سيتعين عليك اللجوء إلى جافا سكريبت إذا كنت بحاجة إلى تحديد عنصر رئيسي.

يتضمن مسودة العمل Selectors Level 4 a :has() فئة زائفة تعمل بنفس طريقة تنفيذ jQuery . اعتبارًا من عام 2018 ، لا يزال هذا غير مدعوم من أي متصفح .

باستخدام :has() يمكن حل السؤال الأصلي مع هذا:

li:has(> a.active) { /* styles to apply to the li tag */ }

لا يمكنك تحديد الأصل في css فقط.

ولكن كما يبدو أن لديك .active فئة .active ، .active من السهل نقل هذه الفئة إلى li (بدلاً من a )؟ بهذه الطريقة يمكنك الوصول إلى كل من الـ li والـ css فقط.


لا يوجد محدد الآباء. فقط الطريق لا يوجد محدد الأخوة السابق. أحد الأسباب الوجيهة لعدم وجود هذه المحددات هو أن المتصفح يجب أن يجتاز جميع أطفال عنصر لتحديد ما إذا كان يجب تطبيق فئة أم لا. على سبيل المثال إذا كتبت:

body:contains-selector(a.active) { background: red; }

بعد ذلك سيتعين على المتصفح الانتظار حتى يتم تحميله وتحليل كل شيء حتى </body> لتحديد ما إذا كانت الصفحة باللون الأحمر أم لا.

هذه المقالة لماذا لا نمتلك محددًا رئيسيًا يشرحها بالتفصيل.


من الممكن مع العطف في SASS:

h3
  font-size: 20px
  margin-bottom: 10px
  .some-parent-selector &
    font-size: 24px
    margin-bottom: 20px

إخراج CSS:

h3 {
  font-size: 20px;
  margin-bottom: 10px;
}
.some-parent-selector h3 {
  font-size: 24px;
  margin-bottom: 20px;
}

من الناحية الفنية لا توجد طريقة مباشرة للقيام بذلك ، يمكنك فرز ذلك سواء مع jquery أو javascript.

Howeve ، ص يمكنك القيام بشيء من هذا القبيل كذلك.

a.active h1 {color:blue;}
a.active p {color: green;}

مسج

$("a.active").parents('li').css("property", "value"); 

إذا كنت ترغب في تحقيق ذلك باستخدام jQuery ، فيُرجى الرجوع إلى المرجع المحدد في jQuery parent


هذا هو الجانب الأكثر مناقشة لمواصفات Selectors Level 4 . مع هذا المحدد سيكون قادرا على تصميم عنصر وفقا لطفله باستخدام علامة التعجب بعد المحدد المحدد (!).

فمثلا:

body! a:hover{
   background: red;
}

سيتم تعيين لون خلفية حمراء إذا كان المستخدم يمر فوق أي نقطة ارتساء.

ولكن علينا أن ننتظر تنفيذ المتصفحات :(


هل اقترح شخص ما شيئًا كهذا؟ مجرد فكرة للقائمة الأفقية ...

جزء من HTML

<div class='list'>
  <div class='item'>
    <a>Link</a>
  </div>
  <div class='parent-background'></div>
  <!-- submenu takes this place -->
</div>

جزء من المغلق

/* hide parent backgrounds... */
.parent-background {
  display: none; }

/* ... and show it when hover on children */
.item:hover + .parent-background {
  display: block;
  position: absolute;
  z-index: 10;
  top: 0;
  width: 100%; }

تحديث العرض والباقي من التعليمات البرمجية

مثال آخر على كيفية استخدامه مع المدخلات النصية - حدد حقل مجموعة الأصل


يمكنك استخدام هذا script .

*! > input[type=text] { background: #000; }

سيؤدي هذا إلى تحديد أي أصل لإدخال النص. لكن انتظر ، لا يزال هناك الكثير. إذا كنت تريد ، فيمكنك تحديد أحد الوالدين المحددين:

.input-wrap! > input[type=text] { background: #000; }

أو حدده عندما يكون نشطًا:

.input-wrap! > input[type=text]:focus { background: #000; }

تحقق من هذا HTML:

<div class="input-wrap">
    <input type="text" class="Name"/>
    <span class="help hide">Your name sir</span>
</div>

يمكنك تحديد هذا span.help عندما يكون input نشطًا span.help :

.input-wrap! .help > input[type=text]:focus { display: block; }

هناك العديد من القدرات ؛ فقط تحقق من وثائق البرنامج المساعد.

راجع للشغل ، وهو يعمل في IE.


يمكنك محاولة استخدام الارتباط التشعبي باعتباره الأصل ، ثم تغيير العناصر الداخلية على الماوس. مثله:

a.active h1 {color:red;}

a.active:hover h1 {color:green;}

a.active h2 {color:blue;}

a.active:hover h1 {color:yellow;}

بهذه الطريقة ، يمكنك تغيير النمط في علامات داخلية متعددة ، استنادًا إلى الانتقال للعنصر الرئيسي.





css-selectors