CSS无法重写tabindex属性值，但display可以帮助避免输入以保持完全功能。
下面是一个测试.disable容器中display:contents对输入的影响的片段，你也不能选择和复制/粘贴值：

.container.disabled>input:focus {
  display: contents;
  /* KILLS the focus */
}
div,
p {
  margin: 0.5em;
  padding: 0.5em;
  border: solid;
  background: white;
}
.disabled {
  color: red;
  background: silver;
}
kbd {
  border: 1px solid;
  background: silver;
  border-radius: 3px;
  padding: 2px 6px;
}
h1 {
  font-size: 16px;
  color: red;
  text-align: center;
}
h1::first-line {
  color: black;
  font-size: 1.8em;
  text-transform: uppercase;
}
html {
  display: grid;
  min-height: 100vh;
  place-content: center;
  background: white;
}
body {
  background: #bee;
  padding: 1em;
  border-radius: 1em;
  box-shadow: 0.25em 0.25em 0.5em;
}
* {
  box-sizing: border-box;
}

<h1>test to disable inputs<br> even reached via tabindex</h1>
<!-- display:contents destroys the container at screen and kills input -->
<p>
  <a tabindex="0">Click 'N select some of this text and <kbd>tab</kbd> through inputs.</a>
</p>
<p>Unclickable inputs , no attribute nor pointer-events used .</p>
<div class="container disabled">
  <input id="input-a" type="text" name="input-a" tabindex="0" value="text not to modify">
  <input id="input-b" type="text" name="input-b" tabindex="0" value="text not to modify">
</div>
<div class="container">
  <input id="input-c" type="text" name="input-c" tabindex="0" value="text to modify">
  <input id="input-d" type="text" name="input-d" tabindex="0" value="text to modify">
</div>

免责声明：

不确定这是一个好建议。
禁用您的输入只从CSS不是一个好主意，可能随时打破。
在https://codepen.io/gc-nomade/pen/mdaaPOx上测试/分叉/播放

我不认为这是可以实现的，只使用CSS。我找不到任何用CSS设置标签索引值的方法。
如果使用普通JavaScript，我可以想象的唯一方法是选择元素并将disable属性（https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled）添加到输入中：

function toggleDisable() {
  const container = document.querySelector('#container');
  const inputs = container.querySelectorAll('input');
  if (container.classList.contains('disable')) {
    container.classList.remove('disable');
    inputs.forEach((input) => {
      input.disabled = false;   
    });
  } else {
    container.classList.add('disable');
    inputs.forEach((input) => {
      input.disabled = true;
    });
  }
}

.disable {
  pointer-events: none;
  opacity: 0.5;
}

<h4>Container for comparison:</h4>
<div id="different-container">
  <input id="input-a" type="text" name="input-a" tabindex="1">
  <input id="input-b" type="text" name="input-b" tabindex="2">
</div>
<h4>Container we want to disable inputs in:</h4>
<div id="container">
  <input id="input-a" type="text" name="input-a" tabindex="3">
  <input id="input-b" type="text" name="input-b" tabindex="4">
</div>
<h4>Container for comparison:</h4>
<div id="different-container2">
  <input id="input-a" type="text" name="input-a" tabindex="5">
  <input id="input-b" type="text" name="input-b" tabindex="6">
</div>
<h4>Use button to disable/enable the targeted container's inputs:</h4>
<div>
  <button onclick="toggleDisable()">Toggle Disable</button>
</div>

此外，您可以使用:disable伪类来根据需要设置元素的样式，而不是添加disable类。（https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled）
在这种情况下，代码看起来像这样：

function toggleDisable() {
  const inputs = document.querySelectorAll('#container input');
  inputs.forEach((input) => {
    input.disabled = !input.disabled;
  });
}

#container input:disabled {
  opacity: 0.5;
  background-color: red;
  border: 4px solid blue
}

<h4>Container for comparison:</h4>
    <div id="different-container">
      <input id="input-a" type="text" name="input-a" tabindex="1">
      <input id="input-b" type="text" name="input-b" tabindex="2">
    </div>
    <h4>Container we want to disable inputs in:</h4>
    <div id="container">
      <input id="input-a" type="text" name="input-a" tabindex="3">
      <input id="input-b" type="text" name="input-b" tabindex="4">
    </div>
    <h4>Container for comparison:</h4>
    <div id="different-container2">
      <input id="input-a" type="text" name="input-a" tabindex="5">
      <input id="input-b" type="text" name="input-b" tabindex="6">
    </div>
    <h4>Use button to disable/enable the targeted container's inputs:</h4>
    <div>
      <button onclick="toggleDisable()">Toggle Disable</button>
    </div>

希望能帮上忙。

**注意：**我将容器类改为容器的id，只是为了更具体地说明我们想要禁用的内容。这个解决方案也可以与类名一起使用-使用<div class="container"></div>，然后选择器将.container代替#container。例如，如果您想将相同的逻辑应用于不同的元素，则可以将其用于对输入进行分组。
**注2：**我还将制表符索引从零更改为升序值，因此可以很容易地观察到当您制表时实际发生的情况。

你不能通过CSS直接操作tabindex属性，因为它是一个HTML属性，负责定义页面上元素的Tab键顺序。要实现在将.disable类应用于容器div时使输入字段不可访问的预期行为，JavaScript是必需的。在这些条件下，可以动态地将输入元素的tabindex属性设置为-1。
下面是一个如何使用JavaScript执行此操作的示例：

<div class="container">
  <input id="input-a" type="text" name="input-a" tabindex="0">
  <input id="input-b" type="text" name="input-b" tabindex="0">
</div>
<style>
  .disable {
    pointer-events: none;
    opacity: 0.15;
  }
</style>
<script>
  function disableInputs() {
    const container = document.querySelector('.container');
    const inputs = container.querySelectorAll('input');
    container.classList.add('disable');
    inputs.forEach(function(input) {
      input.tabIndex = -1;
    });
  }
  function enableInputs() {
    const container = document.querySelector('.container');
    const inputs = container.querySelectorAll('input');
    container.classList.remove('disable');
    inputs.forEach(function(input) {
      input.tabIndex = 0;
    });
  }
  // Call the functions to disable and enable inputs as needed
  // For example, you can call disableInputs() when you want to disable them.
</script>

在本例中，disableInputs()函数将.disable类应用于容器div，通过将输入元素的tabindex属性设置为-1，有效地使输入元素无法通过鼠标和键盘交互进行选择。相反，enableInputs()函数删除.disable类并将tabindex值重置为0，恢复选择输入的能力。