Javascript 尝试使用jQuery添加类

尝试使用jQuery addClass方法将类添加到一个部分，该部分会增加该部分的字体大小，但不起作用

这是密码

html:

jQuery：

   <script>
    $(function(){


        $("li.medium").click(function(){
               $("#data").addClass("medium");
         });

     });

</script>

$（函数（）{
$（“li.medium”）。单击（函数（）{
$（“#数据”）.addClass（“中等”）；
});
});

将#data p的字体大小设置为inherit，然后它就可以工作了

#data p {
  font-size: inherit;
}

原因是您的#带有介质的数据具有

22px

，而内部的

p

具有

16px

，因此

p

将始终较小，但如果您的集

继承
p
，则它会起作用，因为它采用父
font size


$（函数（）{
$（“li.medium”）。单击（函数（）{
$（“#数据”）.addClass（“中等”）；
});
});
#数据p{
字体大小：继承；
}
a{
文字装饰：无；
}
ulli{
显示：内联块；
}
.主动{
边框底部：1px纯红；
}
.小{
字体大小：12px；
}
.中等{
字体大小：22px；
}
.大{
字号：26px；
}






Lorem ipsum dolor sit amet，奉献精英。不，我要控告你，我要控告你！卡姆克·多洛里伯斯·塞特·伊莱根蒂！除了口头禅之外，还有一种独特的责任感，即腐败

将#data p的字体大小设置为inherit，然后它就可以工作了

#data p {
  font-size: inherit;
}

原因是您的#带有介质的数据具有
22px
，而内部的
p
具有
16px
，因此
p
将始终较小，但如果您的集
继承
p
，则它会起作用，因为它采用父
font size


$（函数（）{
$（“li.medium”）。单击（函数（）{
$（“#数据”）.addClass（“中等”）；
});
});
#数据p{
字体大小：继承；
}
a{
文字装饰：无；
}
ulli{
显示：内联块；
}
.主动{
边框底部：1px纯红；
}
.小{
字体大小：12px；
}
.中等{
字体大小：22px；
}
.大{
字号：26px；
}






Lorem ipsum dolor sit amet，奉献精英。不，我要控告你，我要控告你！卡姆克·多洛里伯斯·塞特·伊莱根蒂！除了口头禅之外，还有一种独特的责任感，即腐败

这里有一个简单的CSS专用性问题

#data
是一个比
.medium
更“强大”的选择器

解决这个问题的一个简单方法是增加第二个选择器的特异性，包括id：

#data.medium { font-size:22px; }

但是您应该首先尝试并避免使用ID来选择用于样式设计目的的元素，因为在许多情况下，它很容易导致此类问题。
这里有一个简单的CSS专用性问题

#data
是一个比
.medium
更“强大”的选择器

解决这个问题的一个简单方法是增加第二个选择器的特异性，包括id：

#data.medium { font-size:22px; }

但是您应该首先尝试并避免使用ID来选择用于样式设计目的的元素，因为在许多情况下这很容易导致此类问题。
您的css将
#data p
指令视为比您的
medium
类更重要。注释掉前者，您的代码工作时几乎没有变化（特别是-
preventDefault
停止
a
单击导航）


$（“li.medium”）。单击（函数（e）{
e、 预防默认值（）；
$（“#数据”）.addClass（“中等”）；
返回false；
});
/*#数据p{字体大小：16px；}*/
a{文本装饰：无；}
ul li{显示：内联块；}
.active{边框底部：1px实心红色；}
.small{字体大小：12px；}
.medium{字体大小：22px！重要；}
.large{font size:26px；}






Lorem ipsum dolor sit amet，奉献精英。不结盟运动
被指控的性骚扰！
卡姆克·多洛里伯斯·塞特·伊莱根蒂！除了口头禅，还有区别
有可能，有可能是腐败

您的css将
#data p
指令视为比您的
medium
类更重要。注释掉前者，您的代码工作时几乎没有变化（特别是-
preventDefault
停止
a
单击导航）


$（“li.medium”）。单击（函数（e）{
e、 预防默认值（）；
$（“#数据”）.addClass（“中等”）；
返回false；
});
/*#数据p{字体大小：16px；}*/
a{文本装饰：无；}
ul li{显示：内联块；}
.active{边框底部：1px实心红色；}
.small{字体大小：12px；}
.medium{字体大小：22px！重要；}
.large{font size:26px；}






Lorem ipsum dolor sit amet，奉献精英。不结盟运动
被指控的性骚扰！
卡姆克·多洛里伯斯·塞特·伊莱根蒂！除了口头禅，还有区别
有可能，有可能是腐败

您需要更改两件事：


您需要使用
e.preventDefault（）阻止
a
的默认行为

然后使用
#data.medium



$（“li.medium”）。单击（函数（e）{
e、 预防默认值（）；
$（“#数据”）.addClass（“中等”）；
});
#数据{
字体大小：16px；
}
a{
文字装饰：无；
}
ulli{
显示：内联块；
}
.主动{
边框底部：1px纯红；
}
#data.small、.small{
字体si