Công cụ chọn CSS của C + + (dấu cộng) có nghĩa là gì?

Ví dụ:

p + p {
  /* Some declarations */
}

Tôi không biết những gì +có nghĩa là. Sự khác biệt giữa cái này và chỉ xác định một phong cách pmà không có + p?

Xem các bộ chọn liền kề trên W3.org.

Trong trường hợp này, bộ chọn có nghĩa là kiểu chỉ áp dụng cho các đoạn trực tiếp sau đoạn khác.

Một pbộ chọn đơn giản sẽ áp dụng kiểu cho mỗi đoạn trong trang.

Điều này sẽ chỉ hoạt động trên IE7 trở lên. Trong IE6, kiểu sẽ không được áp dụng cho bất kỳ yếu tố nào. Điều này cũng đi cho người >kết hợp, nhân tiện.

Xem thêm tổng quan của Microsoft về khả năng tương thích CSS trong Internet Explorer .

Đó là bộ chọn anh chị em liền kề.

Từ blog Splash of Style.

Để xác định bộ chọn liền kề CSS, dấu cộng được sử dụng.

h1+p {color:blue;}

Mã CSS ở trên sẽ định dạng đoạn đầu tiên sau (không bên trong) bất kỳ tiêu đề h1 nào có màu xanh lam.

h1>pchọn bất kỳ pphần tử nào là con trực tiếp (thế hệ thứ nhất) (bên trong) của một h1phần tử.

• h1>pdiêm <h1> <p></p> </h1>( <p>bên trong <h1>)

h1+psẽ chọn pphần tử đầu tiên là anh chị em (ở cùng cấp độ của dom) làm h1phần tử.

• h1+ptrận đấu <h1></h1> <p><p/>( <p>bên cạnh / sau <h1>)

Các +phương tiện dấu chọn một "anh chị em liền kề"

Ví dụ, phong cách này sẽ áp dụng từ thứ hai <p>:

p + p {
   font-weight: bold;
} 

<div>
   <p>Paragraph 1</p>
   <p>Paragraph 2</p>
</div>

Thí dụ

Xem JSFiddle này và bạn sẽ hiểu nó: http://jsfiddle.net/7c05m7tv/ (Một JSFiddle khác: http://jsfiddle.net/7c05m7tv/70/ )

Hỗ trợ trình duyệt

Bộ chọn anh chị em liền kề được hỗ trợ trong tất cả các trình duyệt hiện đại.

Tìm hiểu thêm

• http://css-tricks.com/almanac/selector/a/adjighbor-sibling/
• http://www.w3.org/TR/CSS2/selector.html#adjighbor-selector
• https://developer.mozilla.org/en-US/docs/Web/CSS/Adjighbor_sibling_selector

"+" là bộ chọn anh chị em liền kề. Nó sẽ chọn bất kỳ p TRỰC TIẾP SAU ap (không phải là con hay cha mẹ, anh chị em ruột).

+bộ chọn được gọi Adjacent Sibling Selector.

Ví dụ: bộ chọn p + p, chọn các pphần tử ngay sau các pphần tử

Nó có thể được coi là một looking outsidebộ chọn kiểm tra phần tử ngay sau đây.

Đây là một đoạn mẫu để làm cho mọi thứ rõ ràng hơn:

body {
  font-family: Tahoma;
  font-size: 12px;
}
p + p {
  margin-left: 10px;
}

<div>
  <p>Header paragraph</p>
  <p>This is a paragraph</p>
  <p>This is another paragraph</p>
  <p>This is yet another paragraph</p>
  <hr>
  <p>Footer paragraph</p>
</div>

Vì chúng ta là một chủ đề giống nhau, nên đề cập đến một công cụ chọn, ~bộ chọn khác, đó làGeneral Sibling Selector

Ví dụ: p ~ pchọn tất cả những pthứ tiếp theo pkhông quan trọng nó ở đâu, nhưng cả hai pnên có cùng cha mẹ.

Đây là cách nó trông giống với cùng một đánh dấu:

body {
  font-family: Tahoma;
  font-size: 12px;
}
p ~ p {
  margin-left: 10px;
}

<div>
  <p>Header paragraph</p>
  <p>This is a paragraph</p>
  <p>This is another paragraph</p>
  <p>This is yet another paragraph</p>
  <hr>
  <p>Footer paragraph</p>
</div>

Lưu ý rằng cuối cùng pcũng được khớp trong mẫu này.

Nó sẽ khớp với bất kỳ phần tử pnào liền kề với phần tử 'p'. Xem: http://www.w3.org/TR/CSS2/selector.html

+trình bày một trong những lựa chọn tương đối Danh sách tất cả các bộ chọn tương đối:

div p- Tất cả <p>các yếu tố bên trong <div>các yếu tố được chọn.

div > p- Tất cả <p>các yếu tố có cha mẹ trực tiếp <div>được chọn. Nó hoạt động ngược quá ( p < div)

div + p- Tất cả <p>các yếu tố đặt ngay sau khi <div>yếu tố được chọn.

div ~ p- Tất cả <p>các yếu tố đi trước một <div>yếu tố được chọn.

Thông tin thêm về bộ chọn kiểm tra ở đây .

Nó chọn đoạn tiếp theo và thụt đầu đoạn từ bên trái giống như bạn có thể trong Microsoft Word.

p+p{
//styling the code
}

p+p{
} simply mean find all the adjacent/sibling paragraphs with respect to first paragraph in DOM body.

    <div>
    <input type="text" placeholder="something">
    <p>This is first paragraph</p>
    <button>Button </button>
    <p> This is second paragraph</p>
    <p>This is third paragraph</p>
    </div>

    Styling part 
    <style type="text/css">
        p+p{
            color: red;
            font-weight: bolder;
        }
    </style>

   It will style all sibling paragraph with red color.

đầu ra cuối cùng trông như thế này

Plus (+) sẽ chọn phần tử ngay lập tức đầu tiên. Khi bạn sử dụng + bộ chọn, bạn phải đưa ra hai tham số. Điều này sẽ rõ ràng hơn bằng ví dụ: ở đây div và span là các tham số, vì vậy trong trường hợp này chỉ có nhịp đầu tiên sau div sẽ được tạo kiểu.

 div+ span{
   color: green;
   padding :100px;
}

     <div>The top or first element  </div>
       <span >this is span immediately after div, this will be selected</span>
       <span>This will not be selected</span>

Kiểu trên sẽ chỉ áp dụng cho nhịp đầu tiên sau div. Điều quan trọng cần lưu ý là nhịp thứ hai sẽ không được chọn.

Nó có nghĩa là nó phù hợp với mọi pyếu tố liền kề

www.snoopcode.com/css/examples/css-adjighbor-sibling-selector