JSFiddle - React, Tailwind, and code Playground

by rootjang

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>속성 선택자</title>
<style>
   ul {
		 list-style:none;
   }
	 li {
		 display:inline;
		 float:left;
		 margin:10px;
	 }
		li a {
			padding: 5px 20px;
			font-size: 14px;
			color: blue;
			text-decoration: none;
		}
		.flat {
			background: skyblue;
			color:white;
		}
	[class ~="button"] {
		border: 2px solid black;
		box-shadow: rgba(0,0,0,0.7) 3px 3px;
	}
</style>
</head>

<body>
	<ul>
		<li><a href="#">메뉴 1</a></li>
		<li><a href="#">메뉴 2</a></li>
		<li><a href="#" class="button">메뉴 3</a></li>
		<li><a href="#" class="flat button" >메뉴 4</a></li>
	</ul>
  </body>
 </html>