【提问】关于css中组合选择式的表达方法

sunset · 发表于 2018-4-27 13:22:56

本帖最后由 sunset 于 2018-4-27 20:04 编辑

如下面的三张图：
图中选择的是柯林斯词典中不同模块中的中文字段，这三个地方的中文全都是由span.chinese-text 控制的。选中了其中的一个，对其样式进行修改，其他两处的样式也会跟随着一起变动。有没有什么办法，能将这三个地方的中文样式分开控制？附件中提供了html、css文件，麻烦各位大神了。

Yyang. · 发表于 2018-4-29 09:24:14

本帖最后由 Yyang. 于 2018-4-29 09:31 编辑

我写了可以单独控制，你试试吧
.note.type-note.no-before.example li p {
color: black;
}

.collins_en_cn.example .chinese-text {
color: slategray;
}

span.def_cn.cn_after .chinese-text {
color: #e05e00;
font-size: 90%;
font-weight: bold;
}

span.def_cn.cn_after {
color: #e05e00;
font-size: 95%;
font-weight: bold;
}

hyqq2015 · 发表于 2018-4-27 14:10:50

提供一个思路：

这个可以通过找出这3处chinese-text的规律，然后使用正则替换，分别替换为chinese-text1，chinese-text2，chinese-text3，或者保留一处不变，替换其他两处，分别为chinese-text，chinese-text1，chinese-text2

然后再分别写出css

关键是找出规律。

sunset · 发表于 2018-4-27 14:59:28

hyqq2015 发表于 2018-4-27 14:10
提供一个思路：

这个可以通过找出这3处chinese-text的规律，然后使用正则替换，分别替换为chinese-text1， ...

好吧，原来还是必须要去修改原html

simonfire · 发表于 2018-4-27 15:42:28

往上找不同的父元素或祖先元素，然后组合选择，我试了，这个是可以的。

sunset · 发表于 2018-4-27 15:49:16

须佐之男发表于 2018-4-27 15:42
往上找不同的父元素或祖先元素，然后组合选择，我试了，这个是可以的。

我就是组合选择的格式不会写，你能举个例子吗？
比如父元素是div.1，子元素是span.2，我想修改span.2的样式，应该怎么写？

simonfire · 发表于 2018-4-27 16:02:17

本帖最后由须佐之男于 2018-4-27 16:04 编辑

sunset 发表于 2018-4-27 15:49
我就是组合选择的格式不会写，你能举个例子吗？
比如父元素是div.1，子元素是span.2，我想修改span.2的样 ...

对应你上面的问题，你这个例子举得不对
正确的例子应该是，不同父元素的，比如
<div class="ex1"><p >测试1</p></div>
<div class="ex2"><p >测试2</p></div>
.ex1 p {}这个选定第一个p标签
.ex2 p {}这个选中第二个p标签

你可以搜索组合选择符去了解下

hyqq2015 · 发表于 2018-4-27 16:53:32

须佐之男发表于 2018-4-27 15:42
往上找不同的父元素或祖先元素，然后组合选择，我试了，这个是可以的。

这个方法效率更高。

sunset · 发表于 2018-4-27 19:10:16

本帖最后由 sunset 于 2018-4-27 19:14 编辑

须佐之男发表于 2018-4-27 16:02
对应你上面的问题，你这个例子举得不对
正确的例子应该是，不同父元素的，比如
测试1

这两个Chinese-text我实在区分不开来，你能不能帮我看看应该怎么加以区分？

他俩都是<p>里面的<span>标签，并且span的class也一样，该怎么办

simonfire · 发表于 2018-4-27 19:38:13

本帖最后由须佐之男于 2018-4-27 20:13 编辑

sunset 发表于 2018-4-27 19:10
这两个Chinese-text我实在区分不开来，你能不能帮我看看应该怎么加以区分？
他俩都是里面的标 ...

.note .chinese-text {}，只选定你图一的内容，意思就是类名note下的chinese-text类，不在类名note下的就不选中。
不直接给出选择器是想着你自己看看相关文档自己就会了，而且会学到其他方法。注：选中这个有多种办法，这只是其中一个。

看我4楼的回复，不同的父元素或祖先元素，父元素相同就往上找（至少在你给的这个例子里是能找到不同的）。

sunset · 发表于 2018-4-27 20:51:44

须佐之男发表于 2018-4-27 19:38
.note .chinese-text {}，只选定你图一的内容，意思就是类名note下的chinese-text类，不在类名note下的就 ...

纠正了自己的一个错误之后全部分清楚了。
原来我之前写的表达式一直没反应是因为我把图中的高亮部分整个地都复制了过去，原来只要复制前面的那一部分就可以了。

这里面有什么规定吗？不能带空格？

simonfire · 发表于 2018-4-27 21:13:31

本帖最后由须佐之男于 2018-4-27 21:26 编辑

sunset 发表于 2018-4-27 20:51
纠正了自己的一个错误之后全部分清楚了。
原来我之前写的表达式一直没反应是因为我把图中的高亮部分整个 ...

图上你选中的部分，在html中意思是同时有两个类名，css中你单独使用哪一个都能选中它，同时使用且加空格就变成后代选择了，.def_cn .cn_after选定的是def_cn类下的cn_after类。

去看看这个http://www.runoob.com/css/css-combinators.html，还能直接在线看效果

dfliaoyue · 发表于 2018-4-28 19:09:29

通用点说，不改动html情况下，主要是两种办法。
一个是找父元素，一层层往上找。写css时写精确些。不同情况下写法的区别，可以参照别人的css揣摩、搜索，自己试试就知道了。比如<div class="a">写作“div.a”（没空格)，<a><b></b></a>中的b写作“a b”，<span class="a"><span class="b"></span></span>中的b写作“.a .b” （有空格）。类似的自己揣摩吧，再结合浏览器检查看看有没有生效，如果是被哪一个style覆盖了(那就写得更精细点)，或是写错了。
另一个是利用选择器。比如同一级下紧跟在a后面的b，可以用a + b来控制；同一级下a后面的所有b，可以用a ~ b来控制。如此种种，但感觉上多用于比较精细的控制，或是词典结构复杂/混乱造成的无奈选择。

09rmb · 发表于 2018-4-29 15:25:13

Yyang. 发表于 2018-4-29 09:24
我写了可以单独控制，你试试吧
.note.type-note.no-before.example li p {
color: black;

给力啊，看起来好多代码

[求助] 【提问】关于css中组合选择式的表达方法

评分

评分

评分

评分

评分

评分

评分