对标题属性的多个单词应用 CSS

Question

<html>
<head>
<style>
[title~='77'] {
    border: 5px solid yellow;
}
</style>
</head>
<body>
  <a title="One Piece vol 77 GN"> one piece vol 77</a>
  <a title="One Piece vol 78 GN"> one piece vol 78</a>
  <a title="Naruto vol 77 GN"> naruto vol 77</a>
</body>
</html>

我只想在第 77 卷的一件作品周围加边框。我无法更改 HTML 代码，只能更改 CSS。我找不到一种方法来说明标题必须包含一个 & 77

Answer 1

只需添加另一个 [title~=''] 即可。

<html>
<head>
<style>
[title~='77'] {
    border: 5px solid yellow;
}
[title~='One'][title~='77'] {
    border-radius: 50px;
}
</style>
</head>
<body>



<a title="One Piece vol 77 GN"> one piece vol 77</a>
<a title="One Piece vol 78 GN"> one piece vol 78</a>
<a title="Naruto vol 77 GN"> naruto vol 77</a>


</body>
</html>

Answer 2

为要显示边框的标题添加样式border-radius。

<html>
<head>
<style>
[title~='77'] {
    border: 5px solid yellow;
}
[title~='One'][title~='77'] {
    border-radius: 50px;
}  
</style>
</head>
<body>



<a title="One Piece vol 77 GN"> one piece vol 77</a>
<a title="One Piece vol 78 GN"> one piece vol 78</a>
<a title="Naruto vol 77 GN"> naruto vol 77</a>


</body>
</html>

Answer 3

您应该为边框添加唯一的单词 style.There 您的标题中有两个“77”。所以你可以添加 'One' 或 'Piece' 与 '77'。这是代码：

    <html>
<head>
<style>
[title~='Piece'][title~='77'] {
    border: 5px solid yellow;
}
<!-- OR -->
<!-- [title~='One'][title~='77'] -->
</style>
</head>
<body>



<a title="One Piece vol 77 GN"> one piece vol 77</a>
<a title="One Piece vol 78 GN"> one piece vol 78</a>
<a title="Naruto vol 77 GN"> naruto vol 77</a>


</body>
</html>

对标题属性的多个单词应用 CSS

Apply CSS on multiple words of a title attribute

css

attributes

title