五种css选择器的基础练习

CSS的三种选择器在其中我对标签、类、id三种选择器进行了详细的讲解下面是我在复习之中，找到的一个css选择器的练习，其中除了刚说到的三种还讲到了后代/属性两选择器的特点；

<!DOCTYPE HTML>
<html>
<head>
<title>CSS选择器</title>
<meta charset="UTF-8" />
<style type="text/css" >
	/* 为了看着方便给所有标签都加上边框，及设置一些默认的样式 */
	body,input{font-size:18px;}
	input{border: 2px solid green;}
	div,span,p{border: 2px solid red;font-size:18px;}
	span{border-color: blue;margin-right:10px;}
	div,p{ width:350px;height:80px;padding:5px;}
	/* ----- 1.标签名选择器练习 ----- 
	将所有span标签的背景颜色设置为#efbdef, 设置字体大小为22px，字体加粗；*/
    span{/*通过元素名选中当前文本中所有span*/
      /*设置背景颜色为#efbdef*/
      background:#efbdef;
      /*设置字体大小为22px*/
      font-size:22px;
      /*字体加粗*/
      font-weight:border;
      /*字体变细:lighter*/
    }
	
	/* ----- 2.类选择器练习 ----- 
	(1)将所有的span（但是不包括div和p标签下的span）的背景颜色设置为#faf77b，边框改为2px solid cyan；
	(2)将div下的span和内容为"span111"的span，背景颜色设置为#5eff1e、字体颜色设置
	#ec0e7e；*/
    .s1{/*.s1表示匹配所有的class值为s1的元素,点(.)后面跟的是class值*/
      /*设置背景颜色为#faf77b*/
      background:#faf77b;
      /*设置边框为2px，且为青色*/
      border:2px solid cyan;
    }
	.s2{
	  background:#5eff1e;
	  color:#ec0e7e;
	}
	/* ----- 3.id选择器练习 -----
	用id选择器将第一个p标签设置字体大小为24px，字体颜色为#a06649, 首行文本缩进20px。*/
    #p1{/*选中id值为p1的元素*/
      /*设置字体大小为24px*/
      font-size:24px;
      /*设置字体颜色为#a06649*/
      color:#a06649;
      /*设置首行缩进20px*/
      text-indent:20px;
    }
	
	/* ----- 4.后代选择器练习 ----- 
	为p元素内部的所有span元素，设置字体大小为18px,字体颜色为红色,背景颜色为pink;*/
	p span{/*匹配所有p元素内部的span元素*/
	  font-size:18px;
	  color:red;
	  background:pink;
	}
	
	/* ----- 5.属性选择器 ----- 
	为所有的文本输入框，设置背景颜色为#FF7CCC、字体大小22px，首行文本缩进15px；*/
    input[type='text']{/*匹配所有的input元素并且type值为text的元素*/
      background:#FF7CCC;
      font-size:22px;
      text-indent:15px;
    }
	
</style>
</head>
<body>
	<br/>
	<div>
		div111
		<span class="s2">这是一个span</span>
		这是一个div
	</div> <br/>
	
	<span class="s1 s2">span111</span> 
	<span class="s1">span222</span> 
	<span class="s1">span333</span> 
	
	<p id="p1">
		ppp111
		<span>这是一个span</span>
		这是一个P元素
	</p>
	<p>
		ppp222
		<span>这是一个span</span>
		这是一个P元素
	</p>
	<input type="text" value="用户名"/>
	<input type="button" value="按钮1" />
	<input type="button" value="按钮2" />
</body>
</html>

如果你能停下脚步观看我的成果，Thanks！！

来源：oschina

链接：https://my.oschina.net/u/4115134/blog/3189202

标签

css

css选择器