2012-02-23 64 views
0

我有了这个HTML:如何删除CSS属性,使HTML属性再次生效?

<td align="right">$12</td> 

但由于某处在样式表中,它说

td { text-align: left; } 

我可以做这样的事情覆盖这个风格进一步下跌的文本不是右对齐这个:

.bugnote table td, .bugnote table th { 
    text-align: inherit; 
} 

但“继承”没有我所希望的效果:清除属性。它仍然是左对齐的。有没有办法实质上删除/清除任何以前设置的属性text-align

+0

你能使用JavaScript? – Michas 2012-02-23 22:28:48

+0

@Michas:没有什么可以阻止我,但我不喜欢使用JS进行造型,我不认为这是值得的。我宁愿让它与使用JS不一致。 – mpen 2012-02-23 22:32:00

+0

如果我没有错,你有一些CSS和一些HTML你无法编辑? – Michas 2012-02-23 22:35:35

回答

1

inherit表示该元素将采用其父项的样式。

你不能“清除”现有的样式规格,所以你必须用你想要的结果覆盖它。例如:

.bugnote table td, .bugnote table th { 
    text-align: right; 
} 

如果您的浏览器支持需求允许,您可以优化选择器以使用CSS2的属性选择器。例如:

.bugnote table td[align="right"], .bugnote table th[align="right"] { 
    text-align: right; 
} 
+0

不幸的是,除了那个'align =“right”''''''''''''''''''''''''''''''以外,没有其他的指示符表示文本应该是右对齐的。不*所有*表'.bugnote表td's应该是右对齐的。 – mpen 2012-02-23 22:31:11

+1

如果您的浏览器支持需求允许,您可以改进选择器以使用CSS3的属性选择器。 'td [align =“right”]'我想。 – KatieK 2012-02-23 22:35:43

+0

是的。我自己也得出了同样的结论。属性选择器可以满足我的需求。 – mpen 2012-02-23 22:40:29

3

请勿使用过时的属性。

取而代之,在表格单元格上使用style="text-align: right;",就像您应该的那样。内联style属性覆盖样式表中定义的样式。

+0

...这不是一个答案。如果可以的话,我会很高兴地使用CSS,但这是生成的标记,我不能改变。 – mpen 2012-02-23 22:27:52

+0

@Mark:什么产生它? 'align'属性已被弃用了很长一段时间,HTML5中不再支持。我相信可以修改它以正常工作*,你只是想找到一种避免这种情况的方法。对? – animuson 2012-02-23 22:44:48

+0

@animuson:PHP Markdown Extra生成它。我确信我可以修改脚本,如果我真的需要,但是我不能升级脚本。我并不过分担心已弃用的标签。我厌倦了纯粹的游戏。可能不在HTML5规范中,但它看起来并不像浏览器已经放弃了它。 http://jsfiddle.net/mnbayazit/YudzB/ – mpen 2012-02-24 01:47:53

0

请不要使用任何样式属性,如align="right"。正如你注意到的那样,它是邪恶的。也尽量避免内联样式。使用干净的CSS,你不会遇到这些麻烦。

编辑:

您可以尝试提高您的selector specifity和/或使用的重要关键字!

+0

HTML生成;我无法改变它。所以我为什么要问这个问题。 – mpen 2012-02-23 22:29:43

+0

@Mark看我的编辑。 – Christoph 2012-02-23 22:36:02

+0

特异性不是问题。 'text-align:inherit;'根本就没有做我想做的事情,而且似乎没有任何其他值。 – mpen 2012-02-23 22:38:58

1

这似乎工作:

.bugnote [align=right] { 
    text-align: right; 
} 

浏览器支持可能不是都在那里,但没关系。无论如何,这是内部网站。

0

只要使用这个

$(document).ready(function(){ $('.bugnote table td, .bugnote table th').css('text-align','none')}); 
+0

参见问题讨论;我不想使用JS。你也遗漏了你使用jQuery的事实(如果我不知道更好,这是行不通的)。最后,这个*仍然没有预期的效果,因为我特别想要'align =“right”'属性来决定对齐方式,而不是那个选择器。 (为了解决它,我们只需要添加'[align = right]',但我可以在CSS中做到这一点) – mpen 2012-02-23 22:44:28

0

凯蒂的解决方案并没有为我工作,所以我推翻了降价表滤波器。

应用程序/ tables.py

# -*- coding: utf-8 -*- 
""" 
    tables 
    ~~~~~~~~~~~~~~ 

    Process Tables (add default 'left' alignment and inline styles) 
""" 

from flask.ext.markdown import Extension 
from markdown.extensions.tables import TableProcessor, etree 

class BSTableProcessor(TableProcessor): 
    """ Process Tables in a Bootstrap compatible way """ 
    def _build_row(self, row, parent, align, border): 
     """ Given a row of text, build table cells. """ 
     tr = etree.SubElement(parent, 'tr') 
     tag = 'td' 
     if parent.tag == 'thead': 
      tag = 'th' 
     cells = self._split_row(row, border) 
     # We use align here rather than cells to ensure every row 
     # contains the same number of columns. 
     for i, a in enumerate(align): 
      c = etree.SubElement(tr, tag) 
      try: 
       c.text = cells[i].strip() 
      except IndexError: 
       c.text = "" 

      a = (a or 'left') 
      c.set('style', "text-align: %s;" % a) 

class TableExtension(Extension): 
    def extendMarkdown(self, md, md_globals): 
     """ Add an instance of TableProcessor to BlockParser. """ 
     md.parser.blockprocessors.add(
      'table', BSTableProcessor(md.parser), '<hashheader') 

应用程序/ 初始化的.py

# -*- coding: utf-8 -*- 
""" 
    app 
    ~~~~~~~~~~~~~~ 

    Provides the flask application 
""" 

from flask import Flask, render_template 
from flask.ext.markdown import Markdown 
from app.tables import TableExtension 


def create_app(): 
    """Create webapp instance""" 

    # Flask application 
    app = Flask(__name__) 
    md = Markdown(app) 
    md.register_extension(TableExtension) 

    # Views 
    @app.route('/') 
    def index(): 
     return render_template('markdowned.html') 

    return app