Maison > interface Web > tutoriel HTML > <H>中有2个链接元素,只对第一个元素附加CSS,第二个不附加,怎么写_html/css_WEB-ITnose

<H>中有2个链接元素,只对第一个元素附加CSS,第二个不附加,怎么写_html/css_WEB-ITnose

WBOY
Libérer: 2016-06-24 11:54:31
original
1035 Les gens l'ont consulté





abc  123






如上,在H3中有2个链接,想只对第一个链接A添加一个背景颜色,第二个链接无样式,应该怎么修改。


回复讨论(解决方案)

<style type="text/css">.test h3 a:first-child {background-color: #FF0000;}</style><div class="test"><H3><a href="#">abc</a>  <a href="#">123</a></H3></div>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion


<style type="text/css">.test h3 a.first {background-color: #FF0000;}</style><div class="test"><H3><a href="#" class="first">abc</a>  <a href="#">123</a></H3></div>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion

<style type="text/css">.test h3 a:first-child {background-color: #FF0000;}</style><div class="test"><H3><a href="#">abc</a>  <a href="#">123</a></H3></div>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion


<style type="text/css">.test h3 a.first {background-color: #FF0000;}</style><div class="test"><H3><a href="#" class="first">abc</a>  <a href="#">123</a></H3></div>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion



非常个感谢,顺便学习下,如果是选择第2个呢。

<style type="text/css">.test h3 a:first-child {background-color: #FF0000;}</style><div class="test"><H3><a href="#">abc</a>  <a href="#">123</a></H3></div>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion




<style type="text/css">.test h3 a.first {background-color: #FF0000;}</style><div class="test"><H3><a href="#" class="first">abc</a>  <a href="#">123</a></H3></div>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion



还有:first-child和.first 分别是在什么时候用生效。谢谢

CSS 选择器参考
选择第二个

<style type="text/css">.test h3 a:nth-child(2) {background-color: #FF0000;}</style>  <div class="test"><H3><a href="#">abc</a>  <a href="#">123</a></H3></div>
Copier après la connexion

一般给第二个加个class在定样式

<style type="text/css">.test h3 a:first-child {background-color: #FF0000;}</style><div class="test"><H3><a href="#">abc</a>  <a href="#">123</a></H3></div>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion


<style type="text/css">.test h3 a.first {background-color: #FF0000;}</style><div class="test"><H3><a href="#" class="first">abc</a>  <a href="#">123</a></H3></div>
Copier après la connexion
Copier après la connexion
Copier après la connexion
Copier après la connexion



如果有2个div嵌套,好像就没作用了,如:








不好意思,问题太多。(因为这个是自动循环出来的列表,有2个DIV嵌套,外面的DIV会不同)

<style type="text/css">.test1 .test2 h3 a:first-child {background-color: #FF0000;}.test1_2 .test2 h3 a:first-child {background-color: #EFEFEF;}</style><div class="test1"><div class="test2"><H3><a href="#" name="1">abc</a>  <a href="#" name="2">123</a></H3></div></div><div class="test1_2"><div class="test2"><H3><a href="#" name="1">abc</a>  <a href="#" name="2">123</a></H3></div></div>
Copier après la connexion
Copier après la connexion

<style type="text/css">.test1 .test2 h3 a:first-child {background-color: #FF0000;}.test1_2 .test2 h3 a:first-child {background-color: #EFEFEF;}</style><div class="test1"><div class="test2"><H3><a href="#" name="1">abc</a>  <a href="#" name="2">123</a></H3></div></div><div class="test1_2"><div class="test2"><H3><a href="#" name="1">abc</a>  <a href="#" name="2">123</a></H3></div></div>
Copier après la connexion
Copier après la connexion



解决问题,结贴,感谢。
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal