Fix specificity ordering

src/textual/css/stylesheet.py

@@ -296,13 +296,15 @@ class Stylesheet:
                     rule_attributes[key].append((rule_specificity, value))
 
         # For each rule declared for this node, keep only the most specific one
-        node_rules: RulesMap = cast(
-            RulesMap,
-            {
-                name: specificity_rules[-1][1]
-                for name, specificity_rules in rule_attributes.items()
-            },
-        )
+        get_first_item = itemgetter(0)
+        node_rules: RulesMap = cast(RulesMap, {})
+        for name, specificity_rules in rule_attributes.items():
+            highest_specificity = max(specificity_rules, key=get_first_item)[0]
+            rules_with_highest_specificity = [
+                rule for rule in specificity_rules if rule[0] == highest_specificity
+            ]
+            node_rules[name] = rules_with_highest_specificity[-1][1]
+
         self.replace_rules(node, node_rules, animate=animate)
         if isinstance(node, Widget):
             node._refresh_scrollbars()

tests/css/test_stylesheet.py

@@ -11,12 +11,12 @@ from textual.dom import DOMNode
 
 
 def test_stylesheet_apply_takes_final_rule_in_specificity_clash():
-    css = ".a {background: red; color: lime} .b {background:blue}"
+    css = ".a {background: red; color: lime} .b {background: blue}"
     stylesheet = Stylesheet()
     stylesheet.source["test.css"] = css
     stylesheet.parse()
 
-    node = DOMNode(classes="a b")
+    node = DOMNode(classes="a b", id="c")
     stylesheet.apply(node)
 
     assert node.styles.color == Color(0, 255, 0)  # color: lime