• 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5
سلکتور :not() در css3
#1
سلام،
من بارها از این ویژگی css3 استفاده کردم واقعاً جذابه. با یه مثال خیلی واضح شروع میکنم. سه آیکون ثابت هر پنجره، exit و minimize و maximize هست. که exit رنگ آبی موقع رویداد mouseover و مابقی قرمز میشن. اون رو اگر یه مبتدی تا نیمه حرفه ای بخواد بنویسه خیلی ساده و مبتدیانه می نویسه ولی با سلکتور :not() یکم کدنویسیت شکل و ظاهر حرفه ای پیدا میکنه. من اینو که برای آخرین پروژم استفاده کردم این طوری استفاده کردم:
کد:
<style>
ul > li:hover:last-child
{
    background-color:#bb3b3b;
}

ul > li:hover:not(:last-child)
{
    background-color:#154aaa;
}
</style>
<body>
<ul>
<li>_
<li>#
<li>x
</ul>
</body>
اینو اضافه کنم که ممکنه دوستان ناوارد بخوان از نحوه نوشتن محتوای body در کد بالا ایراد بگیرن اما اگر مباحث بهینه سازی صفحات وب رو دنبال میکردید مثل من متوجه میشدید که بجای بستن تگ پایانی <li> وقتی میخوام محتوای المنت هام کنار هم قرار بگیره یه کار اشتباه و اضافیه.

http://www.w3schools.com/cssref/sel_not.asp

موفق باشید Heart
غایب
  پاسخ
تشکر شده توسط : masoudmanson hamid_80386 Reza


پرش به انجمن:


کاربران در حال بازدید این موضوع: 1 مهمان