如何使用nth-child技术，以便每次使用悬停特定图标时，它应该更改颜色和弹出窗口而不会打扰其他人。我尝试过，效果适用于每个特定的图标。
.icon ul li {
list-style: none;
display: inline;
margin: 30px;
}
.icon {
background: #000;
}
.icon ul li a {
text-decoration: none;
color: crimson;
padding: 10px;
}
.icon ul li a i {
font-size: 20px;
}
.icon ul li a:nth-child(1):hover {
color: blue;
font-size: 25px;
}<link href="https://fonts.googleapis.com/css?
family=Berkshire+Swash|Boogaloo|Lobster+Two|Raleway|Amaranth"
rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet">
<label><strong>Or follow Us -</strong></label>
<div class="icon">
<ul>
<li><a href="https://facebook.com"><i class="fa fa-facebook"></i></a></li>
<li><a href="https://twitter.com"><i class="fa fa-twitter"></i></a></li>
<li><a href="https://linkedin.com"><i class="fa fa-linkedin"></i></a></li>
<li><a href="https://Youtube.com"><i class="fa fa-youtube"></i></a></li>
<li><a href="https://instagram.com"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
答案 0 :(得分：1)
您想在:nth-child(1)上使用li，而不是a元素。像这样：
.icon ul li:nth-child(1) a:hover
这将选择兄弟li＆＃39}中的第一个li元素。您要做的是选择兄弟a的集合中的第一个a元素，但每个a只有一个兄弟li }。
完整演示：
.icon ul li {
list-style: none;
display: inline;
margin: 30px;
}
.icon {
background: #000;
}
.icon ul li a {
text-decoration: none;
color: crimson;
padding: 10px;
}
.icon ul li a i {
font-size: 20px;
}
.icon ul li:nth-child(1) a:hover {
color: blue;
font-size: 25px;
}<link href="https://fonts.googleapis.com/css?
family=Berkshire+Swash|Boogaloo|Lobster+Two|Raleway|Amaranth"
rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet">
<label><strong>Or follow Us -</strong></label>
<div class="icon">
<ul>
<li><a href="https://facebook.com"><i class="fa fa-facebook"></i></a></li>
<li><a href="https://twitter.com"><i class="fa fa-twitter"></i></a></li>
<li><a href="https://linkedin.com"><i class="fa fa-linkedin"></i></a></li>
<li><a href="https://Youtube.com"><i class="fa fa-youtube"></i></a></li>
<li><a href="https://instagram.com"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
答案 1 :(得分：0)
将字体大小分配给一个元素 a 或 i 。并使用li:nth-child(1)
要在悬停时使字体变大，而不是增加字体大小， 尝试Css scale（）。
-ms-transform: scale(1.2); /* IE 9 */
-webkit-transform: scale(1.2); /* Safari */
transform: scale(1.2)
答案 2 :(得分：0)
第n个孩子的声明应基于li。在您的代码中，您将其用于锚标记。这是正确的代码。
.icon ul li {
list-style: none;
display: inline;
margin: 30px;
}
.icon {
background: #000;
}
.icon ul li a {
text-decoration: none;
color: crimson;
padding: 10px;
}
.icon ul li a i {
font-size: 20px;
}
.icon ul li:nth-child(1) a:hover {
color: blue;
font-size: 25px;
}
.icon ul li:nth-child(2) a:hover {
color: green;
font-size: 25px;
}<link href="https://fonts.googleapis.com/css?
family=Berkshire+Swash|Boogaloo|Lobster+Two|Raleway|Amaranth"
rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet">
<label><strong>Or follow Us -</strong></label>
<div class="icon">
<ul>
<li><a href="https://facebook.com"><i class="fa fa-facebook"></i></a></li>
<li><a href="https://twitter.com"><i class="fa fa-twitter"></i></a></li>
<li><a href="https://linkedin.com"><i class="fa fa-linkedin"></i></a></li>
<li><a href="https://Youtube.com"><i class="fa fa-youtube"></i></a></li>
<li><a href="https://instagram.com"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
答案 3 :(得分：0)
.icon ul li {
list-style: none;
display: inline;
margin: 30px;
}
.icon {
background: #000;
}
.icon ul li a {
text-decoration: none;
color: crimson;
padding: 10px;
}
.icon ul li a {
font-size: 25px;
}
.icon ul li:nth-child(1) a:hover {
color: blue;
}
.icon ul li:nth-child(2) a:hover {
color: yellow;
}<link href="https://fonts.googleapis.com/css?
family=Berkshire+Swash|Boogaloo|Lobster+Two|Raleway|Amaranth"
rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet">
</head>
<body>
<label><strong>Or follow Us -</strong></label>
<div class="icon">
<ul>
<li><a href="https://facebook.com"><i class="fa fa-facebook"></i></a></li>
<li><a href="https://twitter.com"><i class="fa fa-twitter"></i></a></li>
<li><a href="https://linkedin.com"><i class="fa fa-linkedin"></i></a></li>
<li><a href="https://Youtube.com"><i class="fa fa-youtube"></i></a></li>
<li><a href="https://instagram.com"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
答案 4 :(得分：-1)
.icon ul li {
list-style: none;
display: inline;
margin: 30px;
}
.icon {
background: #000;
}
.icon ul li a {
text-decoration: none;
padding: 10px;
display:inline-block;
}
.icon ul li a i {
font-size: 20px;
color: crimson;
-webkit-transition:transform .3s;
}
.icon ul li a i:hover {
color: blue;
-webkit-transform:scale(1.2);
-webkit-transition:transform .3s;
}<link href="https://fonts.googleapis.com/css?
family=Berkshire+Swash|Boogaloo|Lobster+Two|Raleway|Amaranth"
rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet">
<label><strong>Or follow Us -</strong></label>
<div class="icon">
<ul>
<li><a href="https://facebook.com"><i class="fa fa-facebook"></i></a></li>
<li><a href="https://twitter.com"><i class="fa fa-twitter"></i></a></li>
<li><a href="https://linkedin.com"><i class="fa fa-linkedin"></i></a></li>
<li><a href="https://Youtube.com"><i class="fa fa-youtube"></i></a></li>
<li><a href="https://instagram.com"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
不需要nth-child