শিশু উপাদানগুলিতে সিএসএস স্টাইল প্রয়োগ করুন

232

আমি একটি নির্দিষ্ট শ্রেণীর সাথে কেবল ডিআইভির ভিতরে টেবিলের শৈলীগুলি প্রয়োগ করতে চাই:

দ্রষ্টব্য: আমি বরং শিশুদের উপাদানগুলির জন্য সিএসএস-নির্বাচক ব্যবহার করব।

কেন # 1 কাজ করে এবং # 2 কাজ করে না?

1:

div.test th, div.test td, div.test caption {padding:40px 100px 40px 50px;}

2:

div.test th, td, caption {padding:40px 100px 40px 50px;}

এইচটিএমএল:

<html>
    <head>
        <style>
            div.test > th, td, caption {padding:40px 100px 40px 50px;}
        </style>
    </head>
    <body>
        <div>
            <table border="2">
                <tr><td>some</td></tr>
                <tr><td>data</td></tr>
                <tr><td>here</td></tr>
            </table>
        </div>
        <div class="test">
            <table  border="2">
                <tr><td>some</td></tr>
                <tr><td>data</td></tr>
                <tr><td>here</td></tr>
            </table>
        </div>
    </body>
</html>

আমি কি ভুল করছি?

css css-selectors

— রোমান মি
সূত্র

ভুলে যাবেন না যে>, + এবং [] নির্বাচকগুলি আই 6 এবং তার চেয়ে কম ক্ষেত্রে অনুপলব্ধ।

— এরিক 20

309

এই কোডটি " div.test th, td, caption {padding:40px 100px 40px 50px;}" সমস্ত উপাদান এবং সমস্ত উপাদান ছাড়াও নামের একটি শ্রেণি সহ একটি উপাদান thদ্বারা থাকা সমস্ত উপাদানগুলিতে একটি বিধি প্রয়োগ করে।divtest td caption

এটি "সমস্ত td, thএবং captionউপাদানগুলি যা divএকটি শ্রেণীর সাথে একটি উপাদান দ্বারা অন্তর্ভুক্ত রয়েছে " হিসাবে একই নয় test। এটি সম্পাদন করার জন্য আপনার নির্বাচকদের পরিবর্তন করতে হবে:

' >' পুরানো কিছু ব্রাউজার সম্পূর্ণরূপে সমর্থিত নয় (আমি আপনাকে দেখছি, ইন্টারনেট এক্সপ্লোরার)।

div.test th,
div.test td,
div.test caption {
    padding: 40px 100px 40px 50px;
}

— কেন ব্রাউনিং
সূত্র

ডিভ.টেস্ট 3 বার লেখার কোন উপায় আছে?

— রোমান এম

2

@ আরএম না। নিয়মের কোনও নেস্টিং বা 'টাইপ গ্রুপিং' এর সাথে নেই

— এসব্লুন্ডি

2

@ রোমানাম 3 বার 'ডিভস্টেস্ট' লেখার উপায় রয়েছে! সিএসএস ফাইল লেখার জন্য সাস বা কম ফ্রেমওয়ার্ক ব্যবহার করে দেখুন! :)

— গিলিব

@ রোমানাম - আমার উত্তরটি দেখুন, সমস্ত শিশুদের পুনরাবৃত্তি প্রতিরোধ করতে লক্ষ্যবস্তু করতে * ব্যবহার করে, বা প্রত্যক্ষ বাচ্চাদের জন্য .class> * ব্যবহার করে। এটা কঠিন না.

— রিচার্ড এডওয়ার্ডস

আইআই-তে সমর্থন না দেওয়া সম্পর্কে ইঙ্গিতটি খুব সহায়ক ছিল, আমি আইটিএস-এ ডিটিসিওর টেক্সট-এর জন্য কিছু সিএসএস কাজ করার চেষ্টা করছিলাম কিন্তু এটি কাজ করছে না, তাদের পার্সার আই এর চেয়ে খারাপ।

— সাইরেনস

123

.test * {padding: 40px 100px 40px 50px;}

— রিচার্ড এডওয়ার্ডস
সূত্র

11

দ্রষ্টব্য, * এখানে এর অর্থ হ'ল আপনি এটিকে অন্য কোনও নির্দিষ্ট নিয়মের সাথে ওভাররাইড করতে পারবেন না কারণ .test *এটি প্রতিটি সন্তানের উপাদানগুলির জন্য সুনির্দিষ্ট নিয়ম। অন্য কথায়, মনে রাখবেন যে আপনি যা কিছু ভিতরে রেখেছেন .test *তা কোনও নির্দিষ্ট সিএসএস নিয়ম দ্বারা ওভাররাইড করা যাবে না কারণ test *সর্বাধিক সুনির্দিষ্ট নিয়ম।

— ভাদস্বর

