htmlとcssを使ってwebサイトを作成しているのですが、ちょっと困っていることがあります。
/------------------------------------------------------/
<div class="sample">
<b>
<a href="http://*****.html" class="sample">*******</a>
<br>
ここに文章が入っています。
</b>
</div>
/------------------------------------------------------/
このような状態のhtmlが存在するのですが、<a>のテキストだけfont-sizeを23px、その下の<br>の次のテキストのfont-sizeを15pxにしたいです。
色々ありましてこのhtmlの状態から書き換えることができません。
何かいい方法がありましたら回答よろしくお願いします。
補足です。
htmlを書き換えることができないのは、外部のサイトからphp使ってhtmlを読み込んで抽出しているからです。(単にどうすればいいかわからない...)
もし、取得した状態にタグなどを追加して書き換えることができるのであればその方法も教えていただけると幸いです。
cssだけで解決できない場合は、phpやjqueryなどでも大丈夫なのでよろしくお願いします。
No.1
3
1
<html>
<head>
<style>
<!--
body {font-size: 15px;}
a {font-size: 23px;}
-->
</style>
</head>
<body>
<div class="sample">
<b>
<a href="http://*****.html" class="sample">*******</a>
<br>
ここに文章が入っています。
</b>
</div>
</body>
</html>
No.1
31
ここでベストアンサー
<html>
<head>
<style>
<!--
body {font-size: 15px;}
a {font-size: 23px;}
-->
</style>
</head>
<body>
<div class="sample">
<b>
<a href="http://*****.html" class="sample">*******</a>
<br>
ここに文章が入っています。
</b>
</div>
</body>
</html>
No.2
49742154
「<br> の次の」というのが、css のセレクタでは実現できないので、こんな風に読み替えました。
css にすると、こんな感じ。
DIV.sample A.sample { font-size: 23px; } DIV.sample B { font-size: 15px; }
<div class="sample"> の中にある HTML が、実際はどんなになってるかで、font-size: 15px を、どう指定するかは、変わってくるとは思いますけれど。
jsFiddle というサイトで試してみたのが、こちら。
http://jsfiddle.net/bb84hek4/
分かりやすいように、色も付けてます。
確認してみてください。
No.3
338120
例題では親要素にあたるdivと、子要素にあたるaに、どちらもsampleという同じクラス名を与えていますが、このクラス名を変えるだけで別々のスタイルを参照させる事ができます。この意味がわかれば問題は解決するでしょう。
なお、cssのcとはカスケード…と説明すると難しく感じるかもしれませんが、要は上書きの原理なんですね。親要素に与えたスタイルは、子要素にも全て受け継がれます。
例えば、親要素に、A,B,C,D,E、というスタイルを与えたとします。ここで子要素に、Cを上書きするC-2というスタイルだけしか与えなかったとしても、子要素は、A,B,C-2,D,E、というスタイルになるのです。こうした基本をしっかりおさえておくと、少ない定義で数々のバリエーションを生み出すことが可能となります。
だから本当は、bodyを直接定義、またはそれが無理ならばdivを直接定義してしまえば、記述をかなり簡略化できたりしますよ。Coreさんのやり方が丁度そうですね。classを使うのは、それでは間に合わない細かな指定をしたい場合のみでいいのです。
4
0
1
2
1
コメント（0件)