1. 程式人生 > >技術就是個紙老虎---為之,則難者亦易矣;不為,則易者亦難矣。

技術就是個紙老虎---為之,則難者亦易矣;不為,則易者亦難矣。

         所有HTML語言中的標記都是通過不同的CSS選擇器進行控制的。使用者只需要通過選擇器對不同的HTML標籤進行控制,並賦予各種樣式宣告,以實現各種效果。

一、常見的幾種選擇器

1、標記選擇器

         一個HTML頁面有很多不同的標記組成,宣告哪些標記採用哪種CSS樣式,即標記選擇器。一旦宣告那麼頁面中所有的該標記都會相應產生變化。例:

<html>

<head>

<title>標記選擇器</title>

<style type="text/css">

<!--

h2{/* h2標記的顏色為紅色 */

color

:red;

font-size:20px;

}

}

-->

</style>

</head>

<body>

<h2>格言</h2>

<p>好好學習,天天向上</p>

<h3>春曉</h3>

<p>春眠不覺曉,處處蚊子咬</p>

</body>

</html>

執行結果:

2、類別選擇器

        類別選擇器的類別名稱由使用者自定義,屬性和值跟標記選擇器一樣,類別名稱前面有一個點符號如下例中的.first,或者在標記後接類別名稱,如下例中的p.second,使用時需要在標籤裡新增class屬性,指定類別選擇器名稱。

例:

<html>

<head>

<title>類別選擇器</title>

<style type="text/css">

<!--

.first{

color:red;/* 紅色 */

font-size:20px;/* 文字大小 */

}

p.second{

color:blue;/* 藍色 */

font-size:17px;/* 文字大小 */

}

-->

</style>

</head>

<body>

<h2 class="first">格言</h2>

<p class="second">

好好學習,天天向上</p>

<h2 class="first">春曉</h2>

<p class="second">春眠不覺曉,處處蚊子咬</p>

</body>

</html>

執行結果:

3、ID選擇器

        在HTML標籤裡宣告ID名稱,然後在CSS樣式裡宣告一個與此標籤ID名稱一樣的選擇器,選擇器名稱前有一個#號。如下例中的#one。ID選擇器可以用於多個標記,但不推薦,因為JavaScript等指令碼語言也要呼叫html中設定的id,可能引起混亂。

例:

<html>

<head>

<title>ID選擇器</title>

<style type="text/css">

<!--

#one{

color:#F00;/* 紅色 */

font-size:20px;/* 文字大小 */

}

#two{

color:blue;/* 藍色 */

font-size:17px;/* 文字大小 */

}

-->

</style>

</head>

<body>

<p id="one">格言</p>

<p id="two">好好學習,天天向上</p>

<p>春曉</p>

<p>春眠不覺曉,處處蚊子咬</p>

</body>

</html>

執行結果:

二、這幾種選擇器的混合應用

1、選擇器集體宣告

        如果某些選擇器樣式風格完全相同,或者部分相同,可以使用集體宣告。各選擇器間用逗號分隔。

例:

<html>

<head>

<title>選擇器集體宣告</title>

<style type="text/css">

<!--

h1,h2,h3,p{/*標記選擇器集體宣告*/

color:green;

font-size:15px;/* 文字大小 */

}

h2.one,.two,#three{/*類選擇器,ID選擇器的集體宣告*/

text-decoration:none;

border-bottom: 1px solid red;

}

-->

</style>

</head>

<body>

<h1>格言</h1>

<h2 class="one">好好學習,天天向上</h2>

<h3 class="two">現在不受苦,將來必受罪</h3>

<p>春曉</p>

<p id="three">春眠不覺曉,處處蚊子咬</p>

</body>

</html>

執行結果:

2、選擇器的巢狀

        兩個選擇器之間用空格分開,前面的選擇器巢狀後面的選擇器,可以對特殊位置的HTML標記進行宣告。如下例中的p b和.one b,p.one del,多個巢狀之間用逗號分隔

例:

<html>

<head>

<title>選擇器的巢狀</title>

<style type="text/css">

<!--

p b{/* 標記選擇器的巢狀 */

color:Red;

font-size:20px;

}

.one b,p.one del{/* 類別選擇器(.onep.one來表示)的巢狀 */

color:green;

font-size:20px;

}

#two b{/* ID選擇器的巢狀 */

color:blue;

font-size:20px;

}

-->

</style>

</head>

<body>

<p>格言</p>

<p >好好學習,<b>天天</b>向上</p>

<p class="one">現在不受苦,<b>將來</b><del>受罪</del></p>

<p>春曉</p>

<p id="two">春眠不覺曉,<b>處處</b>蚊子咬</p>

