• <var id="gzb7d"><strong id="gzb7d"></strong></var>
    <td id="gzb7d"></td>

    1. <acronym id="gzb7d"></acronym>
      瀏覽器部落:-綠色安全純凈官方版!

      CSS選擇器的代碼案例以及css優先級的代碼案例

      時間:2021-2-14作者:未知來源:瀏覽器部落人氣:

      網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。
      本篇文章給大家帶來的內容是關于CSS選擇器的代碼實例以及css優先級的代碼實例,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。

      <!DOCTYPE html>
      <html>
       
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <link rel="stylesheet" href="./css/index.css">
          <title>CSS入門第一節</title>
       
          <!-- 嵌入樣式  頁內樣式-->
          <style>
              p {
                  color: yellowgreen;
              }
          </style>
      </head>
       
      <body>
          <!-- 內斂樣式 -->
          <div style="color: red; font-size: 24px; border: 1px solid black;">
              我是DIV
          </div>
          <p>
              我是段落標簽
          </p>
       
          <h1>
              我是大標題
          </h1>
      </body>
       
      </html>
      /*index.css文件*/
       
      p {
          /* 設置字體大小為:50像素 */
          font-size: 50px;
          /* 設置p標簽的背景色為銀灰色 */
          background-color: silver;
      }
       
      span {
          font-size: 28px;
      }

      css案例

      <!DOCTYPE html>
      <html lang="en">
      
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>css練習</title>
          <link rel="stylesheet" href="./css/index.css">
      </head>
      
      <style>
          h1 {
              color: green;
          }
      </style>
      
      <body>
          <p style="background-color: red;">設置p標簽的背景色為紅色</p>
          <h1>設置H1標簽的字體顏色為綠色</h1>
          <span>設置span標簽的文本為14像素</span>
      </body>
      
      </html>

      通配符選擇器

      <!DOCTYPE html>
      <!-- 通配符選擇器 -->
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>CSS選擇器</title>
      </head>
      <style>
          * {
              color: #3cd;
          }
          /* 通配符選擇器:統統都被匹配上,可以選擇到所有的標簽 */
      </style>
      
      <body>
          <h1>標題</h1>
          <p>
              內容
          </p>
      
          <ul>
              <li>北京</li>
              <li>南京</li>
              <li>山東</li>
          </ul>
          <strong>這是strong標簽</strong><br/>
          <span>demo</span>
      </body>
      
      </html>

      css選擇器

      <!DOCTYPE html>
      <!-- 標簽選擇器 -->
      <html lang="en">
      
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>CSS選擇器</title>
      </head>
      <style>
          /* 標簽選擇器 */
      
          p {
              color: red;
          }
      
          li {
              background-color: gold;
          }
      
          span {
              font-size: 50px;
          }
      
          /* id選擇器 */
      
          /* id命名規范:必須以字母開頭(不限制大小寫),然后可以包含數字/字母/下劃線/連接符- */
      
          #li-beijing {
              background-color: silver;
          }
      
          #li-shanghai {
              background-color: aquamarine;
          }
      </style>
      
      <body>
          <h1>標題</h1>
          <p> 內容</p>
          <ul>
              <li id="li-beijing">北京</li>
              <li id="li-shanghai">南京</li>
              <li>山東</li>
          </ul>
          <strong>這是strong標簽</strong>
          <br/>
          <span>demo</span>
      </body>
      
      </html>

      類選擇器

      <!DOCTYPE html>
      <!-- 類選擇器 -->
      <html lang="en">
      
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>CSS的類選擇器</title>
      </head>
      <style>
          .lf-p {
              color: green;
          }
          .fl{
              background-color: #cdf;
          }
      </style>
      
      <body>
          <h1>標題</h1>
          <p class="p_1"> 段落一</p>
          <p class="lf-p fl"> 段落二</p>
          <p class="lf-p"> 段落三</p>
      
      </body>
      
      </html>

      選擇器綜合練習

      <!DOCTYPE html>
      <!-- 標簽選擇器 類選擇器 id選擇器 -->
      <html lang="en">
      
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>選擇器綜合練習</title>
      </head>
      <style>
          h1 {
              color: red;
              font-size: 30px;
          }
      
          span {
              font-size: 18px;
          }
      
          #comt {
              color: yellow;
              /* font-size: 18px; */
          }
      
          .date {
              color: purple;
              /* font-size: 18px; */
          }
      
          .articleP{
              font-size: 18px;
              color: blue;
          }
      </style>
      
      <body>
          <h1>標題</h1>
          <p>
              <span id="comt">段落</span>
              <span class="date">時間</span>
          </p>
          <p class="articleP">正文</p>
      </body>
      
      </html>

      復合選擇器

      <!DOCTYPE html>
      <!-- 復合選擇器:標簽指定式選擇器,后代選擇器,并集選擇器 -->
      <html lang="en">
      
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>復合選擇器</title>
          <style>
              /*
                  1.請把li中的class等于current的標簽的背景設置為高亮(顏色為藍色)
                  2.請把class為news的ul標簽下面的所有的li標簽中的文字設置為黑色(#333)
                  3.請把體育新聞和財經新聞的文字設置為銀灰色
              */
      
              /* 標簽指定式選擇器 */
      
              li.current {
                  background-color: lightblue;
              }
      
              li#home {
                  font-weight: bold;
                  /*字體加粗*/
              }
      
              /* 后代選擇器 */
      
              .news a {
                  /* color:#333; */
                  color: green;
              }
      
              /* 并集選擇器 */
      
              .f-news a,
              .s-news a {
                  color: silver;
              }
      
              /* 如果兩個優先級一致的話,后面的則優先生效 */
      
              .othernews a {
                  color: red;
              }
      
              /* 并集選擇器 */
              html,
              body,
              p,
              dt,
              dl,
              dd,
              ul,
              p {
                  padding: 0;
                  /* 內邊距 */
                  margin: 0;
                  /* 外邊距 */
              }
          </style>
      </head>
      
      <body>
          <ul>
              <li id="home"><a href="#">首頁</a></li>
              <li><a href="#">產品</a></li>
              <li class="current"><a href="#">新聞</a></li>
              <li><a href="#">售后</a></li>
              <li><a href="#">關于</a></li>
          </ul>
      
          <ul class="news">
              <li><a href="#">哈哈哈哈哈哈</a></li>
              <li><a href="#">哈哈哈哈哈哈</a></li>
              <li><a href="#">哈哈哈哈哈哈</a></li>
              <li><a href="#">哈哈哈哈哈哈</a></li>
          </ul>
      
          <dl class="f-news othernews">
              <dt><a href="#">財經新聞</a></dt>
              <dd><a href="#">內容</a></dd>
              <dd><a href="#">內容</a></dd>
              <dd><a href="#">內容</a></dd>
          </dl>
      
          <dl class="s-news othernews">
              <dt><a href="#">體育新聞</a></dt>
              <dd><a href="#">內容</a></dd>
              <dd><a href="#">內容</a></dd>
              <dd><a href="#">內容</a></dd>
          </dl>
      </body>
      
      </html>

      子元素選擇器

      <!DOCTYPE html>
      <!-- 子選擇器 -->
      <html lang="en">
      
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>子元素選擇器</title>
          <style>
              /* 子選擇器 */
              p > strong {
                  color: red;
              }
          </style>
      </head>
      
      <body>
          <p>
              <p>
                  <span>段落1</span>
                  <span>
                      <strong>段落2</strong>
                  </span>
                  <span>段落3</span>
                  <strong>強調標簽</strong>
              </p>
          </p>
      </body>
      
      </html>

      屬性選擇器

      <!DOCTYPE html>
      <!-- 屬性選擇器 -->
      <html lang="en">
      
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>屬性選擇器</title>
          <style>
              span[class] {
                  color: green;
              }
      
              /* 擁有id屬性的標簽都被選擇出來 */
              [id] {
                  font-size: 50px;
              }
      
              span[id="4"] {
                  color: yellow;
              }
              
              /* 屬性包含選擇器 */
              span[class~="demo"] {
                  font-size: 100px;
              }
          </style>
      </head>
      
      <body>
          <p>
              <span class="cur demo">1</span>
              <span>2</span>
              <span id="3">3</span>
              <span id="4">4</span>
              <span>5</span>
          </p>
      </body>
      
      </html>

      偽類選擇器

      <!DOCTYPE html>
      <!-- 偽類選擇器 -->
      <html lang="en">
      
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>偽類選擇器</title>
          <style>
              a:link {
                  color: red;
              }
              
              /* 當鏈接被訪問過了之后,就會添加偽類visited */
              a:visited {
                  color: lawngreen;
              }
              
              /* 當鼠標懸停于元素上面的時候,會自動添加偽類:hover */
              a:hover {
                  color: #fff;
                  background-color: aquamarine
              }
              
              /* 當鏈接被點擊,但是鼠標不要放開的時候, 會自動給連接添加active偽類*/
              a:active {
                  color: gold;
              }
              
              /* 遵循LoVe HAte 原則,否則可能無法正常顯示*/
      
              /* 獲取到焦點的時候,默認給標簽添加focus效果 */
              input:focus{
                  color: red;
              }
      
          </style>
      </head>
      
      <body>
          <a href="#">首頁</a>
          <a href="#">產品</a>
          <a href="#">新聞</a>
          <a href="/">娛樂</a>
      
          <input type="text" name="" id="">
      </body>
      
      </html>

      偽元素選擇器

      <!DOCTYPE html>
      <html lang="en">
      
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>偽元素選擇器</title>
          <style>
              /* 第一個必須是span標簽,第二:是第一個孩子 */
              span:first-child {
                  color: red;
                  font-size: 50px;
              }
      
              /* 段落的首個字符 */
              p:first-letter {
                  font-size: 50px;
                  color: green;
              }
              /* 設置一行 */
              p::first-line {
                  color: gold;
              }
              
              /* 在標簽前面追加內容 */
              #temp::before {
                  content:"================";
              }
              
              /* 在標簽后面追加內容 */
              #temp:after {
                  content:"xxxxxxxxxxxxxxx";
              }
          </style>
      </head>
      
      <body>
          <p id="temp">
              <span>一</span>
              <span>二</span>
              <span>三</span>
          </p>
          <p>
              <span>1</span>
              <span>2</span>
              <span>3</span>
          </p>
      
          <p>張宜成</p>
      </body>
      
      </html>

      css的特性

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>CSS的特性:層疊性和繼承性</title>
          <style>
              p {
                  color: red;
                  font-size: 40px;
              }
      
              p{
                  color: green;
              }
      
              a{
                  color:inherit; /*繼承父標簽的屬性*/
              }
              /* 繼承性:父容器設置的樣式,子容器也可以享受同等待遇 */
              /* 
                  所有字相關的都可以繼承,比如:color,text-系列/font-系列/line-系列/cursor
                  并不是所有的CSS屬性都可以繼承,例如,下面的屬性就不具有繼承性:邊框,外邊距,內邊距,背景,定位,元素寬高屬性.
                  a標簽不繼承父標簽的字體顏色
              */
          </style>
      </head>
      <body>
          <p>
              層疊性和繼承性
              <span>我是Span標簽</span>
              <a href="#">我是a標簽,我特立獨行</a>
          </p>
          <span>我是Span標簽2</span>
      
      </body>
      </html>

      css的優先級

      <!DOCTYPE html>
      <!-- 第一原則: CSS優先級從高到低: 內聯樣式 嵌入樣式 外部引入樣式 繼承樣式 默認樣式 -->
      <!-- 第二原則: ID選擇器 > 類(偽類) > 標簽 > 繼承 > 默認-->
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <!-- 外部引入樣式優先級大于繼承樣式 --><!-- 優先級別可能與嵌入樣式互換,如果將link放到style下面,
              則外部引入樣式優先于嵌入樣式 -->
          <link rel="stylesheet" href="./css/t.css">
          <title>優先級</title>
          <style>
              /* 繼承樣式大于默認樣式 */
              body{
                  color: blueviolet;
              }
              /* 嵌入樣式大于外部引入 */
              p {
                  color: green;
                  font-size: 50px;
                  background-color: sienna;
              }
      
              .fs{
                  font-style: 400px;
              }
      
              #tp #atc{
                  font-size: 20px;
                  /* !important是重要的意思,優先級最高高于內斂樣式 */
                  color:lightsalmon !important;
              }
          </style>
      </head>
      <body id="tp">
          <!-- 內聯樣式優先級大于嵌入樣式 -->
          <p id="atc" class="fs" style="color: blue;">
              我是段落
          </p>
      </body>
      <!-- 綜述: -->
      <!-- 行內樣式 > 頁內樣式 > 外部引用樣式 > 瀏覽器默認樣式 -->
      <!-- important > 內聯 > ID > 偽類/類/屬性選擇 > 標簽 > 偽對象 > 通配符 > 繼承 -->
      </html>

      相關推薦:

      css3如何實現自定義滾動條樣式?(代碼)

      css選擇器有哪些類型?css常用選擇器的簡單介紹

      以上就是CSS選擇器的代碼實例以及css優先級的代碼實例的詳細內容,更多請關注php中文網其它相關文章!


      網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。




      關鍵詞:CSS選擇器的代碼案例以及css優先級的代碼案例




      Copyright © 2012-2018 瀏覽器部落(http://www.atelierescobar.com) .All Rights Reserved 網站地圖 友情鏈接

      免責聲明:本站資源均來自互聯網收集 如有侵犯到您利益的地方請及時聯系管理刪除,敬請見諒!

      QQ:1006262270   郵箱:kfyvi376850063@126.com   手機版 

      国产乱子伦漫画,猫咪www免费人成在线观看,国产真实哺乳吃奶在线观看,超乳专区爆乳国产