初学HTML CSS常用选择器

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

id选择器：

浏览器为id标签属性的属性值与id选择器名相同的标签元素添加CSS样式，语法中使用的是"#"+对应的id值

<div id="uu">What are you doing?</div>
		<style>
			#uu{
			text-align: center;font-family: 'vladimir script';
			font-size: 72px;
			}
		</style>

 

类选择器：

浏览器为class标签属性的属性值与类选择器名相同的标签元素添加CSS样式，语法中使用的是"."+对应的class值

		<div class="uu">What are you doing?</div>
		<div class="uu">I am going to climb mountains</div>
		<style>
			.uu{
			text-align: center;font-family: 'vladimir script';
			font-size: 72px;
			}
		</style>

注意：

1.class标签属性的属性值不能以数字开头；

2.class标签属性的属性值可以有多个，每个值之间用空格间隔

标签选择器：

浏览器为HTML文档内标签名与标签选择器名相同的标签元素添加CSS样式，语法中使用的是"标签名"

		<b>What are you doing?</b><br />
		<b>I am going to climb mountains</b>
		<style>
			b{
				font-size: 72px;
			}
		</style>

后代选择器：

后代选择器（descendant selector）又称为包含选择器，用于为特定的HTML子元素添加CSS样式，语法结构：父级+子级定义的id值或class值或标签值，父级与子级之间用空格间隔，使用子级时需遵循子级的语法。

		<ol>
			<li id="t">
				Hello
			</li>
			<li>
				Hi
			</li>
		</ol>
		<style>
			ol #t{
				color: red;
				font-size: 20px;
			}
		</style>

 

分组选择器：

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

		<span class="zero">谦虚使人进步&nbsp;</span>
		<b id="one">骄傲使人落后</b>
		<style>
			#one,.zero{
				color:red;
				font-size: 72px;
			}
		</style>

通配符选择器：

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

/*取消标签默认margin与padding值*/
*{
    margin:0px;
    padding:0px;        
}

 加了上面的代码之后的效果，取消标签默认margin与padding值