</body>

</html>

執行結果:

3、子選擇器

        選擇一個父元素直接的子元素,不包括子元素的子元素,之間用大於號>分隔。如下例中的ul.myList>li>a,IE7不認這種選擇器,firefox可以

例:

<html>

<head>

<title>子選擇器</title>

<style type="text/css">

<!--

ul.myList>li>a{

color:red;

text-decoration:none;

}

-->

</style>

</head>

<body>

<ul class="myList">

<li><a href="#">春曉</a></li>

<ul>

<li><a href="#">春眠不覺曉</a></li>

<li><a href="#">處處蚊子咬</a></li>

<li><a href="#">夜來一翻身</a></li>

<li><a href="#">壓死不老少</a></li>

</ul>

</ul>

</body>

</html>

執行結果:IE7不認這種選擇器,firefox可以。如果要所有的都去掉下劃線只需要把ul.myList>li>a改為ul.myList li a就可以了

4、屬性選擇器

        針對HTML標記中的屬性進行選擇的。如下例的針對a標籤的title屬性進行設定 a[title]和a[title=c3]

例:

<html>

<head>

<title>屬性選擇器</title>

<style type="text/css">

<!--

a[title]{

color:green;

text-decoration:none;

}

a[title=c3]{

color:red;

text-decoration:none;

}

-->

相關推薦

技術就是紙老虎---難者易者

         所有HTML語言中的標記都是通過不同的CSS選擇器進行控制的。使用者只需要通過選擇器對不同的HTML標籤進行控制,並賦予各種樣式宣告,以實現各種效果。 一、常見的幾種選擇器 1、標記選擇器          一個HTML頁面有很多不同的標記組成,宣告哪些標記

重啟vue出現兩bug一個是element-ui樣式檔案存在另一個是vue-style-loader!css-loader?

These dependencies were not found: * element-ui/lib/theme-default/index.css in ./src/main.js * !!vue-style-loader!css-loader?{"sourceMap":true}

Linux防火墻基礎知識及應用設置SNAT策略局域網共享上網DNAT策略發布內部服務器

開啟 提供web服務 port 使用 配置 網頁 遵從 internet 個數 防火墻,通俗地打個比方就相當於城池周圍的護城河,開放和管理服務的提供一般電腦系統的安全主要取決於:1)第三方監控殺毒軟件 如360殺毒軟件2)系統策略 防火墻規則設定3)文件的權限設定 Lin

小程式報錯404xxx.css或xxx.js找伺服器快取問題

小程式報錯如下: 1.小程式報404錯誤,xxx.css或xxx.js檔案找不到,是伺服器快取問題。伺服器需要清理快取,不然會出現小程式後臺管理系統內容已經更新,可是訪問不了 2.我是用vue框架寫的小程式後臺管理系統,npm run build之後把dist裡面的stat

自學程式設計被嚇唬程式設計師:英語和數學你是在學編框嗎

一切都要從Python這門程式語言說起…… 去年教育部考試中心釋出了“關於全國計算機等級(NCRE)體系調整”的通知,決定自2018年3月起,在計算機二級考試加入了“Python語言程式設計師設計”科目; 早些訊息,浙江省將資訊科技教材程式語言從vb更換為了Python; 北京、山東也確

4.body-parser中介軟體的使用專門處理前端的post請求同理get請求在本例適用內含如何自定義中介軟體middleware

使用express框架可以結合中介軟體body-parser方便處理前端傳送過來的資料。(class10) 第一部分: 1.新建目錄後,開啟cmd---進入當前目錄---cnpm install express express-static body-parser   

Python配置過環境變數之後在Dos視窗輸入python打為什麼呢?

昨天自己安裝Python3.4.4版本,結果安裝好之後需要配置環境變數,按照往常的思維上網搜了一下:知道需要配置path系統環境變數,於是乎,自己找到安裝的路徑,把E:\python;E:\python\Script配置在path路徑之後,興致比比的準備在DOS視窗裝裝逼秀一下呢,結果當輸入

vue專案搭建(由於是初學者路由及檔案的放置有些規範一般子元件建議放於components下)

