Munu

Contextual selectors การประกาศ selector ซ้อนกัน โดยเคาะ spacebar

หน้าแรก » ข่าวสาร » Contextual selectors การประกาศ selector ซ้อนกัน โดยเคาะ spacebar

Contextual selectors

การประกาศ selector ซ้อนกัน โดยเคาะ spacebar ทำให้สามารถสืบทอดคุณสมบัติเดิม และเพิ่มคุณสมบัติที่แตกต่างได้ ดูตัวอย่างเพื่อให้เข้าใจมากขึ้นค่ะ

Example
<html>
<head>
<style type=”text/css”>
h1 { color: blue; background-color:#FFFFCC }
h1 em { color: red }
h1 u { color:green}
</style>
</head>
<body> <h1>วิธีรักษาสุขภาพ</h1>
<h1>วิธีลดน้ำหนัก</h1>
<h1><em>วิธีรักษาสุขภาพ</em></h1>
<h1><u>วิธีรักษาสุขภาพ</u></h1>
</body>
</html>

Output
ข้อความใน <h1> จะเป็นสีน้ำเงิน แต่ถ้ามีการกำหนดว่าเป็นตัวเอียงแล้ว ข้อความใน <h1> จะเป็นสีแดง หรือระบุว่าขีดเส้นใต้แล้วจะได้เป็นสีเขียว โดยที่รูปแบบพื้นหลังของ <h1> ยังคงอยู่
วิธีรักษาสุขภาพ
วิธีลดน้ำหนัก
วิธีรักษาสุขภาพ
วิธีรักษาสุขภาพ

อีกตัวอย่างหนึ่ง เพื่อแสดงให้เห็นประโยชน์ของการใช้ Contextual selectors

Example
<html>
<head>
<style type=”text/css”>
/*ให้ img ทั่วไป ขอบสีเทา หนา2*/
img {
border:solid;
border-width:2px;
border-color:#999999;
}

/*ให้ class borderimage มีขอบสีแดง หนา5 แต่ไม่ได้กำหนด HTML tag เฉพาะ*/
.borderimage {
border:solid;
border-width:5px;
border-color:red;
}

/*ให้ เฉพาะ tag <img> class imgspecial_box มีขอบสีแดง หนา5*/
#imgspecial_box img {
border:solid;
border-width:5px;
border-color:red;
}

</style>
</head>

<body>

<img src=”../images/star_icons.gif” />
<img src=”../images/star_icons.gif” />
<img src=”../images/star_icons.gif” />
<br><br>

แบบนี้ไม่ดี ต้องมาระบุ class borderimage ให้แต่ละรูป<br />
<img src=”../images/star_icons.gif” class=”borderimage” />
<img src=”../images/star_icons.gif” class=”borderimage” />
<img src=”../images/star_icons.gif” class=”borderimage” />
<br>
<br>

แบบนี้ดี img ที่อยู่ในส่วน div class imgspecial_box จะเป็นขอบแดง หนา5 ให้ทั้งหมด ไม่ต้องมากำหนดทีละรูป
<div id=”imgspecial_box”>
<img src=”../images/star_icons.gif” />
<img src=”../images/star_icons.gif” />
<img src=”../images/star_icons.gif” />
</div>

</body>
</html>

 

Output

 

แบบนี้ไม่ดี ต้องมาระบุ class borderimage ให้แต่ละรูป

แบบนี้ดี img ที่อยู่ในส่วน div class imgspecial_box จะเป็นขอบแดง หนา5 ให้ทั้งหมด ไม่ต้องมากำหนดทีละรูป

มาดูอีกตัวอย่างที่ไม่ดี คล้ายกับตัวอย่างข้างบน เป็นตัวอย่างที่ใช้ CSS มากเกินไป

Example
<html>
<head>
<title>ex_css_chapter07_3</title>
<style type=”text/css”>
a.boldlink { color:blue; font-weight:bold; }
</style>
</head>

<body>
<a href=”http://www.enjoyday.net/webtutorial/html/index.html” class=”boldlink”>HTML</a><br />
<a href=”http://www.enjoyday.net/webtutorial/css/index.html” class=”boldlink”>CSS</a><br />
<a href=”http://www.enjoyday.net/webtutorial/xhtml/index.html” class=”boldlink”>XHTML</a><br />
<a href=”http://www.enjoyday.net/webtutorial/javascript/index.html” class=”boldlink”>JavaScript</a>
</body>
</html>
แก้ไขใหม่เขียนแบบ Contextual selectors จะดีกว่าค่ะ
<html>
<head>
<title>ex_css_chapter07_3</title>
<style type=”text/css”>
#boldlink_box a { color:blue; font-weight:bold; }
</style>
</head>

<body>
<div id=”boldlink_box”>
<a href=”http://www.enjoyday.net/webtutorial/html/index.html”>HTML</a><br />
<a href=”http://www.enjoyday.net/webtutorial/css/index.html”>CSS</a><br />
<a href=”http://www.enjoyday.net/webtutorial/xhtml/index.html”>XHTML</a><br />
<a href=”http://www.enjoyday.net/webtutorial/javascript/index.html”>JavaScript</a> </div>
</body>
</html>
Output

HTML
CSS
XHTML
JavaScript

เรามีทีมงานผู้เชี่ยวชาญที่มีประสบการณ์ด้านเว็บไซต์

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

Call

082-493-2295

E-mail

Konyubyub@Gmail.com

Location

บริษัท ดีไซน์นำโชค จำกัด
58/146 หมู่ที่ 6 หมู่บ้านซื่อตรง คลอง13 ตำบลบึงน้ำรักษ์ อำเภอธัญบุรี จังหวัดปทุมธานี 12110

2014 Powered by IYATHAI.com
Tel: 082-493-2295 E-mail: Konyubyub@gmail.com