css中“~”(波浪號)、“,”(逗號)、 “ + ”(加號)和 “ > ”(大於號)是什麼意思?

原文鏈接:https://blog.csdn.net/suoyasong/article/details/80528218

爲所有相同的父元素中位於 p 元素之後的所有 ul 元素設置背景:

    p~ul{
       background:#ff0000;
        }
 
      <p>快樂生活</p>
      <ul>
      <li>生活</li>
      <li>生活</li>
      <li>生活</li>
      </ul>

 
p~ul 選擇前面有 <p> 元素的每個 <ul> 元素。
 
       “~”的定義和用法

  p~ul選擇器 p之後出現的所有ul。

  兩種元素必須擁有相同的父元素,但是 ul不必直接緊隨 p。

       css中“>”是css3特有的選擇器,A>B 表示選擇A元素的所有子B元素。

  與A B的區別在於,A B選擇所有後代元素,而A>B只選擇一代。

       .a,.b{逗號指相同的css樣式};

       .a .b{空格指後代元素};

       .a>.b{大於號指子代元素};

       .a+.b{這個“+”是選擇相鄰兄弟,叫做“相鄰兄弟選擇器”
  如果需要選擇緊接在另一個元素後的元素,而且二者有相同的父元素,可以使用相鄰兄弟選擇器(Adjacent sibling selector)。
  例如,如果要增加緊接在 h1 元素後出現的段落的上邊距,可以這樣寫:
  h1 + p {margin-top:50px;}
  這個選擇器讀作:“選擇緊接在 h1 元素後出現的段落,h1 和 p 元素擁有共同的父元素”。};
 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章