1.目錄簡介: 2.設定路由: 1)修改router/index.js檔案 引入元件: import Index from '@/index' import Login from '@/login' 設定路由: routes: [{         path:

主機推薦:遊子主機好不好用我說了用過才知道!

--廣告位佔位-- 先來介紹一下游子主機情 況:遊子主機位於美國西岸德克薩斯州SoftLayer機房和達拉斯ThePlanet機房、洛杉磯WebNX機房,美國西海岸對中國訪

阿里程式設計師透露收入直言除了寫程式啥都危機感十足!

阿里巴巴是中國知名的網際網路公司,每個人或多或少的都從淘寶上購買的物品,自從1998年成立到現在,裡面人才濟濟,裡面的程式設計師不僅工資非常的高,不少程式設計師年收入竟然過百萬。 有位員工在這個公司工作了好幾年,那工資肯定是不用說的,不過她吐槽自己出了程式就什麼都不會了,可是這些不就夠了嗎? 這

阿裏程序員透露收入直言除了寫程序啥都危機感十足!

酷炫 互聯網公司 技術 3-9 炫酷特效 不容易 決定 表示 學習交流 阿裏巴巴是中國知名的互聯網公司,每個人或多或少的都從淘寶上購買的物品,自從1998年成立到現在,裏面人才濟濟,裏面的程序員不僅工資非常的高,不少程序員年收入竟然過百萬。 有位員工在這個公司工作了好幾年,

阿里巴巴程式設計師透露收入直言除了寫程式啥都危機感十足!

阿里巴巴是中國知名的網際網路公司,每個人或多或少的都從淘寶上購買的物品,自從1998年成立到現在,裡面人才濟濟,裡面的程式設計師不僅工資非常的高,不少程式設計師年收入竟然過百萬。 有位員工在這個公司工作了好幾年,那工資肯定是不用說的,不過她吐槽自己出了程式就什麼都不會了,可是這些不就夠了

解決Unity中使用Ngui 的預設字型Arial在部分Android裝置顯示中文清楚或者顯示出來問題

Unity工程中的動態字型使用很方便,在一開始的工程中,為了減小遊戲包的大小,我們使用的是Unity內建的預設Arial字型,但是在遊戲上線測試後,很多玩家反饋個別機型字型顯示不完全,主要集中在 小米1代,OPPO,金立,中興等個別機型中。剛開始以為是NGUI的問題,

在java的多型呼叫中new的是哪一個類一定就是呼叫這個類的方法

 舉例說明: 知識點:  方法過載:同一個類中引數型別或者數量不同但方法名相同的方法。 方法重寫(覆寫/覆蓋):出現在具有繼承關係的類中,方法引數型別和個數、方法名以及返回值都相同,子類方法的訪問控制權限不能小於父類方法,子類方法會覆蓋掉父類方

ubuntu14.04 安裝網雲音樂失敗新版本網雲安裝

原因是因為新版本不支援14.04了,需要下載14.04對應的版本 s1.music.126.net/download/pc/netease-cloud-music_1.0.0_amd64_ubuntu

在非洲的大草原上每天當太陽升起的時候每頭羚羊都知道如果它跑得比最快的一頭獵豹還要慢那它就要失去生命同樣的每頭獵豹也懂得如果它跑得比最慢的那頭羚羊還要慢它也會失去生命

一.相信自己是一隻雄鷹        一個人在高山之巔的鷹巢裡,抓到了一隻幼鷹,他把幼鷹帶回家,養在雞籠裡。這隻幼鷹和雞一起啄食、嬉鬧和休息。它以為自己是一隻雞。這隻鷹漸漸長大,羽翼豐滿了,主人想把它訓練成獵鷹,可是由於終日和雞混在一起,它已經變得和雞完全一樣,根本沒有飛的願望了。主人試了各種辦法,都毫無效

工欲善其事必先利其器——學會將就讓自己事半功倍!

工欲善其事,必先利其器。磨刀不誤砍柴工。這些成語、俗語都告訴我們做事情前,先把用到的工具打理好,用起來才會得心應手,工作起來才會事半功倍!古代如此,在資訊化的今天更是如此。 作為一個程式設計師,每天的工作就是敲程式碼,合理的配置我們所用的IDE,會讓我們的工作事半功倍。有

今天linux下輸入法出現問題用ctrl+space 怎麼都切換過來能輸入中文不過終於找到答案了

在終端模式下,輸入sudo vi /etc/profile或 sudo vi 家目錄/.profile ,按i,然後在最後加入底下三行: export XMODIFIERS="@im=SCIM" export GTK_IM_MODULE="scim" export QT_I

檔案刪除檔案粉碎也不行掉只讀屬性F8安全模式下也刪引數正確

RT,本人各種情況都遇到過,試過網上的很多方法,自己也總結一下。 檔案刪除不了,檔案粉碎也不行,去不掉只讀屬性,DOS下也刪不掉,F8安全模式下也刪不掉 反正啥子招兒都試了,就是刪不掉,老頑固,格式化都不行,也沒有程式佔用這個資料夾,就是刪不掉。 分析: 1.通常刪不