表单实践与选择器的深入学习—2018年08月15日22时00分 - 我的作业

首页 > 博客列表 > 表单实践与选择器的深入学习—2018年08月15日22时00分

博主信息

博文 48

粉丝 0

访问量 39242

专题推荐

更多>

实例

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>常用选择器</title>
	<style type="text/css">
	/*标签选择器,根据标签来选择元素*/
		ul { padding:10px 5px;
			 margin:0;
			 width:800px; 
			 border:1px dashed $666;
		}

  	    ul:after {  /*子块撑开父块*/
            content:'';  /*在子元素尾部添加空内容元素*/
            display: block;  /*并设置为块级显示*/
            clear:both;   /*清除二边的浮动*/
        }

	  	ul li { list-style:none; 
	  			float:left; 
	  			width:50px; 
	  			height:50px; 
	  			line-height:50px; 
	  			text-align:center; 
	  			border-radius:50%;/*变成圆的 */ 
	  			box-shadow:2px 2px 2px #888; 
	  			background-color: skyblue; 
	  			margin:1%;
	  		}

		/*id选择器,根据id来选择元素*/
		 #item1 { background-color: coral; }

		 /*类（class）选择器,根据class来选择元素*/
	    .item2 { background-color: gold; }

	    /*属性选择器，比较复杂*/
	    /*属性选择器: 属性名*/
	    ul li[class] { background-color: blueviolet; }

	     /*属性选择器: 属性值*/
	    ul li[class="item2"] { background-color: grey;}

	    /*属性选择器,以指定属性值开头的元素*/
	    ul li[class^="cat"] { background-color: brown; }

		/*属性选择器,以指定属性值结尾的元素*/
	    ul li[class$="pig"] { background-color: red; }

	    /*属性选择器,选择属性值中包含制定的子串的元素,比较高级的用法*/
	    ul li[class*="te"] { background-color: green; }

	     /*后代选择器/层级选择器*/
      	body ul li { border: 1px solid black; }/*ul可以省略，因为li也是body的子孙*/

        /*子选择器*/
        ul > li[class="pig"] { background-color: #000000 }

        /*相邻选择器*/
        ul li[class$="pig"] ~ * {   
            background-color: black;
            color: white;
        }/*选择当前元素之后的所有同级元素，注意是之后的元素，在前面的元素不包含*/

        /*相邻兄弟选择器*/
        ul li[class$="pig"] + li {
            background-color: pink;
            color: black;
        }/*相邻的紧接在之后的一个元素*/

        /*群组选择器*/
        /*h1, p {
            font-size: 2rem;
            font-weight: lighter;
            margin: 0;
        }*/

        /*伪类选择器: 链接*/
        a { font-size:2rem; }
        /*访问前*/
        a:link { color:red; }
        /*访问后*/
        a:visited { color:orange; }
        /*获取焦点时*/
        a:focus { color:purple; }
        /*鼠标悬停时*/
        a:hover { color:green; }
        /*鼠标点击时*/
        a:active { color:blue; }



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

        /*选择集合中的最后一个子元素*/
        ul#two li:last-child { background-color: purple !important; }

        /*按索引选择指定的元素,注意索引是从1开始计数*/
        ul#two li:nth-child(2) { background-color:orange !important; }

        ul#two li:nth-child(5) { background-color:cyan !important; }

        /* 选择所有的偶数子元素 */
        /* 2n偶数, even偶数*/
        /* 2n+1奇数, odd奇数*/
        ul#two li:nth-child(even) { background-color: green; }/*选择偶数*/

        ul#two li:nth-child(odd) { background-color: yellow; }/*选择奇数*/

 		/* 倒数选择指定位置的元素 */
        ul#two li:nth-last-child(2) { background-color: blue; }



        ol{ width:200px; }
        /*伪类选择器: 根据子元素数量*/
        /*选择具有唯一子元素的元素,匹配属于父元素中唯一子元素的li元素:*/
        li:only-child { background-color: red !important }

        /* 选择指定类型的唯一子元素 ,查找ol下li类型的元素为唯一子元素的li*/
        ol li:only-of-type { background-color: orange;  }

       
        /*选择指定父级的第二个<li>子元素*/
        ol li:nth-of-type(2) { background-color: yellow; }

        /*选择页面中内容为空的元素*/
        :empty {
            width: 220px;
            height: 271px;
            background-color: coral;

        }

        :empty:after { content: '插入的内容'; }

 		/*默认插入的元素为行内元素,不支持宽度设定,如果一定要设置可以通过背景图片实现*/
        :empty:before { content: url("images/1.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>
伪类选择器：位置相关
<ul id="two">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	
</ul>

a链接：伪类 
<a href="http://php.cn">PHP中文网</a>

<ol>
    <li>列表项1</li>
    <!--
    现在给ol再添加一个子元素<p>,有二个子元素了,所以子元素不再唯一,
    如何才能选中唯一的li元素呢？only-of-type
    -->
    <p>第二子元素</p>
</ol>

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ol>

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
</ol>

<!--空区块-->
<div></div>


</body>
</html>

运行实例 »

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

效果图：

效果图.png