2012-05-17 40 views
16

Giả sử tôi có một số đánh dấu lồng nhau sâu sắc mà tôi muốn nhắm mục tiêu bằng CSS. Nó có thể là bất cứ điều gì, nhưng ví dụ:Nhắm mục tiêu các phần tử lồng nhau bằng CSS

<div> 
    <div id='someid'> 
     <span class='someclass'> 
      <a class='link' href='alink'>Go somewhere</a> 
     </span> 
    </div> 
<div> 

Có thể chấp nhận để viết một quy tắc CSS nhắm vào thẻ <a> trực tiếp, như thế này?

a.link { font-size: large; } 

Hoặc điều này được coi là không chuẩn có thể không hoạt động trong một số trình duyệt? Tôi có cần nhắm mục tiêu từng phần tử trong chuỗi như thế này không?

div div span.someclass a.link { font-size: large; } 

Trả lời

15

Cả hai đều hoàn toàn có thể chấp nhận được và câu trả lời tùy thuộc vào giải pháp cụ thể của bạn. Ví dụ: nếu bạn có các khu vực khác mà bạn đang chia sẻ các thuộc tính phổ biến được xác định bởi lớp đó, bạn muốn giữ cho nó càng chung càng tốt. Nếu ví dụ bạn có một chuyển hướng và các liên kết trong khu vực đó chia sẻ một số yếu tố chung những người có thể được xác định bởi a.link

Sau đó, trong html lồng nhau, bạn có thể làm điều gì đó như

.someclass a.link {font-size:8px} để làm cho văn bản nhỏ hơn.

Đây là một bài viết mà thảo luận về cách đặc hiệu hoạt động: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

2

Bạn càng làm cho CSS trở nên kém linh hoạt hơn. Đó là thương mại của riêng bạn. Nếu bạn định cung cấp cho các liên kết một lớp cụ thể như thế thì tôi chắc chắn rằng chúng sẽ giống nhau nếu chúng xuất hiện bên trong cây này hoặc bên ngoài nó để bạn có thể gắn bó với ví dụ đầu tiên của mình.

0

a.link là cách tốt nhất để thực hiện. Nếu bạn muốn một a.link nhất định khác với phần còn lại, bạn sẽ cần phải thêm một số trọng lượng cho nó.

a.link { ... } /* Global */ 
span.someclass a.link { ... } /* Finds all a.link within span.someclass */ 

Bộ chọn hậu duệ (dòng 2) không phải là cách hiệu quả nhất để thêm kiểu vào phần tử, vì vậy hãy sử dụng chúng một cách tiết kiệm. Cá nhân, tôi sử dụng chúng khi tôi cần cung cấp phong cách đặc biệt cho một lớp học toàn cầu trong một ID/Class nhất định.

+2

Điều này có thể dẫn đến một trường hợp rất xấu của viêm ruột, mà IMO không đáng để cạo bỏ hàng nghìn giây mà thậm chí không cộng thêm thời gian để nhập một ký tự đơn lẻ. – BoltClock

2

Nó thực sự khuyến khích sử dụng a.link thay vì, tùy chọn thứ hai xấu xí dài, mà có thể gây ra các vấn đề đặc hiệu và hiệu suất.

Thậm chí còn tốt hơn nếu bạn chỉ sử dụng .link. Đó là lựa chọn tốt nhất.

+0

[Tính đặc hiệu là một câu hỏi hóc búa khi nói đến 'a' yếu tố ...] (http://stackoverflow.com/questions/10587245/is-there-a-reason-to-use-a-instead-of -alink-or-avisited-in-my-stylesheet/10589840 # 10589840) – BoltClock

4

Cả hai đều hoàn toàn hợp lệ và tùy chọn nào bạn sử dụng tùy thuộc vào việc bạn muốn làm.

Nếu bạn đang tạo một lớp chung mà bạn muốn để có thể sử dụng trong suốt toàn bộ trang web của bạn bất kể yếu tố và nơi phần tử là, bạn nên chỉ sử dụng .class. Một ví dụ tốt cho điều này là một cái gì đó như .icon mà bạn có thể muốn sử dụng trên các liên kết, danh sách các mục, tiêu đề, vv Và bạn muốn để có thể sử dụng chúng ở khắp mọi nơi.

Nếu bạn đang tạo một lớp dành riêng cho/chỉ hoạt động trên một phần tử kiểu nhất định, tốt nhất bạn cũng nên sử dụng phần tử trong bộ chọn.Một ví dụ về điều này sẽ là một danh sách dấu đầu dòng bạn muốn hiển thị trên một dòng, vì lớp này yêu cầu HTML phải là một <ul>, bạn cũng nên chỉ định nó trong CSS; ul.inline. Bằng cách này, bạn cũng có thể sử dụng tên lớp "nội tuyến" cho các phần tử khác, mà không có kiểu dáng ảnh hưởng đến cả hai.

Nếu bạn chỉ sử dụng lớp để chọn yếu tố nhưng không nên có bất kỳ kiểu dáng chung nào, bạn nên cụ thể. Ví dụ: bạn có thể muốn đoạn đầu tiên trong phần tử #blog-post của mình lớn hơn, thì bạn nên chỉ định cả hai lớp #blog-post lớp; #blog-post p.first (lưu ý rằng các loại lớp học này hiếm khi cần thiết nữa nhờ các bộ chọn nâng cao như :first-of-type, h2 + p v.v.).

Nói rằng ".link là tốt nhất, a.link là thứ hai tốt nhất và bộ chọn dài là xấu" chỉ là sai. Tất cả phụ thuộc vào tình hình.

+1

Tôi phải upvote bạn cho câu cuối cùng. Tận hưởng đặc quyền chỉnh sửa mới của bạn! – BoltClock

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