Thắc mắc dấu ">" và " " (khoảng trắng) trong selector

sufuijk · October 7, 2020, 5:52pm

Như tiêu đề em đang ngáo đá ở khoảng này nhất là khi làm 1 thanh menu CSS đa cấp
mọi người chỉ em với
vd:

#menu ul li ul li
#menu ul>li>ul>li

mrphu3074 · July 15, 2015, 10:06am

Dấu > nghĩa là style áp dụng cho 1 cấp con đầu tiên, trong khi dấu khoảng trắng thì không phân biệt.
ex:
cho 1 đoạn html

<ul class="menu">
	<li class="menu-item">
		<ul class="submenu">
			<li class="submenu-item"></li>
			<li></li>
		</ul>
	</li>
</ul>

.menu > li {
// áp dụng cho children cấp 1
}
.menu li {
// áp dụng lên tất cả li mà .menu chứa
}

vutruong0794 · October 7, 2020, 12:33pm

dùng dấu “>” để truy cấp đến thành phần HTML con bên trong trong selector CSS

    <html>
    <head>
    <style>
        // chọn tất cả thẻ div để định dạng CSS
       div {
         background-color: #ccf5ff;
         padding-left: 300px;
        }
        // chọn khối block1 và thành phần thẻ p bên trong nó
     .block1 > p{
          color: #ff4d4d;
      }
        // chọn khối block2 và thành phần p bên trong nó
     .block2 > p{
          color: #ffff33;
      }
// chọn khối block3 và thành phần p bên trong nó có phân biệt class="text!
     .block3 > .text {
     color: #3399ff;
   
}
</style>
</head>
<body>
<div class="block">
<div class="block1">
        <p>Hello World</p>
</div>
<div class="block2">
        <p>Hello World</p>
</div>
<div class="block3">
         <p >Hello World</p>
</div>
</div>
</body>
</html>

link page học : https://hocwebchuan.com/reference/cssSection/se_selector.php

noname00 · October 7, 2020, 4:33pm

Mấy hôm nay bạn đào mộ hơi nhiều à nha.