CSS中層次、屬性、結構偽類選擇器
層次選擇器
注意: 這些選擇器最終的控制物件都是F!
實際應用中, 後代選擇器和子元素選擇器是使用得較多的!
屬性選擇器
結構偽類選擇器
E:first-child 選擇的是在同級元素中排第1位的E元素
E:last-child 選擇的是在同級元素中排最後1位的E元素
E:nth-child(n) 選擇的是在同級元素中排第n位的E元素
E:first-of-type 選擇的是同級E元素中排第1位的E元素
E:last-of-type
E:nth-of-type
條紋狀表格:
tr:nth-child(2n+1){
}
層次選擇器程式碼案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>層次選擇器</title>
<style type="text/css">
.nav>p{
color: red;
}
a{
color: red;
}
</style>
</head>
<body style="color: red;">
<a href="#">a標籤</a>
<div class="nav">
<p>p1</p>
<p>p2
<ul>
<li>
<p>li1</p>
</li>
<li>
<p>li1</p>
</li>
<li>
<p>li1</p>
</li>
</ul>
</p>
</div>
</body>
</html>
結構偽類選擇器程式碼案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>結構偽類選擇器</title>
<style type="text/css">
.div2 li:first-child{
color: red;
}
.div2 li:nth-child(2){
color: red;
}
.div2 li:last-child{
color: red;
}
/*這種方式是同級中找，不一定是指定的標籤。*/
p:first-child{
color: red;
}
/*指定同級標籤中找*/
p:first-of-type{
color: red;
}
p:last-of-type{
color: red;
}
</style>
</head>
<body>
<!---->
<span>span</span>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<div>
<span>span2</span>
<p>p4</p>
<p>p5</p>
<span>span2</span>
<p>p6</p>
</div>
<p>p7</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
</ul>
<div class="div2">
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
</ul>
</div>
</body>
</html>
屬性選擇器程式碼案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>屬性選擇器</title>
<style>
p[name]{
color: red;
}
/*input[type=text]{
border: 1px solid red;
}*/
/*input[name^=user]{
border: 1px solid red;
}*/
/* 不要怎麼做
* student[type=stu]{
color: red;
}*/
/*input[name$=Name]{
border: 1px solid red;
}*/
input[name*=r]{
border: 1px solid red;
}
</style>
</head>
<body>
<p id="user" name="p1">段落</p>
<student type="stu">學生</student>
<form action="" method="get">
使用者名稱稱：<input type="text" placeholder="請輸入userName" name="userName" value=""><br />
使用者密碼：<input type="password" placeholder="請輸入密碼" name="userPwd"><br />
<input type="submit" value="提交">
</form>
</body>
</html>
相關推薦
CSS中層次、屬性、結構偽類選擇器
層次選擇器 注意: 這些選擇器最終的控制物件都是F! 實際應用中, 後代選擇器和子元素選擇器是使用得較多的! 屬性選擇器 結構偽類選擇器 E:first-child 選擇的是在同級元素中排第1位的E元素 E:last-child 選擇的是在同級元素
css中的連結偽類選擇器、結構偽類選擇器、目標偽類選擇器
連結偽類選擇器 :link /*未訪問的連結 */ :visited /*已訪問的連結 */ :hover /*滑鼠移動到連結上 */ :active /*選定的連結 當我們點選別鬆開滑鼠 顯示的狀態 */ 注意寫的時候，他們的順序儘量不要顛倒 按照lvha的順序 結構偽類選擇器
允兒相簿—動畫、過渡、結構偽類選擇器
要點： 1.結構偽類選擇器，注意nth-child後面接括號，裡面寫數字，從0開始。 特殊開頭是first-child和last-child 2.過渡屬性有四個值，後面的效果時間曲線和延時設為預設 3.旋轉註意，正值為順時針，負值為逆時針，單位是度（deg，千萬不能與戰隊edg混，哈
如何使用CSS3中的結構偽類選擇器和偽元素選擇器
結構偽類選擇器介紹 結構偽類選擇器是用來處理一些特殊的效果。 結構偽類選擇器屬性說明表 屬性 描述 E:first-child 匹配E元素的第一個子元素。 E:last-child 匹配E元素的最後一個子元素。 E:nth-child(n) 匹配E元素的第n個子元素。 E:nth
css基礎 a:link/visited... 鏈接偽類選擇器
browser itl src mar color 且行且珍惜 text char chrome 禮悟： 公恒學思合行悟，尊師重道存感恩。葉見尋根三返一，江河湖海同一體。 虛懷若谷良心主，願行無悔給最苦。讀書鍛煉養身心，誠勸且行且珍惜。
用HTML寫偽類選擇器，結構偽類選擇器，偽元素選擇器樣式
選擇 ref -s foo uia temp size con ive html,css
css3結構偽類選擇器first-child,last-child,nth-child(),nth-last-child()
1 element:first-child 選擇屬於其父元素的首個子元素的element元素 注意：div:first-child 必須是其父元素下面的第一個子元素且必須是div元素才能匹配的到 匹配結果： 2 同理：element:las
【css】相容IE8及IE8以下偽類選擇器
前言：css偽類選擇器很好用，讓我們的工作變的更方便。但有個麻煩，IE8及IE8以下對很多偽類選擇器並不相容。這13個偽類選擇器是比較長用到的：這時會發現，IE9對這些偽類選擇器都能相容。IE8、IE7
HTML頁面中5種超酷的偽類選擇器:hover效果
第三方 ack 場景 solid paste form 討論 out 狀態 想在自己的網站中應用超酷的hover效果嗎？也許你可以從如下的這些實例中獲得一些靈感，如果你喜歡這些效果，也可以直接拷貝代碼並應用到你的站點。 給平淡的站點帶來活力 hover效果能給網頁增
呆呆鍵盤手11.13號學到的有關文字css、偽類選擇器、浮動的內容
1.文字css <ins></ins>下劃線標記 <del></del>刪除線標記 文字對齊：text-align-left/center/right 文字首行縮排：text-indent 單位px em
4、CSS及偽類選擇器
*{ margin:0; padding:0; } /* 群組選擇器 對幾個有相同屬性的選擇器進行樣式設定 兩個選擇器之間必須用逗號隔開*/ div,p{ width: 100px; height: 100px; backgr
第二天筆記-選擇器（標籤選擇器、類選擇器、css命名規範、谷歌案例、多類名選擇器、id選擇器、萬用字元選擇器、偽類選擇器）
四、選擇器 要想將CSS樣式應用於持定的HTML元素，首先需要找到該目標元素。在CSS中，執行這一任務的樣式規則部分則成為選擇器（選擇符）。 （一）標籤選擇器（元素選擇器） 標籤選擇器是隻用於HTML標籤名作為選擇器，按標籤名分類，為頁面中某一類標籤指定統
CSS偽類選擇器 ——:last-child、:nth-last-child(n)、:nth-last-of-type(n)
在系統的學習前端知識前，一直是JQuery的忠實使用者，很大程度上是由於它能夠很方便的獲取Element物件，通過它強大的選擇器 —— 《JQuery選擇器》，讓我們成功遠離原生JS獲取Element物件的苦惱和雞肋： document.getElementsByClassN
CSS3選擇器（基礎選擇器、屬性選擇器、偽類選擇器、選擇器策略）
《CSS3基本選擇器》 一、萬用字元選擇器（＊）*{marigin:0;padding:0;}二、元素選擇器(E)li {background-color: grey;color: orange;}三、類選擇器（.className）四、id選擇器（#ID）#first
屬性選擇器、偽元素選擇器、結構性偽類選擇器
一、屬性選擇器 html: <body> <div id="box1">示例1</div> <div id="box2">示例2</div> <div id="box3">
徹底搞懂CSS偽類選擇器：is、not
本文介紹一下Css偽類:is和:not，並解釋一下is、not、matches、any之前的關係 :not The :not() CSS pseudo-class represents elements that do not match a list of selectors. Since it prev
CSS3偽元素、偽類選擇器
first 偽類 ted :link sel OS lec 狀態 -s 偽元素選擇器： ::first-letter:為某個元素中的文字的首字母或第一個字使用樣式。 ::first-line:為某個元素的第一行文字使用樣式。 ::before:在某個元素之前插入一些
CSS中 a標籤的4個偽類
有時候在瀏覽一些網站時會發現，當你把滑鼠放在連結上時，它的顏色就會變，這就是用了css控制了它的四種狀態， 大家都知道a標籤可以用來實現超連結， 第一種狀態： link （預設）正常狀態（初
偽類選擇器、文字、顏色
一、選擇器 1、偽類選擇器--運動 transition:1s //運動的時間 相容性：火狐、谷歌 ie11 ie10 ie9以下，用js操作 //老版的相容性問題 瀏覽器的核心字
CSS偽類選擇器和CSS常用屬性
1:CSS偽類選擇器 1) 四種狀態: link:未訪問過的狀態 hover: 滑鼠停留在上面的狀態 active: 滑鼠點選時的狀態 visited: 訪問過後的狀態 2) 順序: 如果想讓四種狀態一直可以使用,必須按照link visited hover