このような要素を持つxmlファイルがあります
<video><title>XXXX</title><url>VIDEO ID OF YOUTUBE></url></video>
CSS を使用して要素を次のように表示する方法はありますか
<a href="http://www.youtube.com/videoid">XXXX</a>
CSS はスタイリング用です。XML を読み取って HTML コンテンツを作成する場合は、Javascript を使用する必要があります。または、クライアントブラウザに送信する前に実行したい場合は、サーバー側の言語。
Nicklas が指摘するように、多くの人は Css はスタイリングのためのものであり、それ以上のものではないと考えています。ただし、より一般的には、情報を提示することを目的としています。これは行き過ぎているのか、それとも CSS の範囲内にあるのかを判断するのが難しい特殊なケースです。これは単にプレゼンテーションを変更しているだけなのか、それとももっと何かをしているのでしょうか?
ニクラスのように、あなたがやりたいことは CSS の意図された目的を超えていると主張する人は多いと思います。そして、ほとんどの場合、これは物事を進める上で理想的とは言えない方法であることがわかるという点で、おそらくニクラスに同意するでしょう.
とは言え、可能です
#url:before {
display: inline-block;
content: "<a href=\"http://www.youtube.com/";
}
#url:after {
display: inline-block;
content: "\">";
}
#text:after {
display: inline-block;
content: "</a>";
}
注: この例では、JsFiddle を作成するために Html を使用しましたが、同じ戦略が Xml ファイルでも機能するはずです。
これにCSSを使用する方法がわかりません。ただし、XSLT スタイルシートを使用してこれを行うことができます。それはあなたが望むものですか?次に、これに似た XSLT スタイルシートが役立ちます。
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxsl="urn:schemas-microsoft-com:xslt" exclude-result-prefixes="msxsl"
>
<xsl:output method="html" indent="yes"/>
<xsl:template match="/" >
<body>
<xsl:apply-templates select ="/items/video"/>
</body>
</xsl:template>
<xsl:template match="video" >
<li>
<a>
<xsl:attribute name="href">
<xsl:value-of select="./url" disable-output-escaping="yes" />
</xsl:attribute>
<xsl:value-of select="./title"/>
</a>
</li>
</xsl:template>
<xsl:template match=
"*[not(@*|*|comment()|processing-instruction())
and normalize-space()=''
]"/>
<xsl:template match="text()"/>
</xsl:stylesheet>
これは、XML 入力ファイルが次のようになっていることを前提としています。
<?xml version="1.0" encoding="utf-8" ?>
<items>
<video>
<title>XXXX</title>
<url>VIDEO ID OF YOUTUBE></url>
</video>
<video>
<title>XXXX</title>
<url>VIDEO ID OF YOUTUBE></url>
</video>
</items>
私があなたの要件を知らない場合、正確にどのように変換を行うべきかを言うのは難しい. XSLT 変換は、さまざまな方法で実行できます。XML 入力ファイルが静的である場合、Web ブラウザーに変換を行わせることができます。XML ファイルがサーバー上にある場合は、Web ページに変換を記述し、HTML を webbbrowser に送信できます。それはすべてあなたの環境に依存します。