Question

我有以下HTML来显示一组数据：

<!-- Content ================================================== -->
<div class="container margin_60_35">
    <div class="row">    
        <div class="col-md-12">
            <h3 class="nomargin_top">Agenda</h3>
            @foreach($agenda['canchas'] as $cancha)
            <div class="panel-group">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="title-group" data-toggle="collapse" href="#collapse1">Cancha {{ $cancha['idCancha'] }}</a>
                        </h4>
                    </div>
                    <div id="collapse1" class="panel-collapse collapse">
                        <ul class="list-group">
                            @foreach($cancha['turnos'] as $turno)
                            <li class="list-group-item">{{ $turno['hora'] }} ({{ $turno['estado'] }})</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
            @endforeach
        </div><!-- End col-md-9 -->
    </div><!-- End row -->
</div><!-- End container -->
<!-- End Content =============================================== -->

我想要的是更改可折叠组的标题颜色。

CSS：

.panel-title{
    color: #ffffff;
}
.panel-group .panel-heading{
    background-color: #3F51B5!important;
}
.list-group{
     color: #a94442;
  background-color: #f2dede;
}

Y试过：

.panel-title{
    color: #ffffff;
}

但没有改变颜色。谢谢你的帮助！

Answer 1

我假设你知道！重要因为你在面板组课程中使用过它。您是否尝试过使用它来更改.panel-title类的颜色？

<Style TargetType="RadioButton">
  <Setter Property="Background" Value="Transparent" />
  <Setter Property="Foreground" Value="{ThemeResource SystemControlForegroundBaseHighBrush}"/>
  <Setter Property="Padding" Value="8,6,0,0" />
  <Setter Property="HorizontalAlignment" Value="Left" />
  <Setter Property="VerticalAlignment" Value="Center" />
  <Setter Property="HorizontalContentAlignment" Value="Left" />
  <Setter Property="VerticalContentAlignment" Value="Top" />
  <Setter Property="FontFamily" Value="{ThemeResource ContentControlThemeFontFamily}" />
  <Setter Property="FontSize" Value="{ThemeResource ControlContentThemeFontSize}" />
  <Setter Property="MinWidth" Value="120" />
  <Setter Property="UseSystemFocusVisuals" Value="True" />
  <Setter Property="Template">
    <Setter.Value>
      <ControlTemplate TargetType="RadioButton">
        <Grid Background="{TemplateBinding Background}"
              BorderBrush="{TemplateBinding BorderBrush}"
              BorderThickness="{TemplateBinding BorderThickness}">
        <VisualStateManager.VisualStateGroups>
          <VisualStateGroup x:Name="CommonStates">
            <VisualState x:Name="Normal" />
            <VisualState x:Name="PointerOver">
              <Storyboard>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterEllipse"
                                               Storyboard.TargetProperty="Stroke">
                  <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseHighBrush}" />
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckOuterEllipse"
                                               Storyboard.TargetProperty="Stroke">
                  <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAccentBrush}" />
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckOuterEllipse"
                                               Storyboard.TargetProperty="Fill">
                  <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph"
                                               Storyboard.TargetProperty="Fill">
                  <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                </ObjectAnimationUsingKeyFrames>
              </Storyboard>
            </VisualState>
            <VisualState x:Name="Pressed">
              <Storyboard>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterEllipse"
                                               Storyboard.TargetProperty="Stroke">
                  <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumBrush}" />
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckOuterEllipse"
                                                Storyboard.TargetProperty="Stroke">
                  <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumBrush}" />
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckOuterEllipse"
                                                Storyboard.TargetProperty="Fill">
                  <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightTransparentBrush}" />
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph"
                                               Storyboard.TargetProperty="Fill">
                  <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseMediumBrush}" />
                </ObjectAnimationUsingKeyFrames>
              </Storyboard>
            </VisualState>
            <VisualState x:Name="Disabled">
              <Storyboard>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="OuterEllipse"
                                               Storyboard.TargetProperty="Stroke">
                  <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckOuterEllipse"
                                                Storyboard.TargetProperty="Stroke">
                  <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckOuterEllipse"
                                                Storyboard.TargetProperty="Fill">
                  <DiscreteObjectKeyFrame KeyTime="0" Value="Transparent" />
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="CheckGlyph"
                                               Storyboard.TargetProperty="Fill">
                  <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
                </ObjectAnimationUsingKeyFrames>
                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                               Storyboard.TargetProperty="Foreground">
                  <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseLowBrush}" />
                </ObjectAnimationUsingKeyFrames>
              </Storyboard>
            </VisualState>
          </VisualStateGroup>
          <VisualStateGroup x:Name="CheckStates">
            <VisualState x:Name="Checked">
              <Storyboard>
                <DoubleAnimation Storyboard.TargetName="CheckGlyph"
                                 Storyboard.TargetProperty="Opacity"
                                 To="1"
                                 Duration="0" />
                <DoubleAnimation Storyboard.TargetName="OuterEllipse"
                                 Storyboard.TargetProperty="Opacity"
                                 To="0"
                                 Duration="0" />
                <DoubleAnimation Storyboard.TargetName="CheckOuterEllipse"
                                 Storyboard.TargetProperty="Opacity"
                                 To="1"
                                 Duration="0" />
              </Storyboard>
            </VisualState>
            <VisualState x:Name="Unchecked" />
            <VisualState x:Name="Indeterminate" />
          </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
          <Grid.ColumnDefinitions>
            <ColumnDefinition Width="20" />
            <ColumnDefinition Width="*" />
          </Grid.ColumnDefinitions>
          <Grid VerticalAlignment="Top" Height="32" >
            <Ellipse x:Name="OuterEllipse"
                      Width="20"
                      Height="20"
                      UseLayoutRounding="False"
                      Stroke="{ThemeResource SystemControlForegroundBaseMediumHighBrush}"
                      StrokeThickness="{ThemeResource RadioButtonBorderThemeThickness}" />
            <Ellipse x:Name="CheckOuterEllipse"
                      Width="20"
                      Height="20"
                      UseLayoutRounding="False"
                      Stroke="{ThemeResource SystemControlHighlightAltAccentBrush}"
                      Fill="{ThemeResource SystemControlHighlightTransparentBrush}"
                      Opacity="0"
                      StrokeThickness="{ThemeResource RadioButtonBorderThemeThickness}" />
            <Ellipse x:Name="CheckGlyph"
                      Width="10"
                      Height="10"
                      UseLayoutRounding="False"
                      Opacity="0"
                      Fill="{ThemeResource SystemControlHighlightAltBaseMediumHighBrush}" />
          </Grid>
          <ContentPresenter x:Name="ContentPresenter"
                            Content="{TemplateBinding Content}"
                            ContentTransitions="{TemplateBinding ContentTransitions}"
                            ContentTemplate="{TemplateBinding ContentTemplate}"
                            Margin="{TemplateBinding Padding}"
                            HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                            Grid.Column="1"
                            AutomationProperties.AccessibilityView="Raw"
                            TextWrapping="Wrap" />
        </Grid>
      </ControlTemplate>
    </Setter.Value>
  </Setter>
</Style>

Answer 2

.panel-title{ } 不够具体，因为您正在尝试定位其样式可能已定义的内部a。

尝试改为：

.panel-title a {
   color: red;
}

按照同样的原则，如果CSS中的某个地方你已经拥有像h4 a{}这样的风格，那么你需要再次添加更高的特异性：

h4.panel-title a {
   color: red;
}

更改标题组CSS的文本颜色

2 个答案: