css nhắm mục tiêu các thẻ div cụ thể trong một trang web HTML lớn

Liên quan đến question here trước đó của tôi. Nếu tôi đang sử dụng mã HTML dưới đây như một phần của trang web, nơi có khả năng sẽ có nhiều thẻ div hơn, làm cách nào tôi có thể nhắm mục tiêu các div cụ thể này trong CSS của mình? Mẫu mà tôi nghĩ là tốt nhất là [Câu trả lời này] [2].css nhắm mục tiêu các thẻ div cụ thể trong một trang web HTML lớn

Tôi đã thêm thuộc tính Id để làm cho các div có thể lựa chọn hơn trong DOM HTML lớn ... Tôi không biết cách khác để làm cho chúng dễ phân biệt hơn. Nếu có một phương pháp tốt hơn để làm như vậy xin vui lòng cho tôi biết. Mục tiêu là áp dụng thiết kế CSS cho khoảng 6 phần tử thẻ div bên trong một trang web cổng thông tin chia sẻ lớn. Nếu có một cách chung chung hơn mà sẽ được mát mẻ vì vậy tôi có thể dễ dàng thêm nhiều phần hơn và sử dụng định dạng này trong tương lai ... Tôi có thể thêm một thuộc tính lớp cho mỗi yếu tố tôi muốn định dạng áp dụng, nhưng tôi không biết cú pháp.

Cách thiết kế web chuyên nghiệp để hoàn thành công việc này là gì?

<div id="projectName"> 
     Realtime Account Activiation 
</div> 

<div id="divAnnounce"> 
     Announcements 
</div>

Tôi có http://jsfiddle.net/eW532/1/

Tôi đang sử dụng mã dưới đây nhưng nhận được kết quả xấu mà toàn bộ chiều dài ngang có màu xanh nhưng không phải là chữ cái đầu tiên. Tôi đang cố gắng để có một phần tử html sử dụng hai lớp với nhau.

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <style type="text/css"> 
     .even_spacing { color: purple; 
         background-color: #d8da3d } 

     .first_letter { background:blue; 
         color:white; 
         padding:4px 0px 4px 5px;}   
    </style> 

</head> 
<body> 
    <form id="form1" runat="server"> 

    <div class="first_letter even_spacing"> 
     Realtime Account Activiation 
    </div> 

    <div class="first_letter even_spacing"> 
     Announcements 
    </div> 
    </form> 
</body> 
</html>

Nguồn

2011-02-07 kacalapy

trong tệp HTML đặt <LINK REL=StyleSheet HREF="Path/to/your/stylesheet.css" TYPE="text/css" MEDIA=screen> ở đầu trang để tham chiếu biểu định kiểu mới.

trong CSS file của bạn đưa:

#projectName{ 
style:value; 
} 

#divAnnounce{ 

}

CáC# mục tiêu điều với ID nếu bạn sử dụng a. trước khi nó sẽ nhắm vào tên lớp,

Bạn cũng có thể sử dụng cả hai nếu bạn cần phải nhận được cụ thể như

#idname.classname{ 

}

Nếu bạn có một div bên trong divAnnounce bạn có thể làm

#divAnnounce #yournewdiv{ 

}

HOẶC

#divAnnounce div{ 

}

HOẶC

0.123.

#newdivid{ 

}

Thông báo không gian Inbetween hai mục tiêu nói rằng họ là cha mẹ và con

Nguồn

2011-02-07 18:23:35 Bill

Bạn nên sử dụng CSS classes và selectors.

Nguồn

2011-02-07 18:22:31 SLaks

<style> 
.class1 { 
style: value; 
} 

.class2 { 
style:value; 
} 
</style> 

<div class="class1" id="projectName"> 
     Realtime Account Activiation 
</div> 

<div class="class2" id="divAnnounce"> 
     Announcements 
</div>

Thông tin thêm: Class vs ID selectors

Nguồn

2011-02-07 18:24:06

Bạn cần phải sử dụng .className ký hiệu cho các lớp học và #IDName ký hiệu cho ID của:

.className { 
style:value; 
} 

#IDName { 
style:value; 
}

<div class="className">Test</div> 

<div id="IDName">Test</div>

Nguồn

2011-02-07 18:25:10

-1

ID là duy nhất, chúng phục vụ mục đích xác định một phần tử trang cụ thể. Vì vậy, đó thực sự là cách tốt nhất để hoàn thành những gì bạn đang tìm kiếm!

Ví dụ đặt một kiểu:

#projectName {width:100%;}

Ví dụ thiết lập một tổ chức sự kiện Jquery:

$("#projectName").click(function() { alert('Clicked'); });

Nguồn

2011-02-07 18:26:24 Zuul

Vui lòng đặt một số nhận xét cho phiếu bầu phủ định, nếu không, tôi không thể nhìn thấy câu trả lời của tôi có vấn đề gì sai! – Zuul

tôi đã viết một câu trả lời về vấn đề tương tự.

Load an external CSS for a specific DIV

Tôi tin điều này sẽ giúp ích cho bạn.

Đảm bảo xác minh rằng tệp CSS sẽ luôn trả về "Access-Control-Allow-Origin" trong tiêu đề phản hồi để tải tệp bên ngoài.

Nếu bạn tải dữ liệu CSS bằng cách khác, bạn chỉ có thể sử dụng chức năng applyCSSToHTML().

Chúc may mắn!

Nguồn

2013-08-15 12:23:12

css nhắm mục tiêu các thẻ div cụ thể trong một trang web HTML lớn

Trả lời

Các vấn đề liên quan