#languages {margin: -70px 0 0 820px; text-decoration:none;}
#languages a:link{color:black; text-decoration:underline;}

<div id="languages"><a href="../index.php">ID</a> | <a href="index.php">EN</a></div>

which one is #languages a:link ? Why both of them are underline? I wonder since I only choose one of them.

Because both links are within the languages div.

<html>
<head>
  <title></title>
</head>
<body>

<div id="languages"><a href="../index.php" style="text-decoration:none">ID</a> | <a href="index.php">EN</a></div>

</body>
</html>

works.

With the selector you choose, it includes both because you are indicating that anchor:link found within the element with an ID = "languages" should be selected. If you only want to choose one of the links, then, you should add a unique ID to the target anchor element and select it as follows:

<!DOCTYPE html>
<html>
<head>
<style>
  #languages a:link {text-decoration:none;}
  #languages #link1:link {color:black; text-decoration:underline;}
</style>
</head>
<body>

<div id="languages">
 <a id="link1" href="../index.php">ID</a> | <a href="index.php">EN</a>
</div>

</body>
</html>

either or, yours is more useful though, jorgeM

The thing is: the selected link must have no underline whereas the deselected link must have underline. and if in different time anyone change the language mode, the selected link will be change.