HTML學習筆記 CSS學習選擇器案例第五節（原創）參考使用表

阿新 • • 發佈：2017-09-13

樣式 back ack aid head 派生選擇器 char logs pan

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="tzy.css" type="text/css">
    <style type="text/css">
        [title]{
            /*屬性選擇器*/
            color: brown;
        }
        [title=te] 
{
            /*屬性選擇器加值選擇器*/
            color: cadetblue;
        }
    </style>
</head>
<body>
<h1>
    應用了樣式表
</h1>
<h2>樣式2</h2>
<h3>樣式3</h3>

<p><strong>這個樣式引用strong派生選擇器</strong></p>
<ul>
    <li>
        <strong 
>這個會被li strong派生選擇器選擇</strong>
    </li>
</ul>
<div id="pid"><p>這個會引用ID選擇器</p></div>
<p id="ppd">這個會使用id選擇器<a href="http://www.baidu.com">這個會使用派生選擇器</a></p>
<p class="pclass">這個會引用類選擇器</p>
<p class="pclass">這個會使用類選擇器<a href 
="http://www.baidu.com">這個會使用派生選擇器</a></p>
<p title="p">屬性選擇器引用 為指明值的可以隨便寫</p>
<p title="te">屬性選擇器引用 指明值的如果寫的不一樣就執行沒指明值的選擇器</p>
<p title="te1">屬性選擇器引用 指明值的如果寫的不一樣就執行沒指明值的選擇器</p>
<p id="p1">
    拯救大兵瑞恩
    <span>白蛇傳<span>獨立宣言</span></span>
</p>

<p>拯救大兵<span>白蛇傳<span>肚子大了</span></span></p>
</body>
</html>

h2,h1{
    /*選擇器分組*/
    color: blue;
    font-family: 楷體;
    font-size: 50px;
}
body{
    /*沒有定義樣式的就會引用BODY裏的樣式（可以理解為繼承）*/
    color: aqua;
}
li strong{
    /*派生選擇器*/
    color: bisque;
}
strong{
    /*派生選擇器*/
    color: #FF00FF;
}
p span span{
    /*派生選擇器*/
    font-family:"楷體";
}
#p{
    /*id選擇器用#使用*/
    color: aquamarine;
}
#ppd a{
    /*id選擇器和派生選擇器一起使用*/
    color: blueviolet;
}
.pclass{
    /*類選擇器用.使用*/
    color: darkgreen;
}
.pclass a{
    /*類選擇器和派生選擇器一起使用*/
    color: blue;
}

樣式 back ack aid head 派生選擇器 char logs pan <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

HTML學習筆記 CSS背景樣式案例第六節（原創）參考使用表

ext jpg class 設置 link eight text spa .com <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

HTML學習筆記 w3sCss盒子模型（陰影）（div的一些使用）案例第十節（原創）參考使用表

idt pac cin head src 模型圖 div 盒子模型樣式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

JAVAscript學習筆記 jsDOM 第五節（原創）參考js使用表

doctype count1 長度 pan dom ID BE func alert <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

HTML學習筆記 CSS學習選擇器第五節（原創）

ext spa family 如果 styles ctype css gre utf <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <

HTML學習筆記 css定位浮動及瀑布流案例第十三節（原創）參考使用表

20px 筆記 lis containe use cor ack 100% set #fd { width: 100px; height: 150px; background-color: forestgreen; float: left;

HTML學習筆記 cs動畫基礎（分列效果可用於做瀑布流）第十五節（原創）參考使用表

har orm 顏色無限動畫 ext top 效果 rotate <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &

JAVAscript學習筆記 js句柄監聽事件第四節（原創）參考js使用表

必須 htm -c eve property blog uncaught event add <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

JAVAscript學習筆記 jsBOM 第七節（原創）參考js使用表

span aid cat alert 當前頁 config 彈出框 pan 針對 <html> <head> <title>day02_js</title> <scrip

HTML學習筆記基礎標簽及css引用案例第一節（原創）參考使用表

set utf har del 文件定義 .com eight head <!DOCTYPE html><html lang="en"><!--表示網頁文字以什

HTML學習筆記 css定位（靜態，相對，固定，絕對布局）偏移案例第十二節（原創）參考使用表

absolute write style 用戶學習 nbsp -c code posit <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

HTML學習筆記 CSS表格及輪廓案例第八節（原創）參考使用表

idt ali char ID utf-8 內邊距 AC utl 參考 #tb, tb1, tr, th, td { border: 5px solid blue; /*加邊框*/ padding: 5px; /*內邊距*/ }

HTML學習筆記 CSS樣式第六節（原創）

Y軸重復 eight -i tac 圖片 500px itl idt <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&

HTML學習筆記 cs2D3D展示基礎第十四節（原創）參考使用表

safari 學習筆記 ans com div2 s2d spa har tex <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

HTML學習筆記 iframe引用頁面按列(針對target打開方式解釋) 第九節（原創）

type head -- eight frame top target span utf <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&

JAVAscript學習筆記 js事件第一節（原創）參考js使用表

onchange onf form 看不見鼠標 hello cnblogs html 加載 <!DOCTYPE html> <html lang="en" onUnload="ud()"> <head> <meta ch

JAVAscript學習筆記 js異常第二節（原創）參考js使用表

htm demo cnblogs value demo1 span 自定義 char 按鈕 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

CSS學習筆記之關聯選擇器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/x

鋒利的jQuery學習筆記之jQuery選擇器

空格 attr 簡單 cap 字符串 check disable select file 在介紹jQuery選擇器之前，先簡單介紹一下CSS選擇器---> 一、CSS選擇器常見的CSS選擇器有以下幾種：選擇器語法描述示例標簽選擇器 E{CSS規則

HTML學習筆記 css定位浮動及瀑布流第十三節（原創）

oct adding styles gin ima alt eight div height <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">

HTML學習筆記 CSS學習選擇器案例 第五節 （原創） 參考使用表

相關推薦

HTML學習筆記 CSS學習選擇器案例第五節（原創）參考使用表