Selector Combinators 中的+跟~差別

-
介紹兩個很類似的選擇器，
全名是Next-sibling combinator，簡稱加號(+)
全名是Subsequent-sibling combinator，簡稱波浪號(~)

  • 加號是會影響到後方同層級的首次遇到元素
  • 波浪號則是影響後方同層級的全部元素

加號跟波浪號都是目標為要影響後方同層級，語法使用方式也都差不多
[選取對象A + 選取對象B] 及 [選取對象A ~ 選取對象B]。


看起來非常的像，不過有一些差別：
  • 加號是只能選到A後面那一個B
  • 波浪號是選到A後面整串同層的B

留言

張貼留言

這個網誌中的熱門文章

css position 小心得

-
圖片
 最近有在研究position，在css中這算是一個非常重要的屬性，網頁中的定位全要靠它，在此整理一些研究時的筆記跟我的小小心得～ 首先，是我對position作用的理解 對網頁上物件的屬性添加了position就可以改變物件的排列方式，改變其在網頁上位置，但其實就算都沒有添加，原本物件間也會有自己的排列，所以我會覺得說，position它其實是在對網頁上的物件做一個「改變定位參考對象」的動作，預設狀態下參考對象會是原本物件資料自己本身的排列狀態，position的值會改變定位參考對象，從而改變物件排列方式。 position主要有的值大致分成以下五種： static relative fixed absolute sticky static 這個值是假如都沒設position，預設就會是satic。 幾個我覺得重要的點 使用了這個值，其他的定位方式都會失效 很少用到，因為預設就是static，我想要預設那我就不下就好 relative 相對定位，它的定位參考位置還是原本預設狀態的，但是可以讓顯示位子去做偏移，意思就是能在不改變網頁佈局的狀態下去改變物件位子，假如去做偏移的話，會依造原本預設狀態的基礎下再去改變 absolute 絕對定位，它的定位參考位置就直接脫離原本預設狀態，所以讓設定的物件做偏離之外，就不會佔據任何空間 ＝ 其他沒被absolute且還是原本預設狀態的物件也會被跟著影響。另外，它的參考對象會是最近的非static設定的父層空間，所以常常在使用absolute時它的父層會在設定一個relative就是此道理，除了relative之外，fixed跟sticky也可以作為定位參考對象 fixed 固定定位，它的定位參考對象一樣會脫離原本的預設狀態，不過跟absolute不同的是，所定位參考對象會是當前視窗，意思就是當在滑動視窗捲軸時，不管怎麼滾動，被設定了fixed的物件都能一直固定在相同位置，等等講完sticky會一起用示意圖來跟abosolute做比較 sticky 黏貼定位，擁有剛剛所講述的relative和fixed的特性，關於定位參考對象可以成在跨過特定值前為相對定位，之後為固定定位，那什麼是特定值呢？ 這就要來說到為什麼要使用黏貼定位： 簡單來說，是想要在網頁畫面上有著固定的效果，但是滑到一定地方之後，就不想繼續固定時，就會使用stick
閱讀完整內容

什麼時候會用img , 什麼時候會用background-image

-
一個是html標籤的img，一個是css的background-image，兩個都能讓網頁中顯示出圖片。 我自己目前個人遇到的狀況會使用img > background-image 。 img: 會使用img的情況通常是： 網頁不只是需要單純的一張圖片而已，還需要像是超連結的功能，或是想讓圖片能夠縮小放大。 有需要使用動畫的時候，因為img的動畫表現會比background-image更好。 影印頁面時，圖片也想跟著被印出來。   background-image: 簡單來說，是像是網頁中當背景圖片的感覺，意味著background-image其實並沒有自己本身的意義存在，它沒有辦法去代表網頁中內容的任何事情。 會使用的狀況： 圖片不是內容的一部分（設計考量）。 網頁需要有圖片當背景。 影印頁面時，圖片不想跟著被印出來。 小結： img是屬於頁面內容的一部分，它是擁有含義的圖片。 background-image則是不屬於頁面內容的一部分，它是沒有含義，可以拿來單純當作背景的圖片。
閱讀完整內容

便當問題(js變數) 第一個寫的js程式!

-
圖片
 假如一個便當是80元 超過10個便當則一個便當就折價成70元 要如何使用判斷式輸出對應價格 我自己的寫法 首先先設定變數，也就是初始值 便當一個是多少 折價後是多少 跟可能會有幾個便當的 count，也就是數量 都設定好之後再設定一個總價 也就是上面的便當多少錢乘以數量這樣 不過沒用到，我就直接把算法寫在判斷式了，可以改進 最後判斷式在if 假如便當沒超過十個 就正常的算 超過十個的話，每個就以折扣0.875來看 這個數字是因為超過十個就80變成70那邊推算出來的 以上，雖然很簡單，不過是我的第一個手寫的，感動
閱讀完整內容