css偽元素

xiaodao 發布于2019-08-29 13:30 / 682人閱讀

摘要：中的偽元素什么是偽元素可以先看一下幾個小例子文字的偽元素現在添加一個塊級標簽和一個行內標簽，并設置它的偽類字體間距效果如下文字的偽元素現在添加一個塊級標簽和一個行內標簽，并設置它的偽類我想人類可能會一直耐心維持這個稍微和平的

css中的偽元素

什么是偽元素？
可以先看一下幾個小例子：

:first-line 文字的偽元素

現在添加一個塊級標簽和一個行內標簽，并設置它的偽類：
 css:
  p:first-line{
      font-size: 20px;
      color:aquamarine;
      word-spacing: 20px;  /*字體間距*/
  }
  span::first-line{
      font-size: 200px;
      color:red;
      word-spacing: 20px;
  }
     

效果如下:

:first-letter 文字的偽元素

現在添加一個塊級標簽和一個行內標簽，并設置它的偽類：

html: 我想人類可能會一直耐心維持這個稍微和平的局面，但是呢？？？我們現在知道世界上不是只有“中國人”，有無數個國家，種族。

如何證明呢？做點兒家務活？不行，5歲小孩也能做。媽媽的單位在頤和園附近，我家住在公主墳，這段路程約莫有20里，是夠遠的！

css: p:first-letter{ font-size: 35px; color:aquamarine; } span::first-letter{ font-size: 50px; color:red; }

效果如下:

小結

看完了這兩例子，你們可以發現第一個例子第一行的字體顏色，大小發生了改變，可是在設置中沒有對p標簽直接設樣式，而是在p后面了一個：first-line,其實這就是偽類，html中并沒有這個元素，但可以用它設置第一行文字的特殊樣式，并且對行內標簽不起作用
first:letter 也是偽類，也對行內標簽不起作用，但是它設置的內容與第一個有不同，它是設置第一個字的特殊樣式。

：before

舉一個例子：





   我是一個小太陽

效果圖：

：after

        margin: 0;
       padding: 0;
    }
  .main{
     width: 300px;
     height:60px;
     margin: 20px auto ;
     position: relative;
  }
  span:after{
     content: url("./img/1.gif");
  }


   快給我頒獎吧

效果圖：

小結

看完了前兩個，再看第三個和第四個你會發現，前兩個是對文字的偽類，而第三個和第四個是它那一塊偽類，它對行級標簽也起作用
在上面的兩個例子中可以看到
：before 在元素之前添加內容

：after 在元素之后添加內容
：before 和：after 不僅可以在前面或后面添加內容，還可以畫一些小圖標

以下是我用：before 畫的一個簡易的放大鏡

效果圖

云服務器 GPU云服務器偽元素獲取偽元素 css元素偽參數

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112643.html

我終于理解了偽類和偽元素

摘要：偽類和偽元素，對于絕大多數同學來說，都是耳熟能詳的名字，但確實又有很多人搞不清楚它們之間的區別，以致于混淆概念。除了上面這個本質區別以外，在中，偽類用單冒號表示而偽元素用雙冒號表示。 showImg(https://segmentfault.com/img/bV4WC1?w=510&h=310); 偽類和偽元素，對于絕大多數同學來說，都是耳熟能詳的名字，但確實又有很多人搞不清楚它們之間...

張遷 2019-08-30 14:05 評論0 收藏0
CSS3偽類和偽元素

作為一個CSS3初學不久者來說，很容易混淆單冒號（:）和雙冒號（::）的用法，以為兩者可以互換著來使用。我自己之前也混淆過他們，因為兩者看起來太相像了，就像孿生兄弟。但實際上，他們的區別還是挺大的，最多算得上近房親戚。下面我們來開始講講單冒號（:）偽類和雙冒號（::）偽元素有什么相同和不同點（另外在CSS2中單冒號: 也叫做偽對象，具體可看看http://www.mb5u.com/tool/cs...

mozillazg 2019-04-23 13:35 評論0 收藏0
偽元素 ::after 和 ::before 應該這么用（一）

摘要：偽元素被當做的樣式來進行展現，用法和普通的元素用法是一樣的。中的偽元素使用個冒號，在中，為了區分偽類和偽元素，規定偽元素使用個冒號。偽元素的特點優點不占用節點，減少節點數。不僅塊級元素可以設置偽元素，大部分行級元素也可以。 1 什么是偽元素？ CSS 在渲染文檔的時候，偽元素可以通過 css 給 HTML 添加一個元素（叫標簽也行），這個元素在文檔樹中是找不到的。偽元素被當做 CSS ...

BlackMass 2019-08-30 15:54 評論0 收藏0
談談css偽類與偽元素

摘要：狀態偽類是基于元素當前狀態進行選擇的。在與用戶的交互過程中元素的狀態是動態變化的，因此該元素會根據其狀態呈現不同的樣式。單冒號用于偽類，雙冒號用于偽元素。可以通過對父元素添加偽類撐開父元素高度，因為就是其最后一個子元素。 css選擇器常見包括id（#id）、標簽（tag）、class（.class）、屬性[attr=attrval]等，還包括偽元素和偽類選擇器。正確的利用偽元素和偽類能...

Berwin 2019-08-01 18:04 評論0 收藏0
談談css偽類與偽元素

摘要：狀態偽類是基于元素當前狀態進行選擇的。在與用戶的交互過程中元素的狀態是動態變化的，因此該元素會根據其狀態呈現不同的樣式。單冒號用于偽類，雙冒號用于偽元素?？梢酝ㄟ^對父元素添加偽類撐開父元素高度，因為就是其最后一個子元素。 css選擇器常見包括id（#id）、標簽（tag）、class（.class）、屬性[attr=attrval]等，還包括偽元素和偽類選擇器。正確的利用偽元素和偽類能...

hedzr 2019-08-29 13:53 評論0 收藏0