HTML选择器

选择器：浏览器通过选择器为满足条件的HTML元素添加CSS样式：

1、标签选择器：以标签名作为选择器。

<div style="text-align: center; font-family: '华文彩云'">干得漂亮</div>
<style>
    	div{
    		color: red;
    		font-size: 900px;
    	}/*选择器标签为div*/
    </style>

2.类选择器：class选择器，以class标签属性值作为选择器。

 <span class="a">加油，你能行</span>
 <style>
    	.a{
    		color: wheat;
    		font-size: 500px;
    	}
    </style>

3、id选择器：以id标签属性值为选择器  匹配标签的id与id选择器相同的标签。

<span id="zzu">郑州大学</span>
  <style>
    	#zzu{
    		color: blueviolet ;
    		font-size: 800px;
    	}
    </style>

4、后代选择器：用于为特定的HTML子元素添加CSS样式。

<style>
    	html body #zzu{
    		color: blueviolet ;
    		font-size: 800px;
    	}
    </style>

5、分组选择器：如果HTML文档多个CSS样式表内的部分样式相同，则可以通过定义一个分组选择器以简化CSS样式代码， 该选择器的选择器名由多个选择器组成，使用逗号分隔。

<span id="zzu">郑州大学</span>
<span class="a">加油，你能行</span>
<style>
    	#zzu,.a{
    		color: black;
    		font-size: 100px;
    	}
    </style>

6、通配符选择器：通配符选择器匹配HTML文档中的任何HTML元素。

 <style>
    	*{
    		margin: 0;
    		padding: 0;
    	}
    </style>

设计一个jd登录按钮：

    <span>登&nbsp;&nbsp;&nbsp;&nbsp;录</span>
    <style>
    	span{
	        width: 302px; 框宽设置为302px
    		height: 31px; 框高设置为31px
    		border:1px solid #e85356; 设置一个边框
    		display: inline-block; 因为span是行内元素，无论设置的框宽框高为多少，它也只会显示出包裹所有文字的大小，因此将它设置为行内的块级元素。
    		text-align: center; 让字体水平居中显示
    		line-height: 31px;  设置为line-height与框高相同是为了让字体垂直居中
    		background:#e4393c; 设置背景色
    		color: #fff;  设置字体色
    		font-size: 20px; 设置字体大小
    		font-family: "microsoft yahei"; 设置字体类型
    		cursor: pointer; 设置出鼠标悬浮可点击效果
    		
    	}

实现效果图：