如何从许多标签中选择第一个标签？ [英] How to select the first tag out of many tags?
问题描述
例如
< div class =" main">
< p> ssssss< / p>
< p> ssssss< / p>
< p> ssssss< / p>
< p> ssssss< / p>
< / div>
如何选择第一个'p`标签？
e.g.
<div class="main">
<p>ssssss</p>
<p>ssssss</p>
<p>ssssss</p>
<p>ssssss</p>
</div>
how to select the first `p` tag only?
推荐答案
2006-12-30，howa< ho ****** @ gmail.comwrote：
On 2006-12-30, howa <ho******@gmail.comwrote:
eg
< div class =" main">
< p> ssssss< / p>
< p> ; ssssss< / p>
< p> ssssss< / p>
< p> ssssss< / p>
< / div>
如何选择第一个`p`标签？
e.g.
<div class="main">
<p>ssssss</p>
<p>ssssss</p>
<p>ssssss</p>
<p>ssssss</p>
</div>
how to select the first `p` tag only?
我认为除了例如给它上课并使用
a类选择器。
I don''t think there is a way other than e.g. giving it a class and using
a class selector.
你好Howa和Ben，
右，这样做的简单方法是使用以下样式选择器：
div.main p：first-child {...}
这告诉浏览器找到所有直接孩子的P标签
div.main然后选择第一个孩子。
问题然而，这是IE6不会显示它，因为它不会理解子选择器或第一个子伪类
所以你有点在那里scupperred，但IE7理解两者没有
任何问题所以上面的定义将正常工作。
如果你想要IE6支持你可以用厚颜无耻的方式做到这一点你的onload活动中有点javascript
，基本上是为主要div的第一个孩子增加了一个类
。
因此：
函数AddChildSelector（）{
var divlist = document.getElementsByTagName（" div"）; //如果您使用了
ID，则可以使用GetElementsById（）而不是更快的
for（i = 0; i< divlist.length; i ++）{
if（divlist [i] .className ==" main"）{
var plist = divlist [i] .getElementsByTagName（" p"） ;
if（plist.length 1）{
plist [0] .className =" first_child";
}
}
}
}
如果您添加以下内容，将为您完成工作选择和规则
CSS
div.main p.first_child {...}
熊记住我刚刚把它搞砸了 - 真的你想要
a浏览器检查进去那里只能在IE6或其他
浏览器中进行他们没有第一个孩子选择器。这个方法也依赖于javascript而且是完全脆弱的，因为它只会为你给出的HTML工作
- 但它很容易被抽象出来
适用于更一般的情况。
现在IE7与用户百分比大致相同，我认为我们将
将在明年做更多这样的事情。
我要么不为IE6用户的风格而烦恼如果它纯粹是
化妆品会给你一个很好的降级，或者有一个像这样的函数库，这些函数会在服务器找到IE6时被丢弃
用户代理。
干杯
AndrewF
---
www.xmlinfinity.com - 内容管理的可能性是无限的。
无穷无尽。 />
Ben C写道：
Hi Howa and Ben,
Right, the easy way to do this is to use the following style selector:
div.main p:first-child { ... }
This tells the browser to find all P tags that are immediate children
of div.main and then of these select the first child.
The problem with this however is that IE6 won''t display it as it
doesn''t understand the child selector or the first-child pseudo class
so you are a bit scupperred there, however IE7 understands both without
any problem so the definition above will work fine.
If you want IE6 support you can do it with a cheeky bit of javascript
in your onload event, basically adding a class to the first p child of
the main div.
Thus:
function AddChildSelector() {
var divlist = document.getElementsByTagName("div"); // if you used an
ID you can use GetElementsById() instead which would be quicker
for (i=0; i<divlist.length; i++) {
if (divlist[i].className == "main") {
var plist = divlist[i].getElementsByTagName("p");
if (plist.length 1) {
plist[0].className = "first_child";
}
}
}
}
Will do the job for you if you add the following selection and rule to
the CSS
div.main p.first_child { ... }
Bear in mind I''ve just knocked this up quickly - really you would want
a browser check to go in there in order to only do it on IE6 or other
browsers where they have no first child selector. This method is also
dependent on javascript and is completely brittle in that it will only
work for the HTML you''ve given - but it is easily abstracted to make it
work in more generic cases.
Now IE7 is is about the same as FF in terms of % of users I think we''ll
be doing more of this for the next year as IE6 phases out.
I''d either not bother with the style for IE6 users if it is purely
cosmetic which will give you a good degrade or have a library of
functions like this that are dropped in when the server finds an IE6
user agent.
Cheers
AndrewF
---
www.xmlinfinity.com - Content management where the possibilities are
endless.
Ben C wrote:
2006-12-30，ho wa< ho ****** @ gmail.comwrote：
On 2006-12-30, howa <ho******@gmail.comwrote:
eg
< div class =" main"> ;
< p> ssssss< / p>
< p> ssssss< / p>
< p> ; ssssss< / p>
< p> ssssss< / p>
< / div>
如何选择第一个'p`标签？
e.g.
<div class="main">
<p>ssssss</p>
<p>ssssss</p>
<p>ssssss</p>
<p>ssssss</p>
</div>
how to select the first `p` tag only?
我认为除了例如给它一个类并使用
一个类选择器。
I don''t think there is a way other than e.g. giving it a class and using
a class selector.
AndrewF写道：
AndrewF wrote:
嗨Howa和Ben，
对，简单的方法是使用以下样式选择器：
div.main p：first-child {...}
这告诉浏览器找到所有直接孩子的P标签
of div.main然后选择第一个孩子。
Hi Howa and Ben,
Right, the easy way to do this is to use the following style selector:
div.main p:first-child { ... }
This tells the browser to find all P tags that are immediate children
of div.main and then of these select the first child.
如果其中一个*是* DIV的第一个孩子。为了澄清，如果DIV有孩子是Ps但是DIV的第一个孩子不是P，那么就没有
匹配。要使用W3C的例子，
< PThe在注释之前的最后一个P.
< DIV class =" note">
< H2>注意< / H2>
< PThe注释中的第一个P.
< / DIV>
这里，div p：第一个孩子与P.不匹配。
If one of them *is* the first child of the DIV. To clarify, if a DIV has
children that are Ps but the DIVs first child isn''t a P, then there''s no
match. To use the W3C''s example,
<PThe last P before the note.
<DIV class="note">
<H2>Note</H2>
<PThe first P inside the note.
</DIV>
Here, div p:first-child doesn''t match either P.
这篇关于如何从许多标签中选择第一个标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
