如何将Pseudo类用于多个链接？

问题描述

当我想在多个链接中使用时，如何使用伪类：

 class Report extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return Scaffold(
  appBar: AppBar(
    title: Text('Report'),),backgroundColor: Colors.blue,body: ListPage(),);
}
}

class ListPage extends StatefulWidget {
@override
_ListPageState createState() => _ListPageState();
}

class _ListPageState extends State<ListPage> {

Future getPosts() async{
var firestore = Firestore.instance;
QuerySnapshot qn = await firestore.collection("report").getDocuments();

return qn.documents;
}

navigatetoDetail(DocumentSnapshot post){
Navigator.push(context,MaterialPageRoute(builder: (context) => DetailPage(post: post)));
}

@override
Widget build(BuildContext context) {
return Container(
  child: FutureBuilder(
    future: getPosts(),builder: (_,snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting){
      return Center(child: Text("Loading..."),);
      
    }else{

     return ListView.builder(
     itemCount: snapshot.data.length,itemBuilder: (_,index) {
     return Card(
     child: ListTile(
     title: Text(snapshot.data[index].data["name"]),onTap: () => navigatetoDetail(snapshot.data[index]),)
          );
      });
     }
    }),);
  }  
}

  class DetailPage extends StatefulWidget {

  final DocumentSnapshot post;
  DetailPage({this.post});

  @override
  _DetailPageState createState() => _DetailPageState();
   }

 updateData() async {
 CollectionReference collectionReference = Firestore.instance.collection('report');
 QuerySnapshot querySnapshot = await collectionReference.getDocuments();
 querySnapshot.documents[0].reference.updateData({"status":"0"});
}

 class _DetailPageState extends State<DetailPage> {
 @override
 Widget build(BuildContext context) {
  return Card(
   child: Column(
    children: <Widget>[
      SizedBox(height: 100,Text("Name:" ' ' + widget.post.data["name"]),Text("Note:" ' ' + widget.post.data["note"]),Text("Type:" ' ' + widget.post.data["type"]),Image.network(widget.post.data["picture"]),RaisedButton(
        child: Text("Approve"),onpressed: () {
          Navigator.of(context).pushNamed('/approved');
        },color: Colors.green,RaisedButton(
        child: Text("Reject"),onpressed: () {
          Navigator.of(context).pushNamed('/rejected');
        },color: Colors.red,],);
}
}

a.youtube,a.google:link{ color: pink;}
a.youtube,a.google:visited{ color: green; }
a.youtube,a.google:hover{ color: red; }

它不能正常工作。

解决方法

我认为要实现自己的目标，需要做的是在两个类上都添加“：visited” /“：hover”，而不仅仅是“ google”类。像这样：

a.youtube,a.google{
color: pink;
}

a.youtube:visited,a.google:visited{
  color: green;
}

a.youtube:hover,a.google:hover{
color: red;
}

此外，您不需要“：link”

这是工作中的JSFiddle

,

您可以使用一个类将其存档：

.social-link,.social-link:link {
  color: pink;
}

.social-link:visited {
  color: green;
}

.social-link:hover {
  color: red;
}

<a class="youtube social-link" href="https://www.youtube.com/" target="_blank">YOUTUBE</a>
<a class="google social-link" href="https://www.google.com/" target="_blank">GOOGLE</a>