Question

这看起来很简单，但我相信我已经过度思考了这一点，我无法让它发挥作用。

我有我的默认超链接样式：

a {
  text-decoration: none;
  color: blue;
}
a:hover {
  color: red;
}
a:visited {
  color: purple;
}

我也有一些按钮样式：

.button {
  padding: 0.4em;
  border: 1px solid #535353;
  color: #535353;
}

最后，我有一些全局类添加到元素中以自定义字体颜色：

.color-green {
  color: green;
}
.color-yellow {
  color: yellow;
}

所以我的问题是处理超链接的按钮，如：

<a class="button" href="#">A button</a>

我希望类button中的任何链接都是color: #535353;的默认状态，悬停和访问时间。按钮应该始终是那种颜色...... 除非......

除非按钮具有颜色类，例如：

<a class="button color-green" href="#">A green button</a>

如果按钮具有颜色类，则颜色应更改为指定的颜色类...这包括所有状态（默认，悬停，访问）。

我遇到的问题只是超链接按钮的:hover和:visited状态。例如，如果按钮具有颜色类，则悬停时颜色始终会变为红色。

如何更新此选项，以便如果按钮具有颜色类，那么它将是所有状态中的颜色？

请记住，颜色类用于各种元素（div，span，p等），按钮类也用于链接，提交按钮，div等。

另请注意，我有一个超级链接color-yellow，但我仍然想要一个超链接来继承默认的超链接悬停颜色。我只希望类button的任何内容都忽略默认超链接悬停和访问过的颜色。

＆＃13;

a {
  text-decoration: none;
  color: blue;
}
a:hover {
  color: red;
}
a:visited {
  color: purple;
}
.button {
  width: auto;
  padding: 0.4em;
  border: 1px solid #535353;
  color: #535353;
}
.color-green {
  color: green;
}
.color-yellow {
  color: yellow;
}

＆＃13;

<a href="#">Normal hyperlink</a>
<a class="color-yellow" href="#">Yellow normal, red hovered</a>
<a class="button" href="#">Default button</a>
<a class="button color-green" href="#">Green color button</a>

＆＃13;

Answer 1

您可以将:not()与类属性通配符选择器结合使用，以从CSS规则中排除.color-*。

a {
  text-decoration: none;
  color: blue;
}
a:not([class*="color-"]):visited {
  color: purple;
}

a:not([class*="color-"]):hover {
  color: red;
}
.button {
  width: auto;
  padding: 0.4em;
  border: 1px solid #535353;
  color: #535353;
}
.color-green {
  color: green;
}
.color-yellow {
  color: yellow;
}

<a href="#">Normal hyperlink</a>
<a class="button" href="#">Default button</a>
<a class="button color-green" href="#">Green color button</a>

Answer 2

一种解决方案是使用：不是选择器

using System;
using System.Collections.Generic;
using System.Collections;
using System.Security.Cryptography;
using System.Linq;
using System.Runtime.InteropServices;

class Solution {
    public class Edge : IComparable
    {
        public int From
        {
            get;
            set;
        }
        public int To
        {
            get;
            set;
        }
        public int Weight
        {
            get;
            set;
        }
        public bool IsDirected
        {
            get;
            set;
        }

        public Edge(int from, int to, bool isDirected = false, int weight = 0)
        {
            this.From = from;
            this.To = to;
            this.Weight = weight;
            this.IsDirected = isDirected;
        }

        public int CompareTo(object obj)
        {
            if (obj is Edge)
            {
                var comparingTo = obj as Edge;
                return this.Weight.CompareTo(comparingTo.Weight);
            }
            return 0; //TODO:what should we return?
        }
    }

    public class AdjNode
    {
        public int EdgeWeight
        {
            get;
            set;
        }

        public int Id
        {
            get;
            set;
        }

        public AdjNode(int id)
        {
            this.Id = id;
            this.EdgeWeight = 0;
        }
        public AdjNode(int id, int weight)
        {
            this.Id = id;
            this.EdgeWeight = weight;
        }
    }
    public class GraphAdj
    {

        public int V
        {
            get;
            set;
        }

        public List<AdjNode>[] adj
        {
            get;
            set;
        }

        public List<Edge> Edges
        {
            get;
            set;
        }

        public GraphAdj(int v)
        {
            this.V = v;
            this.adj = new List<AdjNode>[this.V];
            for (int i = 0; i < this.V; i++)
            {
                this.adj[i] = new List<AdjNode>(); //allocate actual memory
            }
            this.Edges = new List<Edge>();
        }

        public void AddDirectedEdge(int from, int to)
        {
            adj[from].Add(new AdjNode(to));
            this.Edges.Add(new Edge(from,to,true));
        }

        public void AddDirectedEdge(int from, int to, int weight)
        {
            adj[from].Add(new AdjNode(to,weight));
            this.Edges.Add(new Edge(from, to, true, weight));
        }
    }
    public string multiple(int A) {
        int n = A;
        GraphAdj directedGraphForNumber = new GraphAdj(n);
        Queue<int> queueForNumbers = new Queue<int>();
            string result = String.Empty;
            bool[] visitedForNumbers = new bool[directedGraphForNumber.V];
            int[] suffixes = new int[2] { 0, 1 };
            //we will start from 1st node out of n node

            queueForNumbers.Enqueue(1);
            visitedForNumbers[1] = true;

            while (true)
            {
                int from = queueForNumbers.Dequeue();
                if (from == 0)
                    break;

                for (int i = 0; i < suffixes.Length; i++)
                {
                    int toNode = from * 10 + suffixes[i];
                    int reminder = toNode % n;
                    if (visitedForNumbers[reminder] == false)
                    {
                        visitedForNumbers[reminder] = true;
                        queueForNumbers.Enqueue(reminder);
                        directedGraphForNumber.AddDirectedEdge(from, reminder,suffixes[i]);
                    }
                }
            }

            //Do BFS traversal with edges until zero th node encounters
            bool[] visitedForBfs = new bool[directedGraphForNumber.V];
            Queue<int> queueForBfs = new Queue<int>();
            int[] parent = new int[directedGraphForNumber.V];

            int source = 1;
            visitedForBfs[source] = true;
            queueForBfs.Enqueue(source);
            parent[source] = -1;

            while (queueForBfs.Count > 0)
            {
                int currentVertex = queueForBfs.Dequeue();

                foreach (var adjacentVertex in directedGraphForNumber.adj[currentVertex])
                {
                    if (visitedForBfs[adjacentVertex.Id] == false)
                    {
                        queueForBfs.Enqueue(adjacentVertex.Id);
                        parent[adjacentVertex.Id] = currentVertex;
                        visitedForBfs[adjacentVertex.Id] = true;
                    }
                    if (adjacentVertex.Id == 0) // we reach zero th node
                    {
                        queueForBfs.Clear(); //break out of bfs
                    }
                }
            }

            //now time to find path all the way to start from zero using parent
            List<int> pathListUsingParent = new List<int>();
            int current = 0;
            pathListUsingParent.Add(0); // add zero

            while (current!=1)
            {
                pathListUsingParent.Add(parent[current]);
                current = parent[current];
            }

            //reverse path to make number using edges
            pathListUsingParent.Reverse();

            result += "1"; //start node

            //now read edges
            for (int i = 0; i < pathListUsingParent.Count-1; i++)
            {
                int from = pathListUsingParent[i];
                int to = pathListUsingParent[i + 1];

                result += directedGraphForNumber.adj[from].FirstOrDefault(adj => adj.Id == to).EdgeWeight;
            }

            return result;
    }
}

Answer 3

这是!important的完美用例。无需使用额外的标记/规则/选择器。

＆＃13;

a {
  text-decoration: none;
  color: blue;
}
a:hover {
  color: red;
}

.button {
  padding: 0.4em;
  border: 1px solid #535353;
  color: #535353 !important;
}

.color-green {
  color: green !important;
}
.color-yellow {
  color: yellow !important;
}

＆＃13;

<a href="#">This link has no class.</a> <br> <br>
<a href="#" class="button">This link has class "button".</a> <br><br>
<a href="#" class="button color-green">This link has classes "button" and "color-green".</a>

＆＃13;

Answer 4

尝试使用锚标记指定颜色类：a.color-green

见下面的代码

＆＃13;

a {
  text-decoration: none;
  color: blue;
}
a:hover {
  color: red;
}
a:visited {
  color: purple;
}
.button {
  width: auto;
  padding: 0.4em;
  border: 1px solid #535353;
  color: #535353;
}
.color-green,
a.color-green {
  color: green;
}
.color-yellow,
a.color-yellow {
  color: yellow;
}

＆＃13;

<a href="#">Normal hyperlink</a>
<a class="button" href="#">Default button</a>
<a class="button color-green" href="#">Green color button</a>

＆＃13;

Answer 5

有一点需要指出的是，这些链接的样式实际上对它们有一个顺序。见here。＆＃34;你的悬停必须追踪被访问的＆＃34;。

至于按钮颜色，另外要指出的是，使用.color-green并不引用您在链接中列出的类，您将button color-green写为类不同的东西

您可以设置每个班级的链接样式。例如a.button:hover所以在你的情况下你会有很多不同的设置，但你现在所拥有的将默认为所有链接的红色。

CSS：如何忽略按钮类

5 个答案: