É possível tornar uma tag de âncora HTML não clicável / vinculável usando CSS?

Por exemplo, se eu tiver isso:

<a style="" href="page.html">page link</a>

Existe algo que eu possa usar para o atributo style que faça com que o link não seja clicável e não me leve ao page.html?

Ou, é minha única opção para simplesmente não agrupar 'link da página' em uma tag de âncora?

Edit: Quero declarar por que quero fazer isso para que as pessoas possam fornecer melhores conselhos. Estou tentando configurar meu aplicativo para que o desenvolvedor possa escolher o tipo de estilo de navegação que deseja.

Então, eu tenho uma lista de links e um está sempre selecionado no momento e os outros não. Para os links que não estão selecionados, eu obviamente quero que sejam tags âncora clicáveis ​​normais. Mas para o link selecionado, algumas pessoas preferem que o link permaneça clicável, enquanto outras gostam de torná-lo não clicável.

Agora eu poderia facilmente não programaticamente colocar uma âncora em torno do link selecionado. Mas acho que será mais elegante se eu puder sempre quebrar o link selecionado em algo como:

<a id="current" href="link.html">link</a>

e, em seguida, deixe o desenvolvedor controlar o estilo de vinculação por meio de CSS.

Você pode usar este css:

.inactiveLink {
   pointer-events: none;
   cursor: default;
}

E, em seguida, atribua a classe ao seu código html:

<a style="" href="page.html" class="inactiveLink">page link</a>

Isso torna o link não clicável e o cursor forma uma seta, não uma mão como os links.

ou use este estilo no html:

<a style="pointer-events: none; cursor: default;" href="page.html">page link</a>

mas sugiro a primeira abordagem.

Isso não é muito fácil de fazer com CSS, como não é uma linguagem comportamental (por exemplo, JavaScript), a única maneira fácil seria usar um JavaScript OnClick Event na sua âncora e retorná-lo como falso, esse é provavelmente o código mais curto você poderia usar para isso:

<a href="page.html" onclick="return false">page link</a>

Sim .. É possível usando css

<a class="disable-me" href="page.html">page link</a>

.disable-me {
    pointer-events: none;
}

Ou apenas HTML e CSS sem eventos:

<div style="z-index: 1; position: absolute;">
    <a style="visibility: hidden;">Page link</a>
</div>
<a href="page.html">Page link</a>

O CSS foi projetado para afetar a apresentação, não o comportamento.

Você poderia usar algum JavaScript.

document.links[0].onclick = function(event) {
   event.preventDefault();
};

Uma maneira mais discreta (supondo que você use jQuery):

HTML:

<a id="my-link" href="page.html">page link</a>

Javascript:

$('#my-link').click(function(e)
{
    e.preventDefault();
});

A vantagem disso é a separação clara entre lógica e apresentação. Se um dia você decidir que esse link faria outra coisa, não precisará mexer na marcação, apenas no JS.

A resposta é:

<a href="page.html" onclick="return false">page link</a>

Isso pode ser feito em css e é muito simples. mude o "a" para um "p". O seu "link da página" não leva a nenhum lugar, se você quiser torná-lo impossível de clicar.

Quando você instruir seu css a executar uma ação de foco sobre esse "p" específico, diga o seguinte:

(neste exemplo, forneci o "p" o "exemplo" ID)

#example
{
  cursor:default;
}

Agora, seu cursor permanecerá o mesmo em toda a página.

<a href="page.html" onclick="return false" style="cursor:default;">page link</a>