Bộ chọn '&' chọn gì?

Question

Trong this codepen có một bộ chọn css &:hover bộ chọn đó phù hợp với những gì?

Answer 1

Tôi tin rằng dấu và là một tính năng Sass. Từ các tài liệu:

Referencing Parent Selectors: &

Đôi khi nó là hữu ích để sử dụng selector mẹ một quy tắc lồng nhau trong cách khác hơn so với mặc định. Ví dụ: bạn có thể muốn có các kiểu đặc biệt khi bộ chọn đó được di chuột qua hoặc khi phần tử cơ thể có một lớp nhất định. Trong những trường hợp này, bạn có thể rõ ràng chỉ định vị trí chèn bộ chọn gốc bằng cách sử dụng ký tự & .

Answer 2

Chính xác. Trong Sass bạn có thể có một cái gì đó như thế này ...

div { 
    background: green; 

    p { 
     background: red; 

     &:hover { 
      background: blue; 
     } 

     &:active { 
      background: blue; 
     } 
    } 
} 

... mà khi chuyển đổi sang CSS sẽ trở thành này:

div { 
    background: green; 
} 

div p { 
    background: red; 
} 

div p:hover { 
    background: blue; 
} 

div p:active { 
    blue; 
} 

Chỉnh sửa: từ & di chuột: để &: hover

Answer 3

Một cách sử dụng ít được biết đến rộng rãi hơn là bạn có thể thêm dấu và vào cuối kiểu để bộ chọn gốc trở thành con.

ví dụ:

h3 
    font-size: 20px 
    margin-bottom: 10px 

.some-parent-selector & 
    font-size: 24px 
    margin-bottom: 20px 

trở thành,

h3 { 
    font-size: 20px; 
    margin-bottom: 10px; 
    } 

    .some-parent-selector h3 { 
    font-size: 24px; 
    margin-bottom: 20px; 
    } 

bạn có thể đọc thêm về & sử dụng ở đây

http://thesassway.com/intermediate/referencing-parent-selectors-using-ampersand