Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 99精选视频,日韩亚洲视频,亚洲一区导航 

      

        

          



          
	
          
		
          
			
			
          
				
          整合營銷服務商
          
				
          電腦端+手機端+微信端=數據同步管理
          
			
          
			
          				
				
          免費咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          CSS怎么選擇除了第一個子元素外的其余同級子元素
          
        
           
          
	
	
          
		
                        
          SS怎么選擇除了第一個子元素外的其余同級子元素
          使用 CSS 的:not()偽類選擇器和:nth-child()偽類選擇器
          要通過CSS的代碼選擇某一個元素的除了第一個子元素外的其余的跟第一個子元素同級的子元素，可以結合使用CSS的:not()偽類選擇器和:nth-child()偽類選擇器進行選擇。大致的語法如下：
          .parent > .child:not(:nth-child(1)) {樣式設置}
          CSS選擇除了第一個子元素外同級子元素實例代碼，及在線編輯器
          下面的實例中除了使用上述的兩種偽類選擇器之外，還結合了class屬性：
          <div class='p'>
  <div class='c'>p的第一個子元素</div>
  <div class='c'>p的第二個子元素</div>
  <div class='c'>p的第三個子元素</div>
</div>


<style>
  .p > .c:not(:nth-child(1)){color:green;}
</style>
          原文及在線編輯器：CSS怎么選擇除了第一個子元素外的其余同級子元素 | CSS教程
          過css類選取元素
          html所有的元素擁有class屬性，該屬性會對元素進行分組，標識為某一組。 
          js中使用className屬性來保存HTML的class的屬性值
          1. var NodeList = document.getElementById("first")
          2. close.log(NodeList.class)
          盡管如此，js還定義了一個方法，即一個getElementsByClassName()，是基于class屬性值中的標識符來選取成組的文檔元素 
          還有一個類似的getElementsByTagName()的方法也是獲取一個組，返回的是一組的內容即NodeList。返回的是類數組。 
          一個使用getElementsByClassName()的例子
          1. // 查找其class屬性值中包含warning的所有元素
          2. var warnings = document.getElementsByClassName("warning");
          3. // 查找以log命名并且含有error和fatal類的元素的所有后代
          4. var log = document.getElementById("log");
          5. var fatal = log.getElementByClassName("fatal error"); // 先獲取id為log，在獲取class為fatal error的元素
          一個兼容，瀏覽器根據！doctype來進行選擇怪異模式，和標準模式的，怪異模式是為了向后兼容而存在的，標準模式不是（兼容以及不太重要了，但是還要知道一點，這是ie8的問題，但愿再過幾年直接win7也沒有了）
          通過css選擇器選擇元素
          css樣式表可以進行選擇，這里僅僅是一些常見的css選擇器
          1. #nav // id = nav 的元素
          2. div // 選擇div元素
          3. .warning // 選擇class屬性為waring的元素
          4. // 基于屬性值選取元素
          5. p[lang="fr"] // 所有語言為fr的元素
          6. *[name="x"] // 所有包含name="x"的屬性的元素
          7. // 將選擇器進行組合使用
          8. span.fatal.error // 選擇class中包含fatal和error的span元素
          9. span[lang="fr"].warning // 所有使用法語，并且class中包含warning的span元素
          10. // 選擇器指定文檔結構
          11. #log span // id 為log元素的后代元素中的所有的span元素
          12. #log > span // id 為log元素的子元素中所有的span元素
          13. body>h1:first-child // <body>的子元素中的第一個<h1>元素
          14. // 選擇器組合選擇多個或者組合元素
          15. div, #log // 所有的div元素，以及id為log的元素屬于和關系
          16. // 正則選擇器
          17. a[src^="https"] // 選擇src屬性為https開頭的
          18. a[src$=".pdf"] // 匹配src屬性為.pdf結尾的元素
          19. a[src*="ming"] // 匹配src中包含ming的元素
          h5定義了一些選擇api用來通過js來選擇元素
          1. document.querySelector("title")
          選擇title元素
          1. document.querySelectorAll("title")
          會返回一個類數組的 節點列表
          1. document.querySelector(":first-line")
          選擇一個偽元素，在css中匹配了節點一部分，而不是實際元素。 
          其中querySelector只會返回匹配的第一個結果，querySelectorAll將會返回全部結果，返回一個類數組。
          1. document.querySelector(":link")
          返回一個頁面上未訪問的連接
          1. document.querySelectorAll(":visited")
          選擇一個已經訪問過的，用來獲取用戶在該頁面的一部分的歷史記錄
          document.all[]
          已經廢棄，不在使用，所以不學習
          文檔結構和遍歷
          一旦從文檔中選取了一個元素，將會需要查找文檔與之在結構上相關的部分，（即，父元素，子元素，兄弟元素）。溫帶在概念上為節點對象樹。瀏覽器定義了一個api將會對元素對象樹進行遍歷
          作為節點樹的文檔
          Document對象，以及Element對象和文檔中表示文本的Text對象都為Node對象，Node對象定義了一下重要的屬性。
          parentNode
          獲取該節點的父節點
          childNode
          只讀類型數組對象（NodeList對象），它是該節點的子節點的實時表示
          firstChild， lastChild
          該節點的子節點中的第一個和最后一個
          nextSibling，previousSibling
          該節點的兄弟節點中的前一個和下一個
          nodeType
          該節點的類型
          一些類 繼承（基類，父類，超類），派生類，子類 
          這里以c++為栗子 ：基類，父類，超類，指被繼承的類，派生類，子類指繼承于基類的類，在C++中冒號表示繼承，入classA：public：B 表示派生類A從基類B繼承而來。派生類包含基類的所有成員，還包括自身的特有成員，由于繼承關系的存在，派生類和派生類對象訪問基類中的成員就像訪問自己的成員一樣。可以直接使用，但是派生類，仍舊無法訪問基類中的私有成員。C++派生類可以同時從多個基類繼承，java不允許多重繼承，當繼承多個基類的時候，使用，運算符將基類進行分開。
          Element
          Element是一個通用的基類，所有的Document都繼承自Element 
          例如
          1. <p>
          屬于一個由Element基類繼承的Document的一個節點
          text節點
          文字內容，即匿名文字所成的節點。
          Comment節點
          屬于注釋的節點
          1. <!-- 這是注釋內容 -->
          Document 節點
          一個已經加載好的網頁，并通過入口來操作網頁的內容
          DocumentType節點
          一個聲明節點
          DocumentFragment 節點
          表示一個沒有父級文件的最小文檔對象。它被當做一個輕量版的 Document 使用
          nodeValue
          text節點或者Comment節點文本內容
          nodeName
          元素的標簽名，以大寫輸出
          一個栗子
          1. <!DOCTYPE html>
          2. <html>
          3. <head>
          4.  <title></title>
          5. </head>
          6. <body>
          7. hello word
          8. </body>
          9. </html>
          控制臺輸入
          1. document.childNodes[1].childNodes[2].childNode[0]
          返回
          1. #text
          表示
          1. <body>之前的導致換行符
          該html
          1. <!DOCTYPE html><html><head><title></title></head>
          2. <body>hello word</body></html>
          繼續重新加載，重新輸入
          1. document.childNodes[1].childNodes[1]
          2. #text
          繼續去掉唯一的換行符
          1. <!DOCTYPE html><html><head><title></title></head><body>hello word</body></html>
          繼續在控制臺輸入
          1. document.childNodes[1].childNodes[1]
          2. <body style>?…?</body>?
          返回body 
          說明是換行符的問題導致 
          https://stackoverflow.com/questions/45614337/what-causes-childnodes-to-return-text-instead-of-div 
          https://stackoverflow.com/questions/21357004/what-are-html-dom-text-elements
          作為元素樹的文檔
          將文檔看成Element對象樹，忽視部分文檔，text和comment文檔（回車，空格，以及注釋節點）
          Element的children屬性
          第一部分是Element（通用基類）的children屬性，類似于childNodes屬于一個NodeList對象，不同的是children列表只包含Element對象，text和Comment節點沒有children屬性，任何的Element的parentNode（父節點）都是另一個Element，或者是樹根的Document節點
          Element的屬性
          firstElementChild，lastElementChild 
          類似firstChild和lastChild，只代表子Element 
          nextElementSibling，previousElementSibling 
          類似的nextSibling和previousSibling 代表兄弟節點 
          childElementCount 
          子元素的數量，和children。length的值相等
          例一：子元素水平垂直居中
          頁面布局常遇見需要子元素完全居中顯示，因此在此總結常見方案。
          讓黃色塊在父容器（灰色塊）中水平、垂直居中
          黃色方塊：寬高100px
          灰色方塊：寬高400px
          下列方法1到方法7，變換前后的圖像都是上面2張圖（圖標注了長度）
          默認代碼：
           <!DOCTYPE html>
 <html lang="zh-CN">
 
 <head>
     <meta charset="UTF-8">
     <title>完全居中</title>
     <style>
         .parent {
             width: 400px;
             height: 400px;
             background-color: gray;
         }
 
         .children {
             width: 100px;
             height: 100px;
             background-color: yellow;
         }
     </style>
 </head>
 
 <body>
     <div class="parent">
         <div class="children"></div>
     </div>
 </body>
 </html>
          下列方法1到方法7，里css代碼都是基于上方默認代碼
          方法1：彈性布局+主/側軸中間對齊
           .parent {
     /* 彈性布局 */
     display: flex;
     /* 主軸對齊方式：居中 */
     justify-content: center;
     /* 側軸對齊方式（單行）：居中 */
     align-items: center;
 }
          方法2：彈性布局+margin自動
           .parent {
     /* 彈性布局 */
     display: flex;
 }
 .children {
     margin: auto;
 }
          方法3：定位（子絕父相）+margin
           .parent {
     position: relative;
 }
 
 .children {
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     margin: auto;
 }
          方法4：直接計算
          分析過程：使用外邊距推中間黃色盒子，距離頂端（400-100）/2= 150 px
           .parent {
     /* 因為margin塌陷問題（子容器的外邊距會被父容器用掉）：此處需要顯示指明父容器溢出方式 */
     overflow: auto;
 }
 
 .children {
     /* 上下150px，左右自動 */
    margin: 150px auto;
 }
          方法5： Transform屬性
          這種方法使用CSS的transform和position屬性。這種方法在某些情況下可能比Flexbox或Grid更簡單：
            .children {
     position: relative;
     left: 50%;
     top: 50%;
      /* 
      transform：2/3D變換關鍵字
      translate是2D位移關鍵字
         x與y都-50%，是因為坐標原點默認是左上角，在left與top移動50%后，黃色盒子處于中心點右下方，因此需要讓黃色盒子xy都減去一半
      */
     transform: translate(-50%, -50%);
 }
          方法6：Grid布局
          CSS Grid也是一個強大的布局工具，它也可以用來實現子元素的水平和垂直居中。以下是一個例子：
           .parent {
     display: grid;
     justify-items: center;/* 水平居中 */
     align-items: center;/* 垂直居中 */
 }
          方法7：使用表格布局
          通過display設置為table-cell，然后使用text-align 、vertical-align實現水平居中和垂直居中。
           .parent {
     display: table-cell;
     text-align: center;
     vertical-align: middle;
 }
 
 .children {
     display: inline-block;
 }
          方法8：變化成行內塊
          若父元素寬高確定，子元素寬高不確定，用
          將children設為行內元素，運用text-align即可實現水平居中，再借助vertical-align在垂直方向上達到居中效果。最后，將children的行高設定為默認值（line-height具有可繼承性，需單獨調整子元素的行高）。
           <!DOCTYPE html>
 <html lang="zh-CN">
 <head>
     <meta charset="UTF-8">
     <title>完全居中</title>
     <style>
         .parent {
             width: 400px;
             height: 400px;
             background-color: gray;
             text-align: center;
             line-height: 400px;
         }
          
         .children {
             background-color: yellow;
             display: inline-block;
             vertical-align: middle;
             line-height: initial;
         }
     </style>
 </head>
 
 <body>
     <div class="parent">
         <div class="children">child</div>
     </div>
 </body>
 </html>
          初始
          居中
          更多精彩，請關注微信公眾號：碼圈小橙子
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
国产一区二区三区免费|
亚洲AV成人一区二区三区观看
|
日韩AV无码一区二区三区不卡|
在线电影一区二区三区|
综合人妻久久一区二区精品|
成人精品视频一区二区三区尤物|
亚洲永久无码3D动漫一区|
国产精品va一区二区三区|
99精品国产一区二区三区2021|
国产在线观看一区精品|
在线精品日韩一区二区三区|
一区二区三区观看免费中文视频在线播放|
日韩国产一区二区|
精品国产一区二区三区在线|
精品一区二区三区在线播放视频|
国产一区二区免费|
亚洲一区二区三区偷拍女厕|
国产精品小黄鸭一区二区三区|
福利一区二区三区视频午夜观看|
亚洲综合av一区二区三区不卡|
91精品一区二区综合在线|
国99精品无码一区二区三区
|
亚洲高清偷拍一区二区三区|
日韩精品一区二区三区国语自制
|
人妻AV一区二区三区精品|
亚洲综合av永久无码精品一区二区|
亚洲A∨精品一区二区三区|
精品一区二区三区电影|
福利电影一区二区|
亚洲午夜日韩高清一区|
国产激情无码一区二区三区|
在线观看国产一区|
久久久久久人妻一区精品|
91精品福利一区二区三区野战|
精品一区二区三区免费毛片爱|
中文字幕无线码一区二区|
精产国品一区二区三产区|
国产精品福利一区|
国产成人无码AV一区二区在线观看
|
人妻无码一区二区三区|
精品视频一区二区三区|