- 12
课程：初识HTML(5)+CSS(3)-升级版 - 1
章节：8-4 到9-1 - 12
讲师：五月的夏天
课程内容：css各种选择器，子选择，包含选择，通用选择，伪类选择，分组选择，以及样式的继承
学习收货：
div id="idselect">
id选择器
</div>
<h3 class="a2 a3">id选择器和类class选择器的区别</h3>
<p >
1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）
</p>
<div class="child">
<h3>子选择器</h3>
语法：.food>h3{color:chocolate;}使class名为food下的子元素h3 变色。
</div>
<div class="containSelect">
<h3>包含选择器||后代选择器</h3>
<div>
<h5>
即加入空格,用于选择指定标签元素下的后辈元素。
.first h3{color:red;}
后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择
</h5>
</div>
</div>
<h3>
通用选择器
，它使用一个（*）号指定，它的作用是匹配html中所有标签元素
</h3>
<hr>
<h3>伪类选择器</h3>
<p>
伪类选择符，为什么叫做伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：
<br>a:hover{color:red;}<br>
上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。这样就会使第一段文字内容中的“胆小如鼠”文字加入鼠标滑过字体颜色变为红色特效。
关于伪类选择符，到目前为止，可以兼容所有浏览器的“伪类选择符”就是 a 标签上使用 :hover 了（
其实伪类选择符还有很多，尤其是 css3 中，但是因为不能兼容所有浏览器，本教程只是讲了这一种最常用的）。
其实 :hover 可以放在任意的标签上，比如说 p:hover，但是它们的兼容性也是很不好的，所以现在比较常用的还是 a:hover 的组合。
</p>
<h3>分组选择器</h3>
<p>h1,span{color:red;} 相当于h1{color:red;}
span{color:red;}
</p><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css2</title>
<style>
p{
color: aqua;
border:1px solid red;
}
</style>
</head>
<body>
<div>
<h1>样式的继承</h1>
<p>CSS的某些样式是具有继承性的:继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。
<span>p{color:red;}</span>颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本,如span
有一些css样式是不具有继承性的。如border:1px solid red;
</p>
</div>
</body>
</html>
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