2016-05-11 5 views
0

CSSルールを適用するためにattr(データ属性)を使用するCSSを使用したいと考えています。attr(data-attribute)を使用してCSSルールを適用する方法は?

例えば、私のCSSに:次に

@media max-width(480px) { 
    .mobile-float { 
    float: attr(data-mobile-float); 
    } 
} 

、私のHTMLに、私はデータ属性を定義:

<div data-mobile-float="right"> 
    Floats right on mobile! 
</div> 

<div data-mobile-float="left"> 
    Floats left on mobile! 
</div> 

を、私は、文字が欠けてるような気がしますし、そうではありませんワーキング。これを正しく行うにはどうしたらいいですか?ありがとう!あなたはCSSに間違ったセレクタを使用している

答えて

0

[data-mobile-float="left"]{font-size: 50px;}
<div data-mobile-float="right"> 
 
    Floats right on mobile! 
 
</div> 
 

 
<div data-mobile-float="left"> 
 
    Floats left on mobile! 
 
</div>

+0

が提案いただきありがとうございます、しかし、あなたの例では、あなたが今、 '[データ-モバイル用の別のCSSルールを記述する必要があり、これを試してください-float = "right"] {...} '。私はfloat = left/float = right/@media max-width/@media min-width以外に追加したいCSSルールがたくさんあるので、 'attr()' CSSを使いたいと思いますCSSプロパティ値を提供する関数です。 – user3621156

関連する問題