レイアウトのFlask CSSが読み込まれない

this（layout.htmlとindex.htmlを持つ）を私のアプリケーションに統合しようとしました。始める前に、私はすべてのCSS/javascriptがトップに含まれているindex.htmlしか持っていませんでした。レイアウトのFlask CSSが読み込まれない

現在のファイル構造体

/app 
    - app_runner.py 
    /templates 
     - layout.html 
     - index.html 
    /static 
     /styles 
      - mystyle.css

Layout.html（主にCSSやJavaScript CDNと私のスタイルシート）

<!doctype html> 
<!-- Latest bootstrap compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
<!-- Optional bootstrap theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
<!-- jquery --> 
<script 
    src="https://code.jquery.com/jquery-3.1.1.min.js" 
    integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
    crossorigin="anonymous"></script> 
<!-- Latest bootstrap compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
<!-- jstree --> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" /> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script> 
<!-- my stylesheet --> 
<link rel='stylesheet' type='text/css' href="{{url_for('static',filename='styles/mystyle.css')}}" /> 
<script type="text/javascript"> 
    var $SCRIPT_ROOT = {{ request.script_root|tojson|safe }}; 
</script> 
{% block body %}{% endblock %}

ページでは、ほとんどの部分は、同じレンダリング：jstreeが表示され、ブートストラップが動作し、残りのスタイリングが適用されます。

td { 
    padding: 5px; 
}

デベロッパーコンソールは、パディングを示しています：0、ブートストラップスクリプトから来て、私のCSSファイルで、私は適用されませんラインを持っています。開発者コンソールで変更した場合、5pxに変更することができます。私は!important使用して聞いた

は悪い習慣ですが、私は変更せずにとにかくそれを試してみました。私はすべての私のtdにクラスを追加しようとしました。それはより高い先例（this answerに基づいて）を持っていて、そのスタイル（.my_row{padding:5px;}）が適用されますが、それは変更されません。だから私のCSSは私のテーブルに適用されていないようです。 mystyle.cssの他の部分も動作します。

パディングが自分のテーブルに適用されていない理由についてのご意見はありますか？

出典

2017-01-27 depperm

をこれらのコード行を追加しました優先順位。あなたの値を 'td {padding：5px; } '代わりに' '等しくなるように。ここには[ちょっと説明できるページ]（http://vanseodesign.com/css/css-specificity-inheritance-cascaade/） – Suever

私は 'td、th'も試しました – depperm

私のスタイルシートがキャッシュ内でリフレッシュされていないことが判明しました。私はこのsiteの答えを見つけました。

私はnormalize.less` `内で指定されたスタイルのためのセレクタが* *より具体的であるため、かかるかのように見えます（app-runner.py）私のpythonに

@app.context_processor 
def override_url_for(): 
    return dict(url_for=dated_url_for) 

def dated_url_for(endpoint, **values): 
    if endpoint == 'static': 
     filename = values.get('filename', None) 
     if filename: 
      file_path = os.path.join(app.root_path, 
            endpoint, filename) 
      values['q'] = int(os.stat(file_path).st_mtime) 
    return url_for(endpoint, **values)

出典

2017-01-28 01:46:05 depperm

レイアウトのFlask CSSが読み込まれない

答えて

関連する問題