Question

假设我有以下XML代码：

<?xml version="1.0" standalone="no"?>
<?xml-stylesheet type="text/css" href="email.css"?>
<!DOCTYPE emaillist [
<!ELEMENT emaillist (email)>
<!ELEMENT email (to,from,sub)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT sub (#PCDATA)>
]>

<emaillist>
    <email>
        <to>john@gmail.com</to>
        <from>smith@gmail.com</to>
        <sub>Application leave</sub>
    </email>
    <email>
        <to>alex@gmail.com</to>
        <from>rutherford@gmail.com</to>
        <sub>Resignation</sub>
    </email>
    <email>
        <to>michael@gmail.com</to>
        <from>jackson@gmail.com</to>
        <sub>Enrollment</sub>
    </email>
</emaillist>

这是email.css文件：

emaillist    {}
email    {display:block;}
from    {font-style:bold;}
to    {font-family:Verdana;}
sub    {}

现在，我可以为同一个元素提供两个不同的属性吗？例如，对于第一个元素，我想要字体系列Verdana，而在第二个元素，我想要Arial。我如何使用css文件？请写下xml和css文件所需的代码更改。

我认为你可能会认为CSS Two different styles for the same field是重复的，但这个问题没有得到足够的回答。所以我再次发布了这个问题。

Answer 1

内联样式

最明显的方法是为元素添加内联样式。这是其中之一：

<email style="font-family: 'Arial';"> ... </email>

ID和类

更简洁的方法是为每个要单独定位的元素添加唯一的ID，或者如果要重复样式，则添加classes。

我认为我不需要在这里提供一个例子。

CSS选择器

但是需要对XML进行最少更改的方法可能会使用CSS选择器，特别是:nth-child。

所以你的CSS看起来像：

email:nth-child(2) {
    font-family: 'Verdana';
}

Answer 2

好吧，您可以为元素指定不同的classes或唯一ids，使用:nth-child选择器（仅限CSS3）或使用内联样式。

将不同的样式应用于CSS中的相同元素

2 个答案:

内联样式

ID和类

CSS选择器