ลิงก์ยังคงถูกขีดเส้นใต้แม้ว่าจะตั้งค่าการตกแต่งข้อความเป็นไม่มีก็ตาม

ฉันพบคำถามที่เกี่ยวข้องสองสามข้อบนไซต์นี้ แต่ดูเหมือนว่าคำถามทั้งหมดจะเกิดจากปัญหาเกี่ยวกับตัวเลือก แต่ฉันไม่คิดว่านั่นคือปัญหา
ในกรณีของฉัน Google Chrome และ Safari ต่างก็แจ้ง ฉันว่ารูปแบบที่คำนวณสำหรับแท็ก a ที่ต้องการมี text-decoration:none
การเลือกแท็ก a และการตั้งค่า text-decoration:none ไม่ได้สร้างความแตกต่างแต่อย่างใดเนื่องจากมี text-decoration:none อยู่แล้ว
หน้าเว็บได้รับการออกแบบจากสไตล์ชีตที่แตกต่างกันสองสามแบบ รวมถึงสไตล์จากสไตล์ชีตของฉันด้วย ธีมบล็อก หนึ่งธีมจาก การนำเข้าเนมสเปซของ Materialize กรอบงานและสุดท้ายคือสไตล์ชีตที่ผู้ใช้กำหนดซึ่งฉัน ว่างเปล่า (ดังนั้นฉันจึงไม่ได้รวม CSS ในโพสต์นี้)

การสาธิต: http://codepen.io/prashcr/pen/RaBKGY

นี่คือ HTML:

    <body class="site animated fade-in-down">
     <div class="site-wrap center">

    <div class="post p2 p-responsive wrap" role="main">
      <div class="measure">
        <div class="mcss">
  <div class="container">
    <div class="row">
      <div class="col s12 m7">
        <div class="card">
          <div class="card-image waves-effect waves-block waves-light">
            <img class="activator" src="http://materializecss.com/images/office.jpg">
          </div>
          <div class="card-content">
            <span class="card-title activator grey-text text-darken-4">
              Kanban<i class="material-icons right">more_vert</i>
            </span>
            <p><a href="/th#!">This is a link</a></p>
          </div>
          <div class="card-action">
            <a href="/th#">This is a link</a>
            <a href="/th#">This is a link</a>
          </div>
          <div class="card-reveal">
            <span class="card-title grey-text text-darken-4">
              Card Title<i class="material-icons right">close</i>
            </span>
            <p>Here is some more information about this product that is only revealed once clicked on.</p>
          </div>
        </div>
      </div>
      <div class="col s12 m5">
        <div class="card">
          <div class="card-image waves-effect waves-block waves-light">
            <img class="activator" src="http://materializecss.com/images/office.jpg">
          </div>
          <div class="card-content">
            <span class="card-title activator grey-text text-darken-4">
              Camper News<i class="material-icons right">more_vert</i>
            </span>
            <p><a href="/th#!">This is a link</a></p>
          </div>
          <div class="card-action">
            <a href="/th#">This is a link</a>
            <a href="/th#">This is a link</a>
          </div>
          <div class="card-reveal">
            <span class="card-title grey-text text-darken-4">
              Card Title<i class="material-icons right">close</i>
            </span>
            <p>Here is some more information about this product that is only revealed once clicked on.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

      </div>
    </div>
  </div>
</body>

css materialize
person Prashanth Chandra    schedule 22.04.2016    source แหล่งที่มา

คำตอบ (3)


arrow_upward
7
arrow_downward

มันไม่ใช่การตกแต่งข้อความที่นั่น มันเป็นภาพพื้นหลัง เครื่องมือ Chrome dev แสดงสิ่งนี้:

a {
    color: #0076df;
    background-image: linear-gradient(to top, transparent 13%, rgba(0, 118, 223, 0.8) 13%, rgba(0, 118, 223, 0.8) 18%, transparent 17%);
    text-shadow: white 1px 0px 0px, white -1px 0px 0px;
}

เมื่อฉันปิดการใช้งานคุณสมบัติbackground-image ในเครื่องมือ dev เส้นสีน้ำเงินจะหายไป

person Julia    schedule 22.04.2016
comment
คุณเอาชนะฉันประมาณ 20 วินาที @Julia - person Andy Hoffman; 22.04.2016
comment
และผมอีกประมาณ 10 วินาที :P งานดี (หรือความเร็วดี) - person Pratyush Vashisht; 22.04.2016
comment
ในที่สุดเมื่อฉันประสบความสำเร็จในการเขียนคำตอบก่อน: D - person Julia; 22.04.2016

arrow_upward
3
arrow_downward

ตกลงนี่อาจช่วยคุณได้

.mcss a:active, .mcss a:hover {background-image: none;} .mcss a {color: #039be5;background-image: none;text-decoration: none;}

person Sus Hill    schedule 22.04.2016

arrow_upward
0
arrow_downward

เพิ่ม background-image: none; ลงใน .mcss a

.mcss a {
    color: #039be5;
    text-decoration: none;
    background-image: none;
}
person Ismail Farooq    schedule 22.04.2016