Bối rối về việc thừa kế CSS

Question

Tôi đã đọc về CSS và tôi thực sự bối rối về cách thức hoạt động của kế thừa (tôi nghĩ đó là thuật ngữ đúng cho những điều sau đây). Trong CSS tôi có thể khai báo một lớp:

#mytext { 
} 

sau đó tôi nhìn thấy một số người làm:

p.mytext { 
} 

Nhưng tại sao làm điều đó? Tại sao họ không thể thực hiện:

<p class="mytext"> 

Nếu không khai báo p.mytext? Liệu nó có ý nghĩa những gì tôi đang yêu cầu?

và đôi khi tôi thấy:

p#mytext ... Tại sao lại khác? Tôi sẽ tiếp tục tìm kiếm hướng dẫn nhưng cảm ơn cho bất kỳ tư vấn.

Answer 1

Dấu thăng (#) đề cập đến ID cần phải là duy nhất cho trang. Khoảng thời gian (.) là một lớp có thể được sử dụng nhiều lần. Mọi người sẽ sử dụng p#mytext nếu họ muốn có một kiểu dáng độc đáo cho một (chỉ một) đoạn thẻ.

Bạn có thể đọc về nó here.

Muốn thêm rằng một số nhà phát triển web dường như hấp dẫn đối với việc khai báo mọi thứ dưới dạng lớp học. Nếu bạn sử dụng trình tạo bố cục của bất kỳ loại nào thường xuyên hơn thì không phải mọi phần tử sẽ là một lớp.

Answer 2

#mytext tài liệu tham khảo <p id="mytext"/> (không cần phải là một yếu tố p, #mytext chỉ đề cập đến ID)

Trong khi tài liệu tham khảo .mytext<p class="mytext"/> (không cần phải p yếu tố, .mytext chỉ đề cập đến bất cứ điều gì với điều đó classname)

Bằng cách thêm vào những thứ khác như p.mytext bạn tạo một ràng buộc mạnh mẽ hơn để quy tắc của bạn, ví dụ: p.mytext { color:white; } .mytext { color:black; }

có thể lúc đầu có vẻ như màu sắc sẽ là màu đen, tuy nhiên khi bạn đã tạo ra một ràng buộc mạnh mẽ hơn (bằng cách cụ thể hơn trước đó) màu sắc thực tế sẽ có màu trắng.

Answer 3

Kiểm tra đầu tiên this question here.

Trong ngắn # đại diện cho ID trong css và . đại diện cho một lớp học. nếu bạn nói p#myText trong css của bạn, điều đó có nghĩa là bạn có một số <p id="myText"></p> trong html của mình và p.myText là dành cho <p class="myText"></p>.

Ngoài ra, bạn khai báo ID nếu bạn có một mục duy nhất trong html của mình và nếu bạn có nhiều phần tử có cùng kiểu mà bạn khai báo lớp cho chúng.

Answer 4

Hàm băm (#) là định nghĩa ID duy nhất.

#foo { color: blue; } 

<div id="foo"> 

Dấu chấm (.) là định nghĩa lớp.

.bar { color: red; } 

<div class="bar"> 

Nhưng bạn cũng có thể tham khảo thẻ với các lớp học nhất định và ID:

div.baz { color: green; } 
span#qux { color: yellow; } 

<div class="baz"> 
<span id="qux"> 

Answer 5

phép nói rằng bạn có HTML sau:

<div id="main"> 
    <p class="para">content</p> 
    <p class="para">content</p> 
</div> 

thì:

div#main { } 

tham chiếu divs với id của "main"

#main { } 

tài liệu tham khảo tất cả các yếu tố mà có id của

p.para { } 

tài liệu tham khảo "chính" tất cả p yếu tố với lớp của "para"

.para { } 

tài liệu tham khảo TẤT CẢ các yếu tố với lớp " para "

NB. ID phải là duy nhất trên trang trong khi một lớp có thể được sử dụng nhiều lần

Answer 6

+1 cho câu hỏi thú vị.

Trước tiên, bạn có nó ngược,. (dấu chấm) là lớp và # là ID. Bạn có thể đã biết điều này, nhưng một phần tử chỉ có thể có một ID và bạn chỉ nên có ID đó được xác định một lần trên trang của bạn.

Đối với phần thứ hai của câu hỏi của bạn, một số người thích chắp thêm tên phần tử vào lớp và ID của họ. Nó chỉ cụ thể hơn mà không có nó được xác định.

img.large { width 200px /* Only applies to img with large class */ } 
textarea.large { width: 300px /* Only applies to textareas with large class */ } 
p#large { font-size: 1.5em; /* Only applies to p with ID of large */ } 
.large { font-size: 2em; /* Applies to any element with class of large */ } 

Cá nhân, tôi muốn chắp thêm tên phần tử theo phong cách của mình để tôi không quên yếu tố nào ảnh hưởng đến nó.

Answer 7

CSS 101 - những điều cơ bản

CSS - all elements 
    * { ... } 
HTML - basic element 
    <p></p> 
CSS 
    p { ... } 
HTML - element with id 
    <p id="someid"></p> 
CSS - element with id 
    p#someid { ... } 
CSS - all id's 
    #someid { ... } 
HTML - element with class 
    <p class="someclass"></p> 
CSS - element with class 
    p.someclass { ... } 
CSS - all elements with class 
    .someclass { ... } 
CSS - is equal to 
    *.someclass { ... } 
HTML - element with both id and class 
    <p id="someid" class="someclass"></p> 
CSS 
    p#someid.someclass { ... } 
HTML - nested element 
    <p><span></span></p> 
CSS 
    p span { ... } 
HTML - nested element with id 
    <p><span id="someid"></span></p> 
CSS 
    p span#someid { ... } 
HTML - nested element with class 
    <p><span class="someclass"></span></p> 
CSS 
    p span.someclass { ... } 
HTML - nested element with id in element with class 
    <p class="someclass"><span id="someid"></span></p> 
CSS 
    p.someclass span#someid { ... } 

bây giờ bạn có thể trộn và kết hợp tất cả những thứ đó lên để làm cho selectors thực sự phức tạp

nếu bạn muốn nhiều selectors với tính chất tương tự bạn có thể tách chúng với một comma

p.someclass, span#someid { ... }