掌上百科 - PDAWIKI

 找回密码
 免费注册
查看: 484|回复: 13

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

[复制链接]
  • TA的每日心情
    无聊
    2018-8-11 10:00
  • 签到天数: 39 天

    [LV.5]常住居民I

    发表于 2018-4-27 13:22:56 | 显示全部楼层 |阅读模式
    本帖最后由 sunset 于 2018-4-27 20:04 编辑 7 `# M0 t6 Z0 r0 k

    3 C) w9 [) `$ W5 ^6 K8 t$ ^如下面的三张图:' X9 R* d7 G9 [
    图中选择的是柯林斯词典中不同模块中的中文字段,这三个地方的中文全都是由span.chinese-text 控制的。选中了其中的一个,对其样式进行修改,其他两处的样式也会跟随着一起变动。有没有什么办法,能将这三个地方的中文样式分开控制?附件中提供了html、css文件,麻烦各位大神了。

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有帐号?免费注册

    x
  • TA的每日心情

    2018-6-16 18:13
  • 签到天数: 158 天

    [LV.7]常住居民III

    发表于 2018-4-29 09:24:14 | 显示全部楼层
    本帖最后由 Yyang. 于 2018-4-29 09:31 编辑
    3 b& T( m* u0 E+ A! H- s4 W6 @  l/ I/ D5 @
    我写了可以单独控制,你试试吧: F9 i+ S% o2 }+ |5 k$ m
    .note.type-note.no-before.example li p {5 B* u7 _0 k0 W- x
        color: black;, X$ z% b/ Z6 S
    }' w& p/ v3 H& Y9 ]4 F* d$ L

    ( G6 u7 X2 f' O% r1 j0 {0 K, {  M( x: c  h* T  b) N
    .collins_en_cn.example .chinese-text {
    0 |# o- O& `0 U. C/ a# ~: ~    color: slategray;
    8 \' B9 C/ \0 G  \9 s}
    . T% q! q2 u' z0 I
    ' c3 Q+ L4 I  C0 U5 xspan.def_cn.cn_after .chinese-text {5 n) T$ _) y- y, }" s* ^
        color: #e05e00;
    : W7 C) `( r7 r6 C# O: L; m    font-size: 90%;7 Q7 s. a. |  c# R5 r4 ?
        font-weight: bold;0 `$ A  z& C9 Z* T6 X
    }
    % {( t7 y$ m9 p9 F$ d* _1 z. J/ c4 q/ R! `
    span.def_cn.cn_after {
    . k1 A7 o* Z; Q0 l' G9 B4 k. O    color: #e05e00;
    8 n$ B# ?% R1 j6 Q$ S! ~    font-size: 95%;
    6 \( L6 c# e+ R6 T6 J4 g    font-weight: bold;
    6 X' l6 y! N6 K  V" K}0 G! k' ^' U/ o7 v! Q

    评分

    1

    查看全部评分

  • TA的每日心情
    开心
    2020-10-25 03:32
  • 签到天数: 395 天

    [LV.9]以坛为家II

    发表于 2018-4-27 14:10:50 | 显示全部楼层
    提供一个思路:
    7 O# M1 q, W1 o5 O# \# Q1 g) M2 V) L9 i/ k+ [' l
    这个可以通过找出这3处chinese-text的规律,然后使用正则替换,分别替换为chinese-text1,chinese-text2,chinese-text3,或者保留一处不变,替换其他两处,分别为chinese-text,chinese-text1,chinese-text2
    & ?! o+ e9 O. {/ r2 n* r% k) e: @! }9 t  {- a% B8 }
    然后再分别写出css
    1 l" F9 e. a3 M
    1 H. {8 b7 p8 H- X: o5 b- D( Z. B关键是找出规律。

    评分

    1

    查看全部评分

  • TA的每日心情
    无聊
    2018-8-11 10:00
  • 签到天数: 39 天

    [LV.5]常住居民I

     楼主| 发表于 2018-4-27 14:59:28 | 显示全部楼层
    hyqq2015 发表于 2018-4-27 14:10
    7 g& Y% w. R( R5 G% I2 G提供一个思路:
    7 R# n, v6 N! w9 I4 Y0 I
    ) |( w9 [4 Z) ^- U& V这个可以通过找出这3处chinese-text的规律,然后使用正则替换,分别替换为chinese-text1, ...
    , L( G# \. S. w% F
    好吧,原来还是必须要去修改原html
  • TA的每日心情
    开心
    2019-1-21 17:00
  • 签到天数: 376 天

    [LV.9]以坛为家II

    发表于 2018-4-27 15:42:28 | 显示全部楼层
    往上找不同的父元素或祖先元素,然后组合选择,我试了,这个是可以的。

    评分

    1

    查看全部评分

  • TA的每日心情
    无聊
    2018-8-11 10:00
  • 签到天数: 39 天

    [LV.5]常住居民I

     楼主| 发表于 2018-4-27 15:49:16 | 显示全部楼层
    须佐之男 发表于 2018-4-27 15:42
    2 o7 S* n/ j) C4 \) ~往上找不同的父元素或祖先元素,然后组合选择,我试了,这个是可以的。
    0 B- W, l( D! f
    我就是组合选择的格式不会写,你能举个例子吗?1 H! ~/ Q% j; v! F# W1 K& \, W) h: |( T! @
    比如父元素是div.1,子元素是span.2,我想修改span.2的样式,应该怎么写?
  • TA的每日心情
    开心
    2019-1-21 17:00
  • 签到天数: 376 天

    [LV.9]以坛为家II

    发表于 2018-4-27 16:02:17 | 显示全部楼层
    本帖最后由 须佐之男 于 2018-4-27 16:04 编辑 , G1 X2 W( Z3 |* o( q2 e
    sunset 发表于 2018-4-27 15:492 L# Q, g: G# X. [6 _
    我就是组合选择的格式不会写,你能举个例子吗?
    * R% w2 T) X3 z. [% X+ s# c/ X+ i比如父元素是div.1,子元素是span.2,我想修改span.2的样 ...
    5 \3 R8 I4 ^* s- V
    4 d. k& t  y3 n  C
    对应你上面的问题,你这个例子举得不对9 W' ~' s/ Y1 A" ~( v3 ?
    正确的例子应该是,不同父元素的,比如& {/ `. y8 X/ _1 k4 }
    <div class="ex1"><p >测试1</p></div>7 P9 A% O$ A  z( w) I8 x- W
    <div class="ex2"><p >测试2</p></div>
    7 @7 P+ M: p% G) Y.ex1 p {}这个选定第一个p标签
    # P  o# Z5 k2 S. Y5 w.ex2 p {}这个选中第二个p标签
    5 }, S" m& ]) F$ n  ~% n6 I  r4 T0 z' z& [

    3 [; u$ U1 N& d4 @1 {你可以搜索组合选择符去了解下

    评分

    1

    查看全部评分

  • TA的每日心情
    开心
    2020-10-25 03:32
  • 签到天数: 395 天

    [LV.9]以坛为家II

    发表于 2018-4-27 16:53:32 | 显示全部楼层
    须佐之男 发表于 2018-4-27 15:42
    1 F2 E( Y  i# H0 i$ {往上找不同的父元素或祖先元素,然后组合选择,我试了,这个是可以的。

    ( K3 }+ Q* D: g9 @4 W这个方法效率更高。
  • TA的每日心情
    无聊
    2018-8-11 10:00
  • 签到天数: 39 天

    [LV.5]常住居民I

     楼主| 发表于 2018-4-27 19:10:16 | 显示全部楼层
    本帖最后由 sunset 于 2018-4-27 19:14 编辑 , H* u5 [- s! W- |7 Z# \5 |
    须佐之男 发表于 2018-4-27 16:02: f$ A' A& X+ X6 i3 N
    对应你上面的问题,你这个例子举得不对& b! Y/ P9 l9 ^* b
    正确的例子应该是,不同父元素的,比如
    / t( ?) g9 w5 ?' X1 D. K测试1

      s, @5 g" w% F& E
    1 Z- y. l6 l. G. w这两个Chinese-text我实在区分不开来,你能不能帮我看看应该怎么加以区分?
    5 `8 u* f: g) c7 ?他俩都是<p>里面的<span>标签,并且span的class也一样,该怎么办

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有帐号?免费注册

    x
  • TA的每日心情
    开心
    2019-1-21 17:00
  • 签到天数: 376 天

    [LV.9]以坛为家II

    发表于 2018-4-27 19:38:13 | 显示全部楼层
    本帖最后由 须佐之男 于 2018-4-27 20:13 编辑 ) t" Q3 `& D/ z/ S$ {; B8 y) O
    sunset 发表于 2018-4-27 19:10
    / B4 z8 s. i) |% q% T这两个Chinese-text我实在区分不开来,你能不能帮我看看应该怎么加以区分?
    4 d# D( L5 s0 g1 i$ y他俩都是里面的标 ...

    0 W! d- k1 e  }) y) z1 W+ G, l0 m3 p* F2 h; i! W! Z: P
    .note .chinese-text {},只选定你图一的内容,意思就是类名note下的chinese-text类,不在类名note下的就不选中。+ F/ h) H1 P& y3 s
    不直接给出选择器是想着你自己看看相关文档自己就会了,而且会学到其他方法。注:选中这个有多种办法,这只是其中一个。; T# P; M& A1 h7 P- G
    ; u( a6 H# n' N- d
    看我4楼的回复,不同的父元素或祖先元素,父元素相同就往上找(至少在你给的这个例子里是能找到不同的)。
    , @) I  Z6 N, k  G' W+ ]+ v3 ?# v
    ) W, k9 l! q$ v% {/ v

    评分

    1

    查看全部评分

  • TA的每日心情
    无聊
    2018-8-11 10:00
  • 签到天数: 39 天

    [LV.5]常住居民I

     楼主| 发表于 2018-4-27 20:51:44 | 显示全部楼层
    须佐之男 发表于 2018-4-27 19:38
      A6 O! H* n! W. ].note .chinese-text {},只选定你图一的内容,意思就是类名note下的chinese-text类,不在类名note下的就 ...

    ! c: \6 C! J' t3 `0 x6 w% D纠正了自己的一个错误之后全部分清楚了。$ A. I9 `  O; d5 G
    原来我之前写的表达式一直没反应是因为我把图中的高亮部分整个地都复制了过去,原来只要复制前面的那一部分就可以了。
    3 J% R: j/ P7 j这里面有什么规定吗?不能带空格?

    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有帐号?免费注册

    x
  • TA的每日心情
    开心
    2019-1-21 17:00
  • 签到天数: 376 天

    [LV.9]以坛为家II

    发表于 2018-4-27 21:13:31 | 显示全部楼层
    本帖最后由 须佐之男 于 2018-4-27 21:26 编辑 ' K- }( x3 o  g# }( }$ O
    sunset 发表于 2018-4-27 20:51
    ' ^% {) P* C' y* i9 h# O# ?纠正了自己的一个错误之后全部分清楚了。& Y- @4 c3 H# B8 G/ C
    原来我之前写的表达式一直没反应是因为我把图中的高亮部分整个 ...
    5 P0 {4 n% g( \# c7 R& ~# C

    ) Q% V- u* y* c" e# e! d* W% ~/ A+ T图上你选中的部分,在html中意思是同时有两个类名,css中你单独使用哪一个都能选中它,同时使用且加空格就变成后代选择了,.def_cn .cn_after选定的是def_cn类下的cn_after类。. R: }, U1 c; D
    - _+ S" ^* U+ [8 ]8 W
    去看看这个http://www.runoob.com/css/css-combinators.html,还能直接在线看效果

    评分

    1

    查看全部评分

  • TA的每日心情
    开心
    2019-1-18 23:55
  • 签到天数: 230 天

    [LV.7]常住居民III

    发表于 2018-4-28 19:09:29 | 显示全部楼层
    通用点说,不改动html情况下,主要是两种办法。  Z9 Y) C) h# t- r: l  Q' Q9 B: b
    一个是找父元素,一层层往上找。写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/ X6 g% p% t5 j' u3 Q另一个是利用选择器。比如同一级下紧跟在a后面的b,可以用a + b来控制;同一级下a后面的所有b,可以用a ~ b来控制。如此种种,但感觉上多用于比较精细的控制,或是词典结构复杂/混乱造成的无奈选择。

    评分

    1

    查看全部评分

  • TA的每日心情
    开心
    2018-8-30 07:34
  • 签到天数: 135 天

    [LV.7]常住居民III

    发表于 2018-4-29 15:25:13 | 显示全部楼层
    Yyang. 发表于 2018-4-29 09:24
    ( h7 V5 F* w  ~' D; b# P, |7 }我写了可以单独控制,你试试吧
    " f: T& T& Z3 x  G$ H* Q& A.note.type-note.no-before.example li p {. ^/ c$ [# G( E  T! K  c
        color: black;

    9 l9 ^7 A7 w9 W& S1 N: `9 P6 C给力啊,看起来好多代码  
    您需要登录后才可以回帖 登录 | 免费注册

    本版积分规则

    顶部qrcode底部
    关注掌上百科官方微信公众号送积分
    关注掌上百科官方微信公众号
    关注微信公众号 pdawiki,获取邀请码,看文抢积分,抽奖得浮云! Follow our Wechat official account "pdawiki", get invitation codes, and play the lottery to earn points (积分)!

    小黑屋|手机版|Archiver|PDAWIKI |网站地图

    GMT+8, 2021-5-12 02:58 , Processed in 0.180777 second(s), 21 queries , MemCache On.

    Powered by Discuz! X3.4

    Copyright © 2001-2020, Tencent Cloud.

    快速回复 返回顶部 返回列表