81

> নির্বাচক কেবল বংশধরদের সাথে নয়, সরাসরি বাচ্চাদের সাথে মেলে।

তুমি চাও

div.test th, td, caption {}

বা সম্ভবত আরও

div.test th, div.test td, div.test caption {}

সম্পাদনা:

প্রথমটি বলে

  div.test th, /* any <th> underneath a <div class="test"> */
  td,          /* or any <td> anywhere at all */
  caption      /* or any <caption> */

যেখানে দ্বিতীয়টি বলে

  div.test th,     /* any <th> underneath a <div class="test"> */
  div.test td,     /* or any <td> underneath a <div class="test"> */
  div.test caption /* or any <caption> underneath a <div class="test">  */

আপনার মূল div.test > thবলছেন any <th> which is a **direct** child of <div class="test">, যার মানে মিলিয়ে নেবে <div class="test"><th>this</th></div>কিন্তু মেলে না হবে<div class="test"><table><th>this</th></table></div>

— গ্রেগ
সূত্র

fww, কারণ যে নির্বাচকের টিডি এবং ক্যাপশনটি "বোবা" - তারা ডিভস্টেস্টের বিষয়ে বিবেচনা না করে যে কোনও প্রদত্ত / ক্যাপশনের সাথে মিলবে। এই জাতীয় অন্ধ লক্ষ্যমাত্রা আপনি সর্বাধিক সাধারণ শৈলী ব্যতীত সিএসএসে যা চান তা খুব কমই হয়।

— আনানকাটা

@ নানাকাতা: এটি সিএসএস কাঠামোর একটি অংশ, আমি এটি স্থানীয়ভাবে প্রয়োগ করার চেষ্টা করছি

— রোমান এম

10

আপনি যদি সমস্ত শিশুতে শৈলী যুক্ত করতে চান এবং এইচটিএমএল ট্যাগের জন্য কোনও স্পেসিফিকেশন না চান তবে এটি ব্যবহার করুন।

পিতামাতার ট্যাগ div.parent

শিশু ট্যাগ div.parent মত ভিতরে <a>, <input>, <label>ইত্যাদি

কোড: div.parent * {color: #045123!important;}

আপনি গুরুত্বপূর্ণ অপসারণ করতে পারেন, এটি প্রয়োজন হয় না

— user1369111
সূত্র

7

এখানে কিছু কোড লিখেছি যা আমি সম্প্রতি লিখেছি। আমি মনে করি এটি সিউডোক্লাসের সাথে শ্রেণি / আইডি নামের সংমিশ্রনের প্রাথমিক ব্যাখ্যা সরবরাহ করে provides

.content {
  width: 800px;
  border: 1px solid black;
  border-radius: 10px;
  box-shadow: 0 0 5px 2px grey;
  margin: 30px auto 20px auto;
  /*height:200px;*/

}
p.red {
  color: red;
}
p.blue {
  color: blue;
}
p#orange {
  color: orange;
}
p#green {
  color: green;
}

<!DOCTYPE html>
<html>

<head>
  <title>Class practice</title>
  <link href="wrench_favicon.ico" rel="icon" type="image/x-icon" />
</head>

<body>
  <div class="content">
    <p id="orange">orange</p>
    <p id="green">green</p>
    <p class="red">red</p>
    <p class="blue">blue</p>
  </div>
</body>

</html>

স্নিপেট প্রসারিত করুন

— ছাপ
সূত্র

সিএসএস যেমন একক লাইন মন্তব্যের অনুমতি দেয় না //। Stackoverflow.com/questions/4656546/…

— ভোলকার ই।

4

div.test td, div.test caption, div.test th

আমার জন্য কাজ কর.

শিশু নির্বাচনকারী> আই 6 তে কাজ করে না।

— Traingamer
সূত্র

2

যতদূর আমি এটি জানি:

div[class=yourclass] table {  your style here; }

বা আপনার ক্ষেত্রে এমনকি এটি:

div.yourclass table { your style here; }

(তবে এটি yourclassসেই উপাদানগুলির সাথে কাজ করবে যা সম্ভবত এটি নাও হতে পারে div) কেবলমাত্র অভ্যন্তরের টেবিলগুলিতে প্রভাব ফেলবে yourclass। এবং কেন বলেছেন যে,>> সর্বত্র সমর্থিত নয় (এবং div[class=yourclass]খুব, সুতরাং ক্লাসগুলির জন্য বিন্দু চিহ্নটি ব্যবহার করুন)।

— tunnuz
সূত্র

0

এই কোডটি এসসিএসএস সিনট্যাক্স ব্যবহার করে কৌশলটিও করতে পারে

.parent {
  & > * {
    margin-right: 15px;
    &:last-child {
      margin-right: 0;
    }
  }
}

— greguintow
সূত্র