css - সিএসএস: না((শেষ-সন্তানের): নির্বাচক পরে

css-selectors pseudo-element (5)

আপনার নমুনাটি আমার জন্য IE তে কাজ করে না, আপনার CSS এ বিষয়বস্তু CSS ব্যবহার করার জন্য আপনার পৃষ্ঠাটিকে স্ট্যান্ডার্ড পদ্ধতিতে আপনার পৃষ্ঠাটি রেন্ডার করার জন্য আপনার দস্তাবেজে ডক্টাইপ হেডারটি নির্দিষ্ট করতে হবে:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<html>

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

</html>

দ্বিতীয় উপায় সিএসএস 3 নির্বাচক ব্যবহার করা হয়

li:not(:last-of-type):after
{
    content:           " |";
}

কিন্তু আপনি এখনও Doctype নির্দিষ্ট করতে হবে

এবং তৃতীয় উপায়টি নিম্নরূপ কিছু স্ক্রিপ্ট সহ JQuery ব্যবহার করা হল:

<script type="text/javascript" src="jquery-1.4.1.js"></script>
<link href="style2.css" rel="stylesheet" type="text/css">
</head>
<html>

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

<script type="text/javascript">
  $(document).ready(function () {
      $("li:not(:last)").append(" | ");
    });
</script>

তৃতীয় উপায়ে উপকারিতা আপনাকে ডক্ট টাইপ নির্দিষ্ট করতে হবে না এবং jQuery সামঞ্জস্যের যত্ন নেবে।

আমি উপাদানগুলির একটি তালিকা আছে, যা এইরকম স্টাইলযুক্ত:

ul {
    list-style-type: none;
    text-align: center;
}

li {
    display: inline;
}

li:not(:last-child):after {
    content:' |';
}

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

যে কেউ কিভাবে সিএসএস সব শেষ নির্বাচন কিন্তু জানেন?

আপনি এখানে :not() নির্বাচক সংজ্ঞা দেখতে পারেন

আপনি এই চেষ্টা করতে পারেন, আমি জানি আপনি উত্তর খুঁজছেন না উত্তর কিন্তু ধারণা একই।

যেখানে আপনি সব শিশুদের জন্য শৈলী সেটিং এবং তারপর শেষ সন্তানের থেকে এটি অপসারণ করা হয়।

টুকিটাকি সংকেতলিপি

li
  margin-right: 10px

  &:last-child
    margin-right: 0

ভাবমূর্তি

প্রতিটি জিনিস সঠিক মনে হয়। আপনি যা ব্যবহার করেছেন তার পরিবর্তে আপনি নিম্নলিখিত CSS সিলেক্টর ব্যবহার করতে চান।

ul > li:not(:last-child):after

যদি এটি নির্বাচক নয় এমন সমস্যা হয়, তবে আপনি সেগুলির সবগুলি সেট এবং শেষটি ওভাররাইড করতে পারেন

li:after
{
  content: ' |';
}
li:last-child:after
{
  content: '';
}

অথবা আপনি আগে ব্যবহার করতে পারেন, শেষ সন্তানের জন্য কোন প্রয়োজন নেই

li+li:before
{
  content: '| ';
}

সিএসএস ব্যবহার করে একটি উদাহরণ

  ul li:not(:last-child){
        border-right: 1px solid rgba(153, 151, 151, 0.75);
    }