هل هناك محدد CSS الأصلي؟

Question

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

على سبيل المثال، سيكون CSS الخاص بي شيئًا مثل هذا:

li < a.active {
    property: value;
}

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

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

أيه أفكار؟

Answer 1

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

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

• محددات المستوى 3 المواصفات
• مواصفات محددات CSS 2.1

في هذه الأثناء، سيتعين عليك اللجوء إلى JavaScript إذا كنت بحاجة إلى تحديد عنصر أصل.

---

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

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

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

Answer 2

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

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

Answer 3

ويمكنك استخدام هذا النصي .

*! > 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 تنشط وتبين أنها:

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

وهناك المزيد من القدرات. انظروا فقط إلى وثائق البرنامج المساعد.

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

Answer 4

وكما ذكر من قبل اثنين آخرين، وليس هناك وسيلة لأسلوب الوالدين على العنصر / ثانية فقط باستخدام CSS ولكن الأعمال التالية مع <لأ href = "http://jquery.com/" يختلط = "noreferrer "عنوان =" مسج كتابة أقل بذل المزيد من الجهد "> مسج :.

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

Answer 5

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

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

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

لماذا ليس لدينا محدد الوالدين يفسر ذلك في التفاصيل.

Answer 6

وهناك ليست طريقة للقيام بذلك في CSS2. يمكنك إضافة فئة للى ومرجع ل

li.active > a {
    property: value;
}

Answer 7

ونعم: :has()

ودعم المتصفح: لا شيء

Answer 8

وحاول تبديل a إلى block العرض، ومن ثم استخدام أي النمط الذي تريده. والعنصر a ملء عنصر li، وسوف تكون قادرا على تعديل انها تبدو كما تريد. لا تنسى أن تحدد li الحشو إلى 0.

li {
  padding: 0;
  overflow: hidden;
}
a {
  display: block;
  width: 100%;
  color: ..., background: ..., border-radius: ..., etc...
}
a.active {
  color: ..., background: ...
}

Answer 9

وومحدد CSS " عامة الشقيق Combinator " يمكن ربما تستخدم لما تريد:

E ~ F {
    property: value;
}

وهذا ينطبق على أي عنصر F أن يسبقه عنصر E.

Answer 10

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

Answer 11

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

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

وسيتم تحديد العنصر ul التي تحتوي على عنصر تابع مع معرف <م> someId . أو للإجابة على السؤال الأصلي، وهو كما يلي ينبغي أن تفعل خدعة (غير مجربة):

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

Answer 12

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

على سبيل المثال:

body! a:hover{
   background: red;
}

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

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

Answer 13

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

a.active h1 {color:red;}

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

a.active h2 {color:blue;}

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

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

Answer 14

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

يمكن التركيز على العنصر إذا كان يحتوي على 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>

Answer 15

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

وجزء من HTML

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

وجزء من CSS

/* 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%; }

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

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

Answer 16

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

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

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

كريس Coyier على محادثات محدد الرئيسي .

هاري روبرتس مجددا على كتابة محددات CSS كفاءة .

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

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

Answer 17

وهناك البرنامج المساعد الذي يمتد CSS لتشمل بعض الميزات غير القياسية التي يمكن أن تساعد حقا عندما تصميم المواقع الإلكترونية. انه دعا EQCSS .

واحدة من الأشياء يضيف EQCSS غير محدد الوالدين. وهو يعمل في جميع المتصفحات IE8 وما فوق. وهنا الشكل:

@element 'a.active' {
  $parent {
    background: red;
  }
}

وحتى هنا قمنا بفتح الاستعلام عنصر في كل a.active عنصر، ولأنماط داخل هذا الاستعلام، أشياء مثل $parent معنى لأن هناك نقطة مرجعية. المتصفح يمكن العثور على الأم، لأنها تشبه الى حد بعيد parentNode في جافا سكريبت.

هنا عينة من $parent و <لأ href = "http://staticresource.com /parent.html "يختلط =" noreferrer "> عرض $parent آخر يعمل في IE8 ، وكذلك <لأ href =" https://i.imgur.com/QyVAj2u.png "يختلط =" noreferrer " > لقطة في حال لم يكن لديك IE8 حول لاختبار مع .

ويشمل EQCSS أيضا الفوقية محددات $prev للعنصر قبل العنصر المحدد، $this فقط تلك العناصر التي تطابق استعلام عنصر، وأكثر من ذلك.

Answer 18

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

ومع ذلك، يمكنك أن تفعل شيئا من هذا القبيل أيضا.

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

مسج

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

إذا كنت تريد تحقيق ذلك باستخدام jQuery، فهذا هو المرجع محدد الأصل jQuery

Answer 19

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

Answer 20

والجواب القصير هو على NO ، أو أننا لم يكن لديك parent selector في هذه المرحلة في CSS، ولكن إذا لم يكن لديك على أية حال لمبادلة العناصر أو الطبقات، والخيار الثاني هو استخدام جافا سكريبت، شيء من هذا القبيل:

var activeATag = Array.prototype.slice.call(document.querySelectorAll('a.active'));

activeATag.map(function(x) {
  if(x.parentNode.tagName === 'LI') {
    x.parentNode.style.color = 'red'; //your property: value;
  }
});

وأو طريقة أقصر إذا كنت تستخدم على مسج في التطبيق الخاص بك:

$('a.active').parents('li').css('color', 'red'); //your property: value;

Answer 21

وانها الآن 2019، و أحدث مشروع التعشيش وحدة CSS لديها في الواقع شيء من هذا القبيل. إدخال @nest المعرضين للقواعد.

<اقتباس فقرة>   

3.2. والتعشيش في القاعدة:nest

     

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

     

لمساعدة في كل هذه القضايا، هذه المواصفات تحددnest القاعدة، الذي يفرض قيودا أقل على كيفية صحيحا قواعد النمط العش. بناء الجملة هو:

     

و@nest = @nest <selector> { <declaration-list> }

     

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

و(نسخ ولصق من URL أعلاه).

مثال محددات صالحة تحت هذه المواصفات:

.foo {
  color: red;
  @nest & > .bar {
    color: blue;
  }
}
/* equivalent to
   .foo { color: red; }
   .foo > .bar { color: blue; }
 */

.foo {
  color: red;
  @nest .parent & {
    color: blue;
  }
}
/* equivalent to
   .foo { color: red; }
   .parent .foo { color: blue; }
 */

.foo {
  color: red;
  @nest :not(&) {
    color: blue;
  }
}
/* equivalent to
   .foo { color: red; }
   :not(.foo) { color: blue; }
 */

Answer 22

على الرغم من عدم وجود محدد رئيسي في CSS القياسي في الوقت الحالي، إلا أنني أعمل على مشروع (شخصي) يسمى فأس (أي. بناء جملة محدد CSS المعزز / ACSSSS) والذي يتضمن، من بين المحددات السبعة الجديدة، كلاً من:

1. ان الوالد المباشر محدد < (مما يتيح الاختيار المعاكس ل >)
2. ان أي محدد الأجداد ^ (مما يتيح الاختيار المعاكس ل [SPACE])

فأس حاليًا في مرحلة تجريبية مبكرة نسبيًا من التطوير.

شاهد العرض التوضيحي هنا:

http://rounin.co.uk/projects/axe/axe2.html

(قارن بين القائمتين الموجودتين على اليسار المصممتين بمحددات قياسية والقائمتين الموجودتين على اليمين المصممتين بمحددات الفأس)

Answer 23

وهنا الإختراق باستخدام 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>

Answer 24

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

      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>

Answer 25

لا لا يمكنك تحديد الوالد في المغلق فقط.

ولكن كما يبدو بالفعل أن يكون لها الدرجة .active، wouldn't يكون من الأسهل لنقل تلك الفئة إلى li (بدلا من a)؟ وبهذه الطريقة يمكنك الوصول إلى كل من li وa عبر المغلق فقط.

Answer 26

ومن الممكن مع العطف في ساس:

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;
}

Answer 27

أيه أفكار؟

سيكون CSS 4 رائعًا إذا أضاف بعضًا منه خطافات داخل المشي إلى الوراء.وحتى ذلك الحين فمن الممكن (على الرغم من لا من المستحسن) للاستخدام checkbox و/أو radio inputس ل استراحة بالطريقة المعتادة التي ترتبط بها الأشياء، ومن خلالها تسمح أيضًا لـ CSS بالعمل خارج نطاقها الطبيعي ...

/* Hide things that may be latter shown */
.menu__checkbox__selection,
.menu__checkbox__style,
.menu__hidden {
  display: none;
  visibility: hidden;
  opacity: 0;
  filter: alpha(opacity=0); /* Old MS opacity */
}


/* Base style for content and style menu */
.main__content {
  background-color: lightgray;
  color: black;
}

.menu__hidden {
  background-color: black;
  color: lightgray;
  /* Make list look not so _listy_ */
  list-style: none;
  padding-left: 5px;
}

.menu__option {
  box-sizing: content-box;
  display: block;
  position: static;
  z-index: auto;
}

/* ▼ - \u2630 - Three Bars */
/*
.menu__trigger__selection::before {
  content: '\2630';
  display: inline-block;
}
*/

/* ▼ - Down Arow */
.menu__trigger__selection::after {
  content: "\25BC";
  display: inline-block;
  transform: rotate(90deg);
}


/* Customize to look more `select` like if ya like */
.menu__trigger__style:hover,
.menu__trigger__style:active {
  cursor: pointer;
  background-color: darkgray;
  color: white;
}


/**
 * Things to do when checkboxes/radios are checked
 */

.menu__checkbox__selection:checked + .menu__trigger__selection::after,
.menu__checkbox__selection[checked] + .menu__trigger__selection::after {
  transform: rotate(0deg);
}

/* This bit is something that ya may see elsewhere */
.menu__checkbox__selection:checked ~ .menu__hidden,
.menu__checkbox__selection[checked] ~ .menu__hidden {
  display: block;
  visibility: visible;
  opacity: 1;
  filter: alpha(opacity=100); /* MS!? */
}


/**
 * Hacky CSS only changes based off non-inline checkboxes
 * ... AKA the stuff you cannot unsee after this...
 */
.menu__checkbox__style[id="style-default"]:checked ~ .main__content {
  background-color: lightgray;
  color: black;
}

.menu__checkbox__style[id="style-default"]:checked ~ .main__content .menu__trigger__style[for="style-default"] {
  color: darkorange;
}


.menu__checkbox__style[id="style-one"]:checked ~ .main__content {
  background-color: black;
  color: lightgray;
}

.menu__checkbox__style[id="style-one"]:checked ~ .main__content .menu__trigger__style[for="style-one"] {
  color: darkorange;
}


.menu__checkbox__style[id="style-two"]:checked ~ .main__content {
  background-color: darkgreen;
  color: red;
}

.menu__checkbox__style[id="style-two"]:checked ~ .main__content .menu__trigger__style[for="style-two"] {
  color: darkorange;
}

    
    <!--
      This bit works but will one day cause troubles,
      but truth is ya can stick checkbox/radio inputs
      just about anywhere and then call them by id with
      a `for` label, keep scrolling to see what I mean
    -->
    <input type="radio"
           name="colorize"
           class="menu__checkbox__style"
           id="style-default">
    <input type="radio"
           name="colorize"
           class="menu__checkbox__style"
           id="style-one">
    <input type="radio"
           name="colorize"
           class="menu__checkbox__style"
           id="style-two">


<div class="main__content">

  <p class="paragraph__split">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  </p>

  <input type="checkbox"
         class="menu__checkbox__selection"
         id="trigger-style-menu">
  <label for="trigger-style-menu"
         class="menu__trigger__selection"> Theme</label>

  <ul class="menu__hidden">
    <li class="menu__option">
      <label for="style-default"
             class="menu__trigger__style">Default Style</label>
    </li>

    <li class="menu__option">
      <label for="style-one"
             class="menu__trigger__style">First Alternative Style</label>
    </li>

    <li class="menu__option">
      <label for="style-two"
             class="menu__trigger__style">Second Alternative Style</label>
    </li>
  </ul>

  <p class="paragraph__split">
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>

</div>

...جميل إجمالي ولكن باستخدام CSS وHTML فقط، من الممكن لمس وإعادة لمس أي شيء باستثناء body و :root من أي مكان تقريبًا عن طريق ربط id و for خصائص radio/checkbox inputس و label محفزات;من المحتمل أن يُظهر شخص ما كيفية إعادة لمسها في مرحلة ما.

تحذير إضافي واحد هو أن فقط واحد input من محددة id ربما تستخدم أولا checkbox/radio يفوز حالة تبديل بمعنى آخر ... لكن يمكن أن تشير جميع التسميات المتعددة إلى نفس الشيء input, ، على الرغم من أن ذلك من شأنه أن يجعل كلاً من HTML وCSS يبدوان أكثر فظاظة.

---

...آمل أن يكون هناك نوع من الحل البديل الموجود في المستوى 2 من CSS ...

لست متأكدا من الآخر : محددات ولكن :checked لمرحلة ما قبل CSS3، إذا كنت أتذكر بشكل صحيح كان شيء من هذا القبيل [checked] ولهذا السبب قد تجده في الكود أعلاه، على سبيل المثال...

.menu__checkbox__selection:checked ~ .menu__hidden,
.menu__checkbox__selection[checked] ~ .menu__hidden {
 /* rules: and-stuff; */
}

...ولكن أشياء مثل ::after و :hover لست متأكدًا على الإطلاق من إصدار CSS الذي ظهر لأول مرة.

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

Answer 28

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

<div className={`parent ${hasKiddos ? 'has-kiddos' : ''}`}>
    {hasKiddos && kiddos.map(kid => (
        <div key={kid.id} className="kid">kid</div>
    ))}
</div>

وبعد ذلك ببساطة:

.parent {
    color: #000;
}

.parent.has-kiddos {
    color: red;
}

Answer 29

@وثيقة

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

لنفترض أنك تريد تغيير background-image لرأس التنقل لكل صفحة.سيبدو HTML بشكل عام كما يلي:

<body>

<main id="about_"></main>

<header><nav></nav></header>

</body>

إضافة ان id صفة إلى head و body العناصر ليست احترافية وغير متوافقة مع Web 3.0.ولكن عن طريق اختيار عنوان URL ليس عليك إضافة أي كود HTML بأي حال من الأحوال:

@document url('https://www.example.com/about/')
{
 body > header
 {
  background-image: url(about.png);
 }
}

لأنك نكون محترف (أنت، أليس كذلك؟) أنت دائماً اختبر الكود الخاص بك محليًا قبل نشره على الخادم المباشر.لذلك لن تعمل عناوين URL الثابتة localhost, 127.0.0.1, :1 وهكذا دواليك - بشكل افتراضي.وهذا يعني أنك إذا كنت ستختبر الكود الخاص بك وتتحقق منه بنجاح، فستحتاج إلى تشغيل البرمجة النصية من جانب الخادم على CSS الخاص بك.وهذا يعني أيضًا أنه إذا سمحت للمستخدمين بتشغيل CSS على موقعك، فيجب عليك التأكد من ذلك هُم لا يمكن لرمز CSS تشغيل البرمجة النصية من جانب الخادم على الرغم من أن كودك يمكنه ذلك.معظم الناس الذين سيجدون هذا قد لا تكون متأكدًا من كيفية التعامل مع جزء من المنشور المفيد، ويعود الأمر كله إلى كيفية تنظيم بيئة عملك.

1. قم دائمًا بتشغيل بيئتك المحلية على RAID 1 أو 5 أو 6 أو 1+0 أو 0+1 (يُعتقد خطأً أن "RAID 10" غير الموجود و0+1 و1+0 هي جداً حيوانات مختلفة).
2. لا تخزن عملك (و الملفات الشخصية) على نفس محرك الأقراص الموجود عليه نظام التشغيل لديك؛أنت سوف سيتم إعادة التنسيق في النهاية سواء كنت في مزاج أم لا.
3. يجب أن يبدو المسار الجذر الخاص بك على هذا النحو (على خادم WAMP (Windows وApache وMariaDB وPHP))): D:\Web\Version 3.2\www.example.com\.
4. في PHP سوف تبدأ مع الخاص بك $_SERVER['DOCUMENT_ROOT'] (يمكنك تحديد نظام التشغيل Linux عبر if (substr($_SERVER['DOCUMENT_ROOT'],0,1) == '/') {} حالة).
5. أنت تحتفظ بنسخ من الإصدارات الأقدم لأنك تحتاج إلى رؤية نسخ صالحة للعمل في حالة نسيان شيء ما أو إفساده، ومن هنا يأتي إصدار الإصدار.

يفترض ما يلي أن خادمك المباشر يستخدم www. (https://www.example.com/ بدلاً من https://example.com/):

<?php
if (!isset($_SERVER['HTTP_HOST']))
{
//Client does not know what domain they are requesting, return HTTP 400.
}
else
{
 //Get the domain name.
 if (substr($_SERVER['HTTP_HOST'],0,4) === 'www.')
 {//Live Server
  $p0 = explode('www.',$_SERVER['HTTP_HOST'],2);
  $domain = $p0[1];
 }
 else
 {//localhost
  $p0 = explode('www.',$_SERVER['REQUEST_URI']);

  if (isset($p0[2]))
  {
   $p1 = explode('/',$p0[2],2);
   $domain = $p1[0];
  }
  else
  {
   $p1 = explode('/',$p0[1],2);
   $domain = $p1[0];
  }
 }


 //Now reconstruct your *relative* URL.
 if (isset($_SERVER['HTTPS'])) {$https = 'https';}
 else {$https = 'http';}

 $p0 = explode('www.',$_SERVER['HTTP_HOST']);

 if (stristr($_SERVER['HTTP_HOST'],'www.'))
 {
  $a = array('p1'=>$https.'://www.'.$domain, 'p2'=>'/');
 }
 else
 {
  $dir_ver = explode('/www.',$_SERVER['REQUEST_URI']);

  if ($_SERVER['HTTP_HOST']=='localhost' || $_SERVER['HTTP_HOST']==$_SERVER['SERVER_NAME'])
  {
   $p0 = explode($domain,$_SERVER['REQUEST_URI']);
   $a = array('p1'=>$https.'://'.$_SERVER['HTTP_HOST'], 'p2'=>htmlspecialchars($p0[0].$domain).'/');
  }
  else if (substr($_SERVER['HTTP_HOST'],0,7)=='192.168' || substr($_SERVER['HTTP_HOST'],0,4)=='127.')
  {
   $p0 = explode($domain,$_SERVER['REQUEST_URI']);
   $a = array('p1'=>$https.'://'.$_SERVER['HTTP_HOST'], 'p2'=>htmlspecialchars($p0[0].$domain).'/');
  }
 }

 print_r($a);
}
?>

ال $a سيعود اثنين أجزاء من عنوان URL الخاص بك.سيكون عنوان URL الجذري لصفحتك الأولى أو موقع الويب الخاص بك هو / لذلك حول / سيكون about/ بمجرد explode أو split عند مقارنة السلاسل.سيؤدي ذلك إلى قطع حوالي 80% من الطريق (لكل من الاختبار المحلي والمباشر) حتى تتمكن من تشغيل نفس الكود في كلاهما البيئات واستخدامها في CSS لإعادة بناء عناوين URL.

دعم المتصفح

اعتبارًا من عام 2019، يدعم Gecko 61+ فقط هذه الميزة وخلف العلم فقط.لقد دعوت بالفعل إلى أن يصبح قابلاً للاستخدام من قبل مؤلفي الويب.ديفيد بارون هو مؤلف كتاب وحدة القواعد الشرطية لـ CSS المستوى 3.السبب الرئيسي لعدم وجود "محدد أصل" فعلي لـ CSS هو تأثير الأداء؛هذه الطريقة من شأنها أن تلغي تأثير الأداء.لقد دعوت أيضًا إلى دعم عناوين URL النسبية في وجود HTML base عنصر.إذا كنت تقرأ هذا في عام 2019 أو بعده بوقت قصير (مرحبًا بالجميع في عام 47632!) من فضلك أولاً قم بالإشارة إلى عناوين URL التالية:

• https://developer.mozilla.org/en-US/docs/Web/CSS/@document
• https://www.w3.org/TR/css3-conditional/

Answer 30

وتغيير العنصر الأصل على أساس العنصر الطفل يمكن أن يحدث عندما يكون لدينا عنصر المدخلات داخل العنصر الأصل. عندما مدخلا الحصول على التركيز عنصرها الأم المقابل سوف تحصل تعكس باستخدام المغلق.

وبعد المثال سوف تجعلك تفهم باستخدام :focus-within في المغلق

.outer-div {
  width: 400px;
  height: 400px;
  padding: 50px;
  float: left
}

.outer-div:focus-within {
  background: red;
}

.inner-div {
  width: 200px;
  height: 200px;
  float: left;
  background: yellow;
  padding: 50px;
}

<div class="outer-div">
  <div class="inner-div">
    I want to change outer-div(Background color) class based on inner-div. Is it possible?
    <input type="text" placeholder="Name" />
  </div>
</div>