css选择器介绍8.15作业 - css选择器

首页 > 博客列表 > css选择器介绍8.15作业

博主信息

博文 9

粉丝 0

访问量 9434

专题推荐

更多>

实例

<!DOCTYPE html>
<html>
<head>
	<title>常用选择器</title>
	<style>

		ul { /*标签选择器*/
			/*padding: 0;*/
			margin:0;
			width: 550px;
			border:1px dashed #666;
			padding: 10px 5px;

		}
		/*子块撑开父级*/
		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;
		}
		/*属性选择器比较多： 根据属性名选择 根据属性值选择 */  
		ul li[class]{
			background-color: green;
		}

		
		/*属性选择器比较多：  根据属性值选择 */  
		ul li[class="item2"]{
			background-color: pink;
		}

		/*属性选择器比较多：  以指定的属性值开头的元素选择 需要^字符*/  
		ul li[class^="cat"]{
			background-color: grey;
		}

		/*属性选择器比较多：  以指定的属性值结尾的元素选择 需要$字符*/  
		ul li[class$="pig"]{
			background-color: red;
		}
        
        /*属性选择器比较多：  以指定的属性值中的子串选择 需要$字符*/  
		ul li[class*="t"]{
			background-color: green;
		}

         /*后代选择器别名层级选择器*/

         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;
         }
         /*获取焦点时*/
         a:focus{
         	color: purple;
         }

         /*鼠标悬停时*/
         a:hover{
         	color: green;
         }
         /*鼠标点击时*/
         a:active{
         	color: blue;
         }

         /*伪类选择器: 位置*/
        /*选择集合中的第一个元素*/
        ul li:first-child {
            background-color: #efefef;
            background-color: #efefef!important;
        }

        /*伪类选择器: 位置*/
        /*选择集合中的最后一个元素*/
        ul li:last-child {
            background-color: #efefef;
            background-color: #efefef!important;
        }
         /*指定位置选择*/
        ul li:nth-child(5){
        	background-color: red;
        }
          /*指定偶数选择*/
        ul li:nth-child(2n){  /*偶数nth-child(2n) 奇数nth-child(2n+1)  快捷选择偶数 even  奇数odd*/
        	background-color: pink;
        }

        /*伪类选择器: 根据子元素数量*/
        /*选择具有唯一子元素的元素*/
        ol:only-child {
            background-color: lawngreen;
        }

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

        /* 倒数选择指定位置的元素 */
        ul li:nth-last-child(3) {
            /*将倒数第3个小球变色,实际上第8号球*/
            background-color: wheat!important;
        }

        /*选择指定父级的第二个<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选择器非常重要,对于后面的jquery学习至关重要</p>
<a href="http://www.php.cn">PHP中文网</a>
<ol>
	<li>列表现1</li>
	
</ol>
<ol>
	<li>列表现1</li>
	<li>列表现2</li>
	<li>列表现3</3li>
	
</ol>
<ol>
	<li>列表现1</li>
	<li>列表现2</li>
	<li>列表现3</li>
	<li>列表现4</li>
</ol>
<div></div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

总结

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