Question

我的理解是，使用element.class应该允许分配给类的特定元素接收与类的其余部分不同的“样式”。这不是关于是否应该使用它的问题，而是我试图理解这个选择器是如何工作的。通过查看互联网上的大量示例，我相信语法是正确的，并且不明白为什么这不起作用。

以下是一个例子：

CSS：

h2 {
    color: red;
}

.myClass {
    color: green;
}

h2.myClass {
    color: blue;
}

HTML：

<h2>This header should be RED to match the h2 element selector</h2>
<div class="myClass">
    <h1>This header should be GREEN to match the class selector</h1>
    <h2>This header should be BLUE to match the element.class selector</h2>
</div>

Answer 1

应该是这样的：

h2.myClass查找类myClass的h2。但实际上你想在.myClass内应用h2的样式，这样你就可以使用后代选择器.myClass h2。

h2 {
    color: red;
}

.myClass {
    color: green;
}

.myClass h2 {
    color: blue;
}

Demo

此ref会为您提供有关选择器的基本概念，并查看descendant selectors

Answer 2

h2.myClass指的是h2 class="myClass"的所有.myClass h2。

h2指的是class="myClass"的所有h2子元素（即嵌套）元素。

如果您希望HTML中的.myClass h2 { color: blue; }显示为蓝色，请将CSS更改为以下内容：

h2

如果您希望能够通过类而不是其标记引用h2，则应该保留CSS原样，并在HTML中为<h2 class="myClass">This header should be BLUE to match the element.class selector</h2>提供一个类：

{{1}}

Answer 3

element.class选择器用于造型情况，例如：

<span class="large"> </span>
<p class="large"> </p>

.large {
    font-size:150%; font-weight:bold;
}

p.large {
    color:blue;
}

你的span和p都将从.large中分配font-size和font-weight，但蓝色只会分配给p。

正如其他人所指出的，你正在使用的是后代选择器。

Answer 4

h2.myClass仅对直接分配了h2类的myClass元素有效。

你想这样注意：

.myClass h2

选择myClass所有标记为h2

的子项

Answer 5

CSS output$barre <- renderPlot({ if (input$continent == "Afrique"){ if(input$condition == "Cas"){ cv_continent %>% mutate(date = ymd(date)) %>% filter(continent_level %in% "Africa") %>% arrange(date) %>% transmute(date, Diff = c(0, diff(cases))) %>% ggplot(aes(x = date, y = Diff)) + labs(title = "Cas chaque jour",x="Mois",y="Cas confirmés")+ geom_col(fill = "yellow") } else if(input$condition == "Décès"){ cv_continent %>% mutate(date = ymd(date)) %>% filter(continent_level %in% "Africa") %>% arrange(date) %>% transmute(date, Diff = c(0, diff(deaths))) %>% ggplot(aes(x = date, y = Diff)) + labs(title = "Décès chaque jour",x="Mois",y="Décès")+ geom_col(fill = "red") } } else if(input$continent == "Asie"){ if(input$condition == "Cas"){ cv_continent %>% mutate(date = ymd(date)) %>% filter(continent_level %in% "Asia") %>% arrange(date) %>% transmute(date, Diff = c(0, diff(cases))) %>% ggplot(aes(x = date, y = Diff)) + labs(title = "Cas chaque jour",x="Mois",y="Cas confirmés")+ geom_col(fill = "yellow") } else if(input$condition == "Décès"){ cv_continent %>% mutate(date = ymd(date)) %>% filter(continent_level %in% "Asia") %>% arrange(date) %>% transmute(date, Diff = c(0, diff(deaths))) %>% ggplot(aes(x = date, y = Diff)) + labs(title = "Décès chaque jour",x="Mois",y="Décès")+ geom_col(fill = "red") } } else if(input$continent == "Europe"){ if (input$condition == "Cas"){ cv_continent %>% mutate(date = ymd(date)) %>% filter(continent_level %in% "Europe") %>% arrange(date) %>% transmute(date, Diff = c(0, diff(cases))) %>% ggplot(aes(x = date, y = Diff)) + labs(title = "Cas chaque jour",x="Mois",y="Cas confirmés")+ geom_col(fill = "yellow") } else if(input$condition == "Décès"){ cv_continent %>% mutate(date = ymd(date)) %>% filter(continent_level %in% "Europe") %>% arrange(date) %>% transmute(date, Diff = c(0, diff(deaths))) %>% ggplot(aes(x = date, y = Diff)) + labs(title = "Décès chaque jour",x="Mois",y="Décès")+ geom_col(fill = "red") } } else if(input$continent == "Amérique du Nord"){ if(input$condition == "Cas"){ cv_continent %>% mutate(date = ymd(date)) %>% filter(continent_level %in% "North America") %>% arrange(date) %>% transmute(date, Diff = c(0, diff(cases))) %>% ggplot(aes(x = date, y = Diff)) + labs(title = "Cas chaque jour",x="Mois",y="Cas confirmés")+ geom_col(fill = "yellow") } else if(input$condition == "Décès"){ cv_continent %>% mutate(date = ymd(date)) %>% filter(continent_level %in% "North America") %>% arrange(date) %>% transmute(date, Diff = c(0, diff(deaths))) %>% ggplot(aes(x = date, y = Diff)) + labs(title = "Décès chaque jour",x="Mois",y="Décès")+ geom_col(fill = "red") } } else if(input$continent == "Océanie"){ if(input$condition == "Cas"){ cv_continent %>% mutate(date = ymd(date)) %>% filter(continent_level %in% "Oceania") %>% arrange(date) %>% transmute(date, Diff = c(0, diff(cases))) %>% ggplot(aes(x = date, y = Diff)) + labs(title = "Cas chaque jour",x="Mois",y="Cas confirmés")+ geom_col(fill = "yellow") } else if(input$condition == "Décès"){ cv_continent %>% mutate(date = ymd(date)) %>% filter(continent_level %in% "Oceania") %>% arrange(date) %>% transmute(date, Diff = c(0, diff(deaths))) %>% ggplot(aes(x = date, y = Diff)) + labs(title = "Décès chaque jour",x="Mois",y="Décès")+ geom_col(fill = "red") } } else if(input$continent == "Amérique du Sud"){ if(input$condition == "Cas"){ cv_continent %>% mutate(date = ymd(date)) %>% filter(continent_level %in% "North America") %>% arrange(date) %>% transmute(date, Diff = c(0, diff(cases))) %>% ggplot(aes(x = date, y = Diff)) + labs(title = "Cas chaque jour",x="Mois",y="Cas confirmés")+ geom_col(fill = "yellow") } else if(input$condition == "Décès"){ cv_continent %>% mutate(date = ymd(date)) %>% filter(continent_level %in% "North America") %>% arrange(date) %>% transmute(date, Diff = c(0, diff(deaths))) %>% ggplot(aes(x = date, y = Diff)) + labs(title = "Décès chaque jour",x="Mois",y="Décès")+ geom_col(fill = "red") } } }选择器允许您定位作为父元素中第一个子元素的元素。

:first-child

如何选择具有某个类的元素？

5 个答案:

Demo