HTML&CSS基础-常用选择器
作者：尹正杰
版权声明：原创作品，谢绝转载！否则将追究法律责任。
一.html源代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>常用选择器</title> <style type="text/css">
/*
*
* 元素选择器:
* 作用:
* 通过元素选择器可以选择页面种所有指定元素
* 语法:
* 标签名称 {}
*
* 案例如下:
* 为页面中的所有的p元素，设置一个字体颜色为红色;
* 将h1元素设置为黄色;
*
* */
p{
color: red;
} h1{
color: yellow;
} /*
*id选择器:
* 作用:
* 通过元素的id属性值选中唯一的一个元素,即id是不可用重复的哟~
* 语法:
* #id属性值{}
*
* 案例如下:
* 将id为p4的标签字体大小设置为50px.
*
* */
#p4{
font-size: 50px;
} /*
*
* 类选择器:
* 作用:
* class属性和id属性类似，只不过class属性可以重复，拥有相同的class属性值的元素，我们说他们是一组元素，可以同时为一个元素设置多个class属性值，多个值之间使用空格隔开。
* 通过元素的class属性值选中一组元素
* 语法:
* .class属性值{}
*
* 案例如下:
* 将p2类属性标签颜色修改为蓝色
* 将p1类属性标签字体大小设置为50px
* */
.p2{
color:blue;
} .p1{
font-size: 50px;
} /*
* 选择器分组(并集选择器):
* 作用:
* 通过选择器分组可以同时选择多个选择器对应的元素
*
* 语法:
* 选择器1，选择器2，选择器N{}
*
* 案例如下:
* 为id为p3,class为p5且是h1的比钱，同时设置一个背景颜色为浅绿色
*
* */
#p3,.p5,h1{
background-color:chartreuse ;
} /**
* 通配符选择器:
* 它可以用来选张页面的所有元素
*
* 语法:
* *{}
*
* 案例如下:
* 将所有标签均设置为深紫色
*
* *{
* color: darkviolet;
* } /**
* 复合选择器:
* 作用:
* 可以选中同时满足多个选择器的元素
* 语法:
* 选择器1选择器2选择器N{}
*
* 案例如下:
* 为拥有class为p6的span元素设置一个颜色背景为红色
*
*
*/
span.p6{
background-color: red;
} /**
* 对于id选择器来说，不建议使用复合选择器,为什么？
* 对于具体id标识的元素没有必要使用复合选择器，因为咱们通过id就能确认到唯一的一个元素了，选择整个文档的p标签需要将所有的p标签拿到手后再使用id过滤起步多此一举么？
*/
p#p4{
background-color: yellow;
}
</style> </head>
<body> <h1 id=p3 class="p5">《登高》</h1> <p>风急天高猿啸哀，</p> <p class="p2 p1">渚清沙白鸟飞回。</p> <p>无边落木萧萧下，</p> <p id="p4">不尽长江滚滚来。</p> <p class="p2 p1">万里悲秋常作客，</p> <p class="p2">百年多病独登台。</p> <p class="p6">艰难苦恨繁霜鬓，</p> <span class="p6">潦倒新停浊酒杯。</span>
</body>
</html>
二.浏览器打开以上代码渲染结果