ใช้นิพจน์ทั่วไปใน css?

ฉันมีเพจ html ที่มี div ที่มีidของแบบฟอร์มs1 , s2และอื่น ๆ

<div id="sections">
   <div id="s1">...</div>
   <div id="s2">...</div>
   ...
</div>

ฉันต้องการใช้คุณสมบัติ css กับส่วนย่อยของส่วน / div เหล่านี้ (ขึ้นอยู่กับ id) อย่างไรก็ตามทุกครั้งที่เพิ่มdivฉันต้องเพิ่ม css สำหรับส่วนแยกกันเช่นนี้

//css
#s1{
...
}

มีบางอย่างเช่นนิพจน์ทั่วไปใน css ที่ฉันสามารถใช้สไตล์กับชุดของdivได้หรือไม่

คุณสามารถจัดการการเลือกองค์ประกอบเหล่านั้นได้โดยไม่ต้องมี regex ในรูปแบบใด ๆ ตามที่คำตอบก่อนหน้านี้แสดง แต่เพื่อตอบคำถามโดยตรงใช่คุณสามารถใช้รูปแบบนิพจน์ทั่วไปในตัวเลือก:

#sections div[id^='s'] {
    color: red;  
}

ที่ระบุว่าเลือกองค์ประกอบ div ใด ๆ ภายใน #sections div ที่มี ID ขึ้นต้นด้วยตัวอักษร 's'

ดูซอนี่

W3 เอกสารเลือก CSS ที่นี่

ในฐานะที่เป็นส่วนเติมเต็มของคำตอบนี้คุณสามารถใช้$เพื่อรับการจับคู่สิ้นสุดและ*เพื่อให้ได้การจับคู่ที่ใดก็ได้ในชื่อค่า

ตรงกับทุกที่: .col-md, .left-col, .col, .tricolorฯลฯ

[class*="col"]

ตรงกับที่จุดเริ่มต้น: .col-md, .col-sm-6ฯลฯ

[class^="col-"]

ตรงกับที่ตอนจบ: .left-col, .right-colฯลฯ

[class$="-col"]

รหัสจะหมายถึงการระบุองค์ประกอบที่ไม่ซ้ำกัน สไตล์ใด ๆ ที่ใช้กับองค์ประกอบนั้นก็ควรไม่ซ้ำกับองค์ประกอบนั้น หากคุณมีสไตล์ที่ต้องการใช้กับองค์ประกอบจำนวนมากคุณควรเพิ่มคลาสให้กับองค์ประกอบทั้งหมดแทนที่จะใช้ตัวเลือก ID ...

<div id="sections">
   <div id="s1" class="sec">...</div>
   <div id="s2" class="sec">...</div>
   ...
</div>

และ

.sec {
    ...
}

หรือในกรณีเฉพาะของคุณคุณสามารถเลือกหน่วยงานทั้งหมดภายในคอนเทนเนอร์หลักของคุณได้หากไม่มีอะไรอยู่ข้างในเช่นนั้น:

#sections > div {
    ...
}

ก่อนอื่นมีหลายวิธีในการจับคู่รายการภายในเอกสาร HTML เริ่มต้นด้วยการอ้างอิงนี้เพื่อดูตัวเลือก / รูปแบบที่มีอยู่ซึ่งคุณสามารถใช้เพื่อใช้กฎสไตล์กับองค์ประกอบได้

http://www.w3.org/TR/selectors/

ตรงกับทุกdivs #mainซึ่งเป็นทายาทสายตรงของ

#main > div

ตรงกับทุกdivs #mainซึ่งเป็นทายาทสายตรงหรือทางอ้อม

#main div

การแข่งขันครั้งแรกซึ่งเป็นทายาทสายตรงของdiv#sections

#main > div:first-child

จับคู่divกับแอตทริบิวต์เฉพาะ

#main > div[foo="bar"]

คุณสามารถ 'เพิ่มคลาสให้กับแต่ละ DIV ของคุณและใช้กฎกับคลาสด้วยวิธีนี้:

HTML:

<div class="myclass" id="s1">...</div>
<div class="myclass" id="s2">...</div>

CSS:

//css
.myclass
{
   ...
}

ฉันมักจะใช้*เมื่อฉันต้องการรับสตริงทั้งหมดที่มีอักขระที่ต้องการ

* ใช้ใน regex แทนที่อักขระทั้งหมด

ใช้ใน SASS หรือ CSS จะเป็นอย่างไร[id*="s"]และจะได้รับองค์ประกอบ DOM ทั้งหมดที่มี id "s ...... "

/* add red color to all div with id s .... elements */

div[id^="s"] {
    color: red;
}

ลองใช้นิพจน์ทั่วไป CSS ทั่วไปของฉัน

(([a-z]{5,6}.*?\))|([\d.+-]?)(?![a-z\s#.()%])(\d?\.?\d?)?[a-z\d%]+)|(url\([/"'][a-z:/.]*['")]\))|(rgb|hsl)a?\(\d+%?,?\s?\d+%?,?\s?\d+%?(,\s?\d+\.?\d?)?\)|(#(\w|[\d]){3,8})|([\w]{3,8}(?=.*-))

สาธิตhttps://regexr.com/4a22i

มีอีกวิธีง่ายๆในการเลือกองค์ประกอบเฉพาะใน css ด้วย ...

#s1, #s2, #s3 {
    // set css attributes here
}

หากคุณมีองค์ประกอบเพียงไม่กี่อย่างให้เลือกและไม่ต้องการรบกวนการเรียนสิ่งนี้ก็จะทำงานได้ง่ายเช่นกัน