亚洲欧美高清一区二区三区,а√天堂资源中文最新版资源下载,久久精品99无色码中文字幕

首頁 > 博客列表 > css選擇器介紹8.15作業(yè)

博主信息

博文 9

粉絲 0

評(píng)論 5

訪問量 10376

專題推薦

更多>

相關(guān)推薦

熱門教程

更多>

相關(guān)教程

實(shí)例

<!DOCTYPE html>
<html>
<head>
	<title>常用選擇器</title>
	<style>

		ul { /*標(biāo)簽選擇器*/
			/*padding: 0;*/
			margin:0;
			width: 550px;
			border:1px dashed #666;
			padding: 10px 5px;

		}
		/*子塊撐開父級(jí)*/
		ul:after {
			content: '';
			display: block;
			clear: both;

		}
		ul li {
			list-style: none;
			float: left;
			width: 40px;
			height: 40px;
			line-height: 40px;
			text-align: center;
			border-radius: 50%;
			box-shadow: 2px 2px 2px #888;
			background-color: skyblue;
			margin: 5px;

		}
		#item1{ /*ID選擇器用#選擇*/
			background-color: red;

		}
		/*類選擇器就是class選擇器 用.選擇*/
		.item2{
			background-color: pink;
		}
		/*屬性選擇器比較多： 根據(jù)屬性名選擇 根據(jù)屬性值選擇 */  
		ul li[class]{
			background-color: green;
		}

		
		/*屬性選擇器比較多：  根據(jù)屬性值選擇 */  
		ul li[class="item2"]{
			background-color: pink;
		}

		/*屬性選擇器比較多：  以指定的屬性值開頭的元素選擇 需要^字符*/  
		ul li[class^="cat"]{
			background-color: grey;
		}

		/*屬性選擇器比較多：  以指定的屬性值結(jié)尾的元素選擇 需要$字符*/  
		ul li[class$="pig"]{
			background-color: red;
		}
        
        /*屬性選擇器比較多：  以指定的屬性值中的子串選擇 需要$字符*/  
		ul li[class*="t"]{
			background-color: green;
		}

         /*后代選擇器別名層級(jí)選擇器*/

         body ul li{
         	border: 1px solid black;
         }
        
            /*子選擇器*/
            ul>li[class$="pig"]{
            	background-color: greenyellow;
            }
            /*相鄰選擇器*/
            ul li[class$="pig"] ~ *{
            	background-color: black;
            	color: white;

            }
           
           /*相鄰兄弟選擇器*/
            ul li[class$="pig"] + li{
            	background-color: pink;
            	color: white;
            }

            /*群組選擇器*/
         h1, p {
         	font-size: 2rem;
            font-weight: lighter;
            margin: 0;

         }

         /*偽類選擇器  鏈接*/
         a {
         	font-size: 2rem;
         }
         /*訪問前*/
         a:link {
         	color: red;

         }
         /*訪問后*/
         a:visiret{
         	color: orange;
         }
         /*獲取焦點(diǎn)時(shí)*/
         a:focus{
         	color: purple;
         }

         /*鼠標(biāo)懸停時(shí)*/
         a:hover{
         	color: green;
         }
         /*鼠標(biāo)點(diǎn)擊時(shí)*/
         a:active{
         	color: blue;
         }

         /*偽類選擇器: 位置*/
        /*選擇集合中的第一個(gè)元素*/
        ul li:first-child {
            background-color: #efefef;
            background-color: #efefef!important;
        }

        /*偽類選擇器: 位置*/
        /*選擇集合中的最后一個(gè)元素*/
        ul li:last-child {
            background-color: #efefef;
            background-color: #efefef!important;
        }
         /*指定位置選擇*/
        ul li:nth-child(5){
        	background-color: red;
        }
          /*指定偶數(shù)選擇*/
        ul li:nth-child(2n){  /*偶數(shù)nth-child(2n) 奇數(shù)nth-child(2n+1)  快捷選擇偶數(shù) even  奇數(shù)odd*/
        	background-color: pink;
        }

        /*偽類選擇器: 根據(jù)子元素?cái)?shù)量*/
        /*選擇具有唯一子元素的元素*/
        ol:only-child {
            background-color: lawngreen;
        }

        /* 選擇指定類型的唯一子元素 */
        ol li:only-of-type {
            background-color: lawngreen;
        }

        /* 倒數(shù)選擇指定位置的元素 */
        ul li:nth-last-child(3) {
            /*將倒數(shù)第3個(gè)小球變色,實(shí)際上第8號(hào)球*/
            background-color: wheat!important;
        }

        /*選擇指定父級(jí)的第二個(gè)<li>子元素*/
        ol li:nth-of-type(2) {
            background-color: wheat;
        }

        :empty {
        	width: 220px;
        	height: 270px;
        	background-color: pink;

        }
        :empty:after {
        	content: '看見了嗎'

        }
        :empty:before {
        	content: url("../0814/images/dog.jpg");
        }



	</style>
</head>
<body>
<ul>
	<li id="item1">1</li>
	<li class="item2">2</li>
	<li class="cat dog pig">3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
	<li>10</li>
</ul>
<h1>css選擇器</h1>
<p>css選擇器非常重要,對(duì)于后面的jquery學(xué)習(xí)至關(guān)重要</p>
<a href="http://ipnx.cn">PHP中文網(wǎng)</a>
<ol>
	<li>列表現(xiàn)1</li>
	
</ol>
<ol>
	<li>列表現(xiàn)1</li>
	<li>列表現(xiàn)2</li>
	<li>列表現(xiàn)3</3li>
	
</ol>
<ol>
	<li>列表現(xiàn)1</li>
	<li>列表現(xiàn)2</li>
	<li>列表現(xiàn)3</li>
	<li>列表現(xiàn)4</li>
</ol>
<div></div>
</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例

總結(jié)

微信圖片_1.jpg 微信圖片_2.jpg 微信圖片_3.jpg 微信圖片_4.jpg 微信圖片_5.jpg