css3 僞元素和僞類選擇器詳解

時間 2019-11-12

標籤 css3 css 元素選擇器詳解欄目 CSS 简体版

原文原文鏈接

轉自腳本之家：http://www.jb51.net/css/213779.htmlphp

不管是僞類仍是僞元素，都屬於CSS選擇器的範疇。因此它們的定義能夠在CSS標準的選擇器章節找到。分別是 CSS2.1 Selectors 和 CSS Selector Level 3，二者都已是推薦標準。css

僞類選擇器：CSS中已經定義好的選擇器,不能隨便取名

經常使用的僞類選擇器是使用在a元素上的幾種，`如a:link|a:visited|a:hover|a:active`html

提示：在 CSS 定義中，a:hover 必須被置於 a:link 和 a:visited 以後，纔是有效的。前端

提示：在 CSS 定義中，a:active 必須被置於 a:hover 以後，纔是有效的。css3

僞元素選擇器：並非針對真正的元素使用的選擇器，而是針對CSS中已經定義好的僞元素使用的選擇器。web

CSS中有以下四種僞元素選擇器：
· first-line:爲某個元素的第一行文字使用樣式；
· first-letter:爲某個元素中的文字的首字母或第一個字使用樣式；
· before:在某個元素以前插入一些內容；
· after: 在某個元素以後插入一些內容；
使用方法：選擇器：僞元素{樣式}spa

結構性僞類選擇器
1. 四個最基本的：root、not、empty、target .net

2. first-child、last-child、nth-child、nth-last-child、
nth-child(odd)、nth-child(even)、nth-last-child(odd)、nth-last-child(even)code

3. nth-of-type、nth-last-of-type
4. 循環使用樣式
5. only-childhtm

:root()選擇器，從字面上咱們就能夠很清楚的理解是根選擇器，他的意思就是匹配元素E所在文檔的根元素。在HTML文檔中，根元素始終是<html>。「:root」選擇器等同於<html>元素

:not()選擇器稱爲否認選擇器，和jQuery中的:not選擇器如出一轍，能夠選擇除某個元素以外的全部元素。

:empty()選擇器表示的就是空。用來選擇沒有任何內容的元素，這裏沒有內容指的是一點內容都沒有，哪怕是一個空格。

:target()選擇器來對頁面某個target元素(該元素的id被當作頁面中的超連接來使用)指定樣式，該樣式只在用戶點擊了頁面中的超連接，而且跳轉到target元素後起做用

「:first-child()」選擇器表示的是選擇父元素的第一個子元素的元素E。簡單點理解就是選擇元素中的第一個子元素，記住是子元素，而不是後代元素。

:nth-child()選擇某個元素的一個或多個特定的子元素；
:nth-last-child()從某父元素的最後一個子元素開始計算，來選擇特定的元素。

看下面一個例子：

 1 <style type="text/css"> 
 2 div p:nth-last-child(2){
 3 color:red;
 4 }
 5 </style>
 6 </head>
 7 <body>
 8 <div> 
 9 <p>前端</p>
10 <p>開發</p>
11 <p>工程</p>
12 <p>軟件</p>
13 <p>工程</p>
14 </div>
15 </body>

:nth-child()能夠選擇某個的一個或多個特定的子元素，你能夠按這種方式進行選擇：
        :nth-child(length);/*參數是具體數字*/
        :nth-child(n);/*參數是n,n從0開始計算*/
        :nth-child(n*length)/*n的倍數選擇，n從0開始算*/
        :nth-child(n+length);/*選擇大於length後面的元素*/
        :nth-child(-n+length)/*選擇小於length前面的元素*/
        :nth-child(n*length+1);/*表示隔幾選一*/
        //上面length爲整數

值得注意的是：nth-child(0)沒有選擇元素，nth-child(1)選擇第一個元素。

 1 <style type="text/css"> 
 2 *{list-style:none;};
 3 .demo {
 4 width: 400px;
 5 padding: 10px; 
 6 }
 7 .demo li {
 8 padding: 5px;
 9 float: left;
10 margin-right:4px;
11 }
12 .demo li a {
13 float: left;
14 display: block;
15 height: 20px;
16 line-height: 20px;
17 width: 20px;
18 -moz-border-radius: 10px;
19 -webkit-border-radius: 10px;
20 border-radius: 10px;
21 text-align: center;
22 background: #f36;
23 color: white;
24 text-decoration: none;
25 }
26 .demo li:nth-child(1){
27 background:#01FEFE;
28 }
29 .demo li:nth-child(2n){
30 background:#4679BD;
31 }</p> <p> </style>
32 </head>
33 <body>
34 <div class="demo">
35 <ul>
36 <li class="one" id="first"><a href="">1</a></li>
37 <li class="two"><a href="">2</a></li>
38 <li class="three"><a href="">3</a></li>
39 <li class="four"><a href="">4</a></li>
40 <li class="five"><a href="">5</a></li>
41 <li class="six"><a href="">6</a></li>
42 <li class="seven"><a href="">7</a></li>
43 <li class="eight"><a href="">8</a></li>
44 <li class="nine"><a href="">9</a></li>
45 <li class="ten" id="last"><a href="">10</a></li>
46 </ul>
47 </div>

「:nth-of-type(n)」選擇器和「:nth-child(n)」選擇器很是相似，不一樣的是它只計算父元素中指定的某種類型的子元素。當某個元素中的子元素不僅僅是同一種類型的子元素時，使用「:nth-of-type(n)」選擇器來定位於父元素中某種類型的子元素是很是方便和有用的。

":only-child"表示的是一個元素是它的父元素的惟一一個子元素。

僞元素：
CSS中的僞元素你們之前看過：:first-line,:first-letter,:before,:after;
那麼在CSS3中，他對僞元素進行了必定的調整，在之前的基礎上增長了一個「：」也就是如今變成了「::first-letter,::first-line,::before,::after」另外他還增長了一個「::selection」,兩個「：：」和一個「：」css3中主要用來區分僞類和僞元素，到目前來講，這兩種方式都是被接受的，也就是說無論使用哪一種寫法所起的做用都是同樣的，只是一個書寫格式不一樣而以。

::first-line選擇元素的第一行，好比說改變每一個段落的第一行文本的樣式，咱們就可使用這個
p::first-line {font-weight:bold;}

::before和::after這兩個主要用來給元素的前面或後面插入內容，這兩個經常使用"content"配合使用，見過最多的就是清除浮動，

1 .clearfix:before,
2 .clearfix:after {
3 content: ".";
4 display: block;
5 height: 0;
6 visibility: hidden;
7 }
8 .clearfix:after {clear: both;}
9 .clearfix {zoom: 1;}

::selection用來改變瀏覽網頁選中文的默認效果

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。