<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          CSS3 nth-child的使用,詳解css中nth的作用,以及nth-child的兼容寫法

          時間:?2017-11-01閱讀:?1857標簽:?兼容

          :nth-child是css3的一個比較常用的選擇器。它用于匹配屬于其父元素中的子元素,不論元素的類型。 它的參數可以是數字、關鍵詞或公式。下面講介紹它的使用方法,

          nth-child的使用 

          html結構如下:

          <div class="demo">
          <p>1</p>
          <p>2</p>
          <p>3</p>
          <p>4</p>
          </div>
          只選取第2個元素
          .demo p:nth-child(2){color:#f00}
          /*數字2為紅色。參數只為數字,代表選取的是第幾個元素,注意不是從0開始的*/

          選取第2個及之后的元素

          .demo p:nth-child(n+2){color:#f00}
          /*數字2,3,4為紅色。n+數字,代表選取數字后面所有的元素*/

          選取第2個及之前的元素

          .demo p:nth-child(-n+2){color:#f00}
          /*數字1,2為紅色。-n+數字,代表選取數字之前所有的元素*/

          選擇奇數的元素

          .demo p:nth-child(odd){color:#f00}
          .demo p:nth-child(2n-1){color:#f00}
          /*數字1,3為紅色。odd等同于2n-1的寫法*/

          選擇偶數的元素

          .demo p:nth-child(even){color:#f00}
          .demo p:nth-child(2n){color:#f00}
          /*數字2,4為紅色。even等同于2n的寫法*/

          選擇間隔為a,偏移為吧的元素

          使用公式 (an + b)。描述:表示周期的長度,n 是計數器(從 0 開始),b 是偏移值 。

          .demo p:nth-child(3n+2){color:#f00}
          /*數字2為紅色。從2開始,間隔為3*/

          nth-child的兼容

          通過:first-child屬性:

          .demo p:first-child{color:#f00;}/*選取第一個*/ .demo p:first-child+p+p{color:#f00;}/*選取第三個*/

          通過>來實現

          .demo>p+p{ color:#f00;}/*第2級之后的元素*/

          通過jquery的js來實現

          $(document).ready(function(){
                   $(".demo p:nth-child(2)").css("color","#f00");
          });
          /*需要引入jquery文件*/

          Css3其他類似選擇器

          :nth-of-type() 選擇器 ——選擇器匹配屬于父元素的特定類型的第 N 個子元素的每個元素. n 可以是數字、關鍵詞或公式。與:nth-child(n)不同的是后者與類型無關。

          :first-of-type 選擇器匹配屬于其父元素的特定類型的首個子元素的每個元素。 提示:等同于 :nth-of-type(1)。  

          :last-of-type 選擇器匹配屬于其父元素的特定類型的最后一個子元素的每個元素。 提示:等同于 :nth-last-of-type(1)。

          :only-of-type 選擇器匹配屬于其父元素的特定類型的唯一子元素的每個元素。  

          :nth-last-child(n) 選擇器匹配屬于其元素的第 N 個子元素的每個元素,不論元素的類型,從最后一個子元素開始計數。n 可以是數字、關鍵詞或公式。 提示:請參閱 :nth-last-of-type() 選擇器,該選擇器選取父元素的第 N 個指定類型的子元素,從最后一個子元素開始計數。

           :nth-last-of-type(n) 選擇器匹配屬于父元素的特定類型的第 N 個子元素的每個元素,從最后一個子元素開始計數。n 可以是數字、關鍵詞或公式。 提示:請參閱 :nth-last-child() 選擇器,該選擇器選取父元素的第 N 個子元素,與類型無關,從最后一個子元素開始計數。 

          :last-child 選擇器匹配屬于其父元素的最后一個子元素的每個元素。 提示:p:last-child 等同于 p:nth-last-child(1)。


          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/41

          談談瀏覽器的兼容性(面試題)

          H5新標簽在IE9以下的瀏覽器識別 ;ul標簽內外邊距問題ul標簽在IE6\\\\IE7中,有個默認的外邊距,但是在IE8以上及其他瀏覽器中有個默認的內邊距。解決方法:統一設置ul的內外邊距為0

          IE實現css3效果兼容

          Shadow陰影Color,設置陰影顏色。Direction,設置陰影的方向,角度也是從0°~315°取值(跟PS的投影效果非常的相似。)Strength,設置投影強度,數值越大越模糊。Gradient漸變

          vue項目中兼容ie8以上瀏覽器的配置

          首先需要在根目錄的index.html文件加入如下代碼;安裝babel-polyfill 插件;在入口文件main.js文件中引入插件;需要在webpack.base.config.js配置文件中做如下修改

          CSS瀏覽器兼容性與解決方法

          所謂的瀏覽器兼容性問題,是指不同的瀏覽器對同一段代碼有不同的解析,造成頁面顯示效果不統一的情況;而造成瀏覽器兼容問題的根本原因,是瀏覽器的內核不同導致的。認識瀏覽器內核

          vue-cli3配置IE瀏覽器兼容性

          在查詢如何兼容ie時,首先是查看vue cli官網,瀏覽器兼容性,感覺官網說的不是太明晰(小白一枚,實在不太懂),然后就直接百度了,網上方法基本類似,都是用 browserslist,babel-polyfill等

          X5內核瀏覽器,video兼容

          使用vue-video-player在移動端微信內置瀏覽器打開,點擊視頻自動全屏問題。 參考官方 API 是 H5 同層瀏覽器的原因,可通過設置video屬性來處理。

          原生js中6種常見的兼容問題以及解決方案

          1.鍵盤檢測兼容寫方法;2.阻止冒泡事件冒泡的兼容;3.鼠標箭頭事件對象的兼容;4.阻止瀏覽器默認事件兼容;5.獲取非行間樣式的兼容寫法

          前端常見的CSS兼容性問題

          雙倍浮動BUG;表單元素行高不一致;IE6(默認16px為最小)不識別較小高度的標簽(一般為10px);圖片添加超鏈接時,在IE瀏覽器中會有藍色的邊框;最小高度min-height不兼容IE6

          談談瀏覽器兼容性問題

          為什么瀏覽器會存在兼容問題?同一瀏覽器,版本越老,存在bug越多,相對于版本越新的瀏覽器,對新屬性和標簽、新特性支持越少。

          border-radius:50%,在安卓上存在兼容問題

          做移動端開發時為了做適配,通常采用rem作為單位,下面來寫一個圓角,相同的代碼,有的是正圓,有的不是,ios,pc均顯示正常

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网