一、CSS複合選擇器

複合選擇器就是兩個或多個基本選擇器通過不同方式組合而成的選擇器，可以實作更強、更友善的選擇功能，主要有交集選擇器、并集選擇器和後代選擇器等。

交集選擇器

交集選擇器是由兩個選擇器直接連接配接構成的，其結果是選中兩者各自作用範圍的交集。其中，第一個必須是标記選擇器，第二個必須是類選擇器或ID選擇器，例如：“h1.class1；p#id1”。

交集選擇器的基本文法格式如下。

tagName.className {

property:value;

}

示例示範了交集選擇器的作用

代碼

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <style>
        div {
            color: blue;
            font-size: 9px;
        }


        .class1 {
            font-size: 12px;
        }


        div.class1 {
            color: red;
            font-size: 10px;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div>正常div标記，藍色，9px</div>
<p class="class1">類選擇器，12px</p>


<div class="class1">交集選擇器，紅色，加粗，10px</div>
</body>
</html>

效果

#yyds幹貨盤點# CSS複合選擇器一、CSS複合選擇器二、CSS3新增的選擇器三、使用CSS設計網站頁面

并集選擇器

并集選擇器就是對多個選擇器進行集體聲明，多個選擇器之間用“，”隔開，每個選擇器可以是任何類型選擇器。

如果某些選擇器定義的樣式完全相同，或者部分相同，則可以使用并集選擇器。

下面是并集選擇器的文法格式。

selector1,selector2,… {

property:value;

}

示例示範了并集選擇器的作用

代碼

後代選擇器

在CSS選擇器中，還可以通過嵌套的方式，對特殊位置的HTML标記進行控制。例如，當

<div>

與

</div>

之間包含

<b>

标記時，就可以使用後代選擇器定義出現在

<div>

标記中的

<b>

标記的格式。後代選擇器的寫法是把外層的标記寫在前面，内層的标記寫在後面，之間用空格隔開。

selector1 selector2 {

property:value;

}

兩個選擇器之間用空格隔開，并且selector2是selector1包含的對象。

示例

代碼

<!DOCTYPE html >
	<head>
	<meta charset="utf-8">
	</head>
	<style>
	div {
	font-family: "幼圓";
	color: #003;
	font-size: 12px;
	font-weight: bold;
	}
	
	div li {
	/*後代選擇器*/
	margin: 0px;
	padding: 5px;
	list-style: none; /*隐藏預設清單符号*/
	}
	
	div li a {
	/*後代選擇器*/
	text-decoration: none; /*取消超連結下劃線*/
	}
	</style>
	<body>
	<div><a rel="nofollow" href="#">請選擇下列選擇器</a>
	<ul>
	<li><a rel="nofollow" href="#">交集選擇器</a></li>
	<li><a rel="nofollow" href="#">并集選擇器</a></li>
	<li><a rel="nofollow" href="#">後代選擇器</a></li>
	<li><a rel="nofollow" href="#">子選擇器</a></li>
	<li><a rel="nofollow" href="#">相鄰選擇器</a></li>
	</ul>
	</div>
	</body>
	</html>

效果

子選擇器

子選擇器文法格式如下：

selector1>selector2

示例

代碼

<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<style>
	div > p {
	font-family: "幼圓";
	color: #F00;
	}
	</style>
	</head>
	<body>
	子選擇器是在CSS2.1以後的版本中增加的。
	<div>
	<p>本行應用了子選擇器,幼園紅色</p>
	
	
	<em>
	<p>本行不屬于相鄰選擇器，因為div标記和p标記不同級</p>
	</em>
	<p>本行應用相鄰選擇器,幼園紅色</p>
	</div>
	
	</body>
	</html>

效果

相鄰選擇器

相鄰選擇器的定義符号是加号（+），可以選中緊跟在它後面的一個兄弟元素（這兩個元素具有共同的父元素）

示例

代碼

<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<style>
	div + p {
	font-family: "幼圓";
	color: #F00;
	}
	</style>
	</head>
	<body>
	<div>相鄰選擇器是在CSS2.1以後的版本中增加的。</div>
	<p>本行應用相鄰選擇器,幼園紅色</p>
	
	<p>本行不與div相鄰,相鄰選擇器無效</p>
	**************************
	<div>相鄰選擇器是在CSS2.1以後的版本中增加的。
	<p>本行不屬于相鄰選擇器，因為div标記和p标記不同級</p>
	</div>
	***************************
	<div>相鄰選擇器是在CSS2.1以後的版本中增加的。</div>
	本行無标記，不影響應用相鄰選擇器
	<p>本行應用相鄰選擇器,幼園紅色</p>
	</body>
	</html>

效果

二、CSS3新增的選擇器

屬性選擇器

通過各種各樣的屬性，可以給元素增加很多附加資訊。例如，通過id屬性，可以區分不同的元素；通過class屬性，可以設定元素的樣式。

為了擴充屬性選擇器的功能，可以使用^、$和*這三個通配符。

屬性選擇器及其功能

示例是關于屬性選擇器的一個例子

代碼

<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<style type="text/css">
	* {
	/*網頁中所有文字的格式*/
	text-decoration: none;
	font-size: 16px;
	}
	
	a[href^=http]:before {
	/*在指定屬前之前插入内容*/
	content: "超文本傳輸協定: ";
	color: red;
	}
	
	a[href$=jpg]:after, a[href$=png]:after {
	/*在指定屬前之後插入内容*/
	content: " 圖像";
	color: green;
	}
	</style>
	</head>
	<body>
	<ul>
	<li><a rel="nofollow" href="http://dltravel.html">Welcome to DL</a></li>
	<li><a rel="nofollow" href="firework.png">Firework素材</a></li>
	<li><a rel="nofollow" href="photoShop.jpg">Photoshop素材</a></li>
	</ul>
	</body>

效果

僞類選擇器

僞類選擇器差別于類選擇器，類選擇器是由使用者自行定義，而僞類選擇器是在CSS中已經定義好的選擇器。

僞類選擇器可以分為結構僞類選擇器和UI元素僞類選擇器2種。

1. 基本結構僞類選擇器

基本結構僞類選擇器

僞類選擇器可以分為結構僞類選擇器和UI元素僞類選擇器2種。

2. 與元素位置有關的結構僞類選擇器

與元素位置有關的結構僞類選擇器

示例

代碼

<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<style type="text/css">
	table {
	border:none;
	font: 14px 宋體;
	}
	table caption { /*表格标題*/
	padding: 5px;
	background-color: lightgrey;
	font-size: 24px;
	}
	thead {/*表頭定義*/
	background-color:dodgerblue;
	color: white;
	}
	tbody tr:nth-child(odd){/*表體定義，奇數行偶數行分别定義*/
	background-color:#cbcbcb ;
	}
	tbody tr:nth-child(even){
	background-color: #aaa;
	}
	td,th {
	padding: 5px;
	border-bottom: 1px solid white;
	}
	</style>
	</head>
	<body>
	<table cellspacing="0">
	<caption>大連廣場</caption>
	<thead>
	<tr>
	<th>廣場名稱</th><th>特點描述</th>
	</tr>
	</thead>
	<tbody>
	<tr><td>星海廣場</td><td>從星海廣場沿中央大道北行500米左右是星海會展……</td></tr>
	<tr><td>人民廣場</td><td>城雕前100雙腳印揭示了大連一步一個腳印地走過了百年……</td></tr>
	<tr><td>中山廣場</td><td>是一個購物，餐飲，休閑，娛樂一站式購物街區……</td></tr>
	<tr><td>友好廣場</td><td>博物館/紀念展覽館，主題公園/遊樂場……</td></tr>
	<tr><td>五四廣場</td><td>從百盛的興起，到家樂福的進駐，再到羅斯福的開業……</td></tr>
	</tbody>
	</table>
	</body>
	</html>

效果

3.UI僞類選擇器

常用的UI僞類選擇器

示例

代碼

<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>Document</title>
	<style>
	input[type="text"]:enabled{
	background-color:#FF0;
	}
	input[type="text"]:disalbed{
	background-color:#F0F;
	}
	</style>
	</head>
	<body>
	<form>
	姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:<input type="text" name="text1" disabled/> <br>
	身份證号碼:<input type="text" name="text2" enabled />
	</form>
	
	</body>
	</html>

效果

示例是超級連結的僞類選擇器的應用。

示例展示了僞類選擇器:focus和:first-child的功能

代碼

<!DOCTYPE html>
	<head>
	<meta charset=" utf-8"/>
	<title>僞類選擇器</title>
	<style>
	input:focus {
	background: #FF6;
	font-family: "黑體";
	font-size: 12px;
	}
	
	div:first-child {
	color: #060;
	font-family: "黑體";
	font-size: 12px;
	}
	</style>
	</head>
	<body>
	first-child 僞類選擇器示例:
	<div>本塊是body的first-child，按指定格式顯示</div>
	<strong>
	<div>本塊是strong的first-child，本行按指定格式顯示</div>
	<div>本行非first-child，未按指定格式顯示</div>
	</strong>
	
	<p>
	:focus僞類選擇器示例：
	
	<form name="form1" method="get">
	請輸入姓名：<input type="text" name="name"/>
	</form>
	</body>
	</html>

效果

僞元素選擇器

1．:first-letter和:first-line

:first-letter用于選中元素内容的首字元。:first-line用于選中元素中的首行文本。

2．選擇器:before和:after

:before和:after兩個僞對象必須配合content屬性使用才有意義。它們的作用是在指定的标記内産生一個新的行内标記，該行内元素的内容由content屬性裡的内容決定。

before選擇器用于在某個元素之前插入内容。

<E>: before {

content:文字或其他内容

}

after選擇器用于在某個元素之後插入内容。

<E>: after {

content:文字或其他内容

}

示例

代碼

<!DOCTYPE HTML>
	<html>
	<head>
	<meta charset=utf-8>
	<style>
	li:after {
	content: "(僅用于測試，請勿用于商業用途。)";
	font-size: 12px;
	color: red;
	}
	
	p:before {
	content: "★ ";
	}
	</style>
	</head>
	<body>
	課程清單
	<ul>
	<li><a rel="nofollow" href="html.mp4">HTML5</a></li>
	<li><a rel="nofollow" href="css.mp4">CSS3</a></li>
	<li><a rel="nofollow" href="JS.mp4">JavaScript</a></li>
	</ul>
	<h2>HTML5</h2>
	
	<p>Canvas</p>
	
	<p>WebWorker</p>
	
	<p>WebStorage</p>
	
	<p>離線應用</p>
	
	<p>WebSocket</p>
	</body>
	</html>

效果

三、使用CSS設計網站頁面

<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<title>Web前端技術</title>
	<style type="text/css">
	<!--
	table[id="out"] {
	width: 760px;
	border: 1px solid #9fa1a0;
	margin: 0 auto;
	padding: 0;
	}
	.menu_style,.foot_style { /*菜單設定*/
	height: 23px;
	line-height: 23px;
	background-color: #90d226;
	text-align: center;
	vertical-align: middle;
	}
	.menu_style a {/*超級連結*/
	display: inline-block;
	width: 80px;
	text-decoration: none;
	}
	a:link {
	font-size: 12px;
	color: #336699;
	text-decoration: none;
	}
	table[id="main"] {
	width: 100%;
	height: 256px;
	border: 0;
	padding: 0;
	}
	.wodeweizhi { /*我的位置*/
	width: 550px;
	vertical-align: top;
	padding-top: 10px;
	padding-left: 10px;
	}
	hr { /*水準線*/
	width: 500px;
	text-align: center;
	}
	.zw { /*正文段落*/
	font-size: 12px;
	line-height: 1.75em;
	color: #666666;
	text-align: left;
	text-indent: 2em;
	}
	table[id="search"] {
	width: 170px;
	height: 110px;
	border: 1px solid #CCC;
	padding: 0;
	margin: 0 auto;
	}
	form { /*表單*/
	height: 110px;
	width: 170px;
	}
	input { /*輸入域*/
	height: 17px;
	width: 67px;
	border: thin solid #467BA7;
	}
	.dianxingkuangjia { /*典型架構*/
	text-align: center;
	font-weight: bold;
	color: #06F;
	}
	.dianxingkuangjia a {
	text-decoration: none;
	}
	.dianjizheli { /*點選這裡*/
	font-size: 12px;
	line-height: 1.75em;
	color: #666666;
	}
	-->
	</style>
	</head>
	
	<body>
	<table id="out">
	<tr>
	<td style="text-align:center;padding:0;"><img src="images/title3.jpg" style="width:760px; height:161px;"/>
	</td>
	</tr>
	<tr>
	<td class="menu_style">
	<a rel="nofollow" href=""> HTML</a>
	<a rel="nofollow" href=""> CSS</a>
	<a rel="nofollow" href="">JavaScript</a>
	<a rel="nofollow" href="">Ajax</a>
	<a rel="nofollow" href="">XML</a>
	<a rel="nofollow" href=""></a>
	</td>
	</tr>
	<tr>
	<td>
	<table id="main">
	<tr>
	<td class="wodeweizhi"><p class="zw">我的位置&gt;&gt;CSS</p>
	<hr/>
	<p class="zw">CSS(Cascading Style
	Sheets，層疊樣式表)是标準的布局語言，用來控制元素的尺寸、顔色和排版，用來定義如何顯示HTML元素，純CSS的布局與XHTML相結合，可使内容表現與結構相分離，并使網頁更容易維護，易用性更好。
	請參閱<a rel="nofollow" href="#">CSS詳解</a>。</p>
	<p class="zw"> 常見的CSS開發工具有包括記事本、EditPlus文本編輯器；可視化網頁開發工具Dreamweaver CS5、Frontpage等.</p>
	<p class="zw">關于CSS的一些問題，歡迎和我們交流<a rel="nofollow" href="#">Email me</a>. </p>
	</td>
	<td>
	
	<form id="form1" name="form1" method="post" action="">
	<table id="search">
	<tr>
	<td style="width:50%;"><img src="images/username.jpg" /></td>
	<td>
	<input type="text" name="uname" id="uname"/></td>
	</tr>
	<tr>
	<td><img src="images/password.jpg" /></td>
	<td>
	<input type="text" name="pwd" id="pwd"/></td>
	</tr>
	<tr>
	<td><span class="dianjizheli">點選這裡</span><a rel="nofollow" href="#">注冊</a></td>
	<td><img src="images/login_1.jpg" style="width:44px;
	height:17px;"/></td>
	</tr>
	</table>
	</form>
	<div class="dianxingkuangjia">
	<p>典型架構</p>
	<p><a rel="nofollow" href="#">JQuery</a></p>
	<p><a rel="nofollow" href="#">Dojo</a></p>
	<p><a rel="nofollow" href="#">Prototype</a></p>
	</div>
	</td>
	</tr>
	</table>
	</td>
	</tr>
	<tr>
	<td class="foot_style"><p>版權所有</p></td>
	</tr>
	</table>
	</body>
	</html>

#yyds幹貨盤點# CSS複合選擇器一、CSS複合選擇器二、CSS3新增的選擇器三、使用CSS設計網站頁面

一、CSS複合選擇器

交集選擇器

并集選擇器

後代選擇器

子選擇器

相鄰選擇器

二、CSS3新增的選擇器

屬性選擇器

僞類選擇器

1. 基本結構僞類選擇器

2. 與元素位置有關的結構僞類選擇器

3.UI僞類選擇器

僞元素選擇器

1．:first-letter和:first-line

2．選擇器:before和:after

三、使用CSS設計網站頁面

繼續閱讀

門戶通專訪草根站長九天狼：做站貴在堅持

如何成為一名.net 工程師?

[轉]如何成長為一名全棧工程師全棧工程師

tabpanel 使用問題

為什麼把CSS放頭部，script放下面

underscore模闆功能的使用和學習

CSS之折疊菜單

web開發之前後端渲染

DOM下元素 offset client scroll 相關屬性簡介

IE8 CSS設定DIV居中，添加“margin:0 auto”

403 Forbidden，You don't have permission to access / on this server.Forbidden

JavaScript的那些坑之事件代理事件代理事件階段

ACS基本配置-權限等級管理

vue （vue2.0）使用總結(從大體結構總結)

父子元件間傳值的實作父子元件間傳值的實作

vue搭建過程及出現問題