选择器
注释:选择器的用处就是会告诉浏览器网页上的哪些元素需要设置什么样的样式
元素选择器(标签选择器)
注释:根据标签的名字来从页面市中选取指定的元素
语法:标签名{ }类选择器
注释:根据元素的class属性值选取元素
语法:.className{ }ID选择器
注释:根据元素的ID是行之选取元素(注意:和class属性不同,ID属性是不能重复的)
语法:#id{ }复合选择器(交集选择器)
注释:可以同时使用多个选择器,这样可以选择同时满足多个选择器的元素
语法:-选择器1选择器2{ }群组选择器(并集选择器)
注释:可以同时使用多个选择器,多个选择器将被同时应用指定的样式
语法:选择器1,选择器2,选择器3{ }通用选择器
注释:可以同时选中页面中的所有元素
语法:*{ }后代选择器
注释:后代选择器可以根据标签的关系,为处在元素内部的代元素设置样式
语法:祖先元素 后代元素 后代元素{ }子元素选择器
注释:子元素选择器可以给另一个元素的子元素设置样式
语法:父元素>子元素{ }兄弟选择器
注释:除了根据祖先父子关系,还可以根据兄弟关系查找元素
语法:查找后边一个兄弟元素:兄弟元素+兄弟元素{ }
查找后边所有的兄弟元素:兄弟元素~兄弟元素{ }
标签之间的关系
祖先元素
直接或间接包含后代元素的元素
后代元素
直接或间接被祖先元素包含的元素
父元素
直接包含子元素的元素
子元素
直接被父元素包含的元素
兄弟元素
拥有相投父元素的元素
博客代码
<!DOCTYPE html>
<html>
<head>
<title>博客</title>
<meta charset="utf-8">
</head>
<body>
<center>
<a id="b" href='#a'>去底部</a>
<a href="#name1">跳转指定位置</a>
<h1>个人博客第二天作业</h1>
<br><br>
<hr>
<br><br>
<h2>富人碰了吃土,穷人碰了入土的玩意</h2>
<br>
<a href='https://baike.baidu.com/item/%E5%AE%9D%E9%A9%ACS1000rr/10946402?fr=aladdin'>宝马S1000RR百科</a>
<br><br><br>
<p>四缸太费油</p>
<p>三缸不成熟</p>
<p>双杠不好听</p>
<p>单杠没动力</p>
<p>大的父母不让买</p>
<p>小的自己不想买</p>
<p>街车不帅又太闷</p>
<p>跑车通过性不好</p>
<p>越野不酷</p>
<p>踏板太娘</p>
<img id="name1" src="picture/66.png" alt="" width="350px" height="" />
<p>风冷的冷却不好</p>
<p>水冷的保养太麻烦</p>
<p>油冷的又烫腿</p>
<p>国际档的不会骑</p>
<p>循环档的不安全</p>
<p>无级变速又加速不强</p>
<p>轮胎宽了阻力大</p>
<p>轮胎窄了不好看</p>
<p>两轮不会压弯</p>
<p>三轮又不敢骑</p>
<p>四轮不像摩托车</p>
<p>大哥</p>
<p>你说买啥???</p>
<img src="picture/rr.jpg" alt="" width="350px" height="" />
<hr>
<br><br>
<p>友情链接:<a href="http://www.baidu.com">百度网</a>|<a href="http://www.taobao.com">淘宝网</a>|<a href="http://www.JD.com">京东网</a></p>
<a id='a' href="#b">回顶部</a>
<a href="https://web2.qq.com/">联系作者</a>
</center>
</body>
</html>