<thead id="jxdzp"><address id="jxdzp"><pre id="jxdzp"></pre></address></thead>

<em id="jxdzp"><span id="jxdzp"></span></em>

    <listing id="jxdzp"><nobr id="jxdzp"><meter id="jxdzp"></meter></nobr></listing>

      <address id="jxdzp"></address>
      <noframes id="jxdzp"><form id="jxdzp"><th id="jxdzp"></th></form>
      <noframes id="jxdzp"><form id="jxdzp"><th id="jxdzp"></th></form>

          訂閱本欄目 RSS您所在的位置: 深山工作室 > DIV+CSS > 正文

          CSS選擇符詳解

          懶人圖庫 2008/4/24 23:12:40 深山行者 字體: 瀏覽 5969

          一、類型選擇符

          什么是類型選擇符?指以網頁中已有的標簽類型作為名稱的行徑符。body是網頁中的一個標簽類型,div,p,span都是。
          如下:

          body {}
          div {}
          p {}
          span {}
           
          二、群組選擇符

          對于XHMTL對象,可以對一組同時進行了相同的樣式指派。
          使用逗號對選擇符進行了分隔,這樣書寫的優點在于同樣的樣式只需要書寫一次即可,減少代碼量,改善CSS代碼結構。
          使用時應該注意"逗號"是在半角模式下,并非中文全角模式。
          如下:

          h1,h2,h6,p,span
          {
          font-size:12px;
          color:#FF0000;
          font-family: arial;
          }
           
          三、包含選擇符
          對某對象中的子對象進行樣式指點定,這樣選擇方式就發揮了作用。
          需要注意的是,僅對此對象的子對象標簽有效,對于其它單獨存在或位于此對象以外的子對象,不應用此樣式設置。
          這樣做的優點在于,幫我們避免過多的id、class設置,直接對所需的元素進行定義。
          如下:

          h2 span
          {
          color:red;
          }
          如下:
          body h1 span strong
          {
          font-weight:bold;
          }
           
          四、id選擇符

          根據DOM文檔對象模型原理所出現的選擇符,對于一個XHTML文件,其中的每一個標簽都可以使用一個id=""的形式進行一個名稱指派,但需要注意,在一個XHTML文件中id是具有唯一性而不可以重復的。
          在div css布局的網頁中,可以針對不同的用途進行命名,如頭部為header、底部為footer。
          XHTML如下:

          <div id="content"></div>
           
          CSS如下:

          #content
          {
          font-size:14px;
          line-height:120%;
          }
           
          五、class選擇符

          其實id是對于XHTML標簽的擴展,而class是對SHTML多個標簽的一種組合,class直譯的意思是類或類別。
          對于XHTML標簽使用class=""進行名稱指派。與id不同,class可以重復使用,對于多個樣式相同的元素,可以直接定義為一個class。
          使用class的優點已不言自明,它對CSS代碼重用性有良好的體現,眾多的標簽均可以使用一個樣式來定義而不需要每一個編寫一個樣式代碼。
          XHTML如下:

          <p class="he"></p>
          <span class="he"></span>
          <h5 class="he"></h5>
           
          CSS如下:

          .he
          {
          margin:10px;
          background-color:red;
          }
           
          六、標簽指定式的選擇符

          如果想同時使用id和class,也想同時使用標簽選擇符,可以使用如下的方式:

          h1#content {}
          /*表示所有id為content的h1標簽*/
          h1.p1 {}
          /*表示所有class為p1的h1標簽*/
           
          標簽指定式選擇符的精度介于標簽選擇符及id/class選擇符之間,是常用的選擇符之一。

          七、組合選擇符

          對于上面的所有選擇符而言,進行組合使用。如下:

          h1 .p1 {}
          /*表示h1下的所有class為p1的標簽*/
          #content h1 {}
          表示id為content的標簽下的所有h1標簽
          h1 .p1,#content h1 {}
          /*表示h1下的所有class為p1的標簽以及id為content的標簽下的所有h1標簽*/
          h1#content h2{}
          /*id為content的h1標簽下的h2標簽*/
           
          CSS選擇符是非常自由與靈活的,可以根據頁面的需要,使用各種選擇符,盡量結構化與優化CSS文件.

          相關閱讀
          divcss范例下載
          asp正則替換內容里的CSS樣式
          百度蜘蛛飼養技巧
          網上購物車購物數量加減效果
          安卓ES文件瀏覽器訪問電腦上共享文件夾設置
          asp隨機顯示字符長度與類型(可隨機顯示數字、小寫字母、大寫字母,可以做為隨機密碼使用)
          uni-app基礎知識事件綁定@click與@tap點擊事件區別
          在未知圖片的寬度與高度時利用div+css將圖片居中
          共有0條關于《CSS選擇符詳解》的評論
          發表評論
          正在加載評論......
          返回頂部發表評論
          呢 稱:
          表 情:
          內 容:
          評論內容:不能超過 1000 字,需審核,請自覺遵守互聯網相關政策法規。
          驗證碼: 驗證碼 
          網友評論聲明,請自覺遵守互聯網相關政策法規。

          您發布的評論即表示同意遵守以下條款:
          一、不得利用本站危害國家安全、泄露國家秘密,不得侵犯國家、社會、集體和公民的合法權益;
          二、不得發布國家法律、法規明令禁止的內容;互相尊重,對自己在本站的言論和行為負責;
          三、本站對您所發布內容擁有處置權。

          更多信息>>欄目類別選擇
          百度小程序開發
          微信小程序開發
          微信公眾號開發
          uni-app
          asp函數庫
          ASP
          DIV+CSS
          HTML
          python
          更多>>同類信息
          jquery設置或獲取修改classname
          利用css3.0寫出一個音樂播放的唱片碟盤的效果
          利用css中的scale()實現放大縮小效果
          利用background-color:#000000a8在背景顏色16進制代碼之后加字母加上數字讓背景色透明
          css背景使用base64編碼或者將base64編碼放在img圖片標簽中
          利用css3中的-webkit-font-smoothing把網頁文字的毛邊去掉
          更多>>最新添加文章
          dw里面查找替換使用正則刪除sqlserver里面的CONSTRAINT
          Android移動端自動化測試:使用UIAutomatorViewer與Selenium定位元素
          抖音直播音掛載小雪花 懂車帝小程序
          javascript獲取瀏覽器指紋可以用來做投票
          火狐Mozilla Firefox出現:無法載入您的Firefox配置文件 它可能已經丟失 或是無法訪問 問題解決集合處理辦法
          在Android、iOS、Windows、MacOS中微信小程序的文件存放路徑
          python通過代碼修改pip下載源讓下載庫飛起
          python里面requests.post返回的res.text還有其它的嗎
          更多>>隨機抽取信息
          windows xp 安裝IIS,設置IIS。
          改善用戶體驗之checkbox表單(最多可以選擇三個)
          asp利文本文檔加FSO統計網站訪問量的方法
          css 里面的圖片定位position高級應用
          右下角彈出框帶關閉,非常不錯,可以用于后臺提示
          襄陽康輝國際旅行社
          88国产精品视频一区二区三区