CSS的定义规则

zhgc · 发表于 2020-9-3 11:11:43

CSS的选择器

CSS选择器的权值: important(最高，在设置属性值后面添加"!important")、内联(1000)、ID(100)、Class(10)、Tag(1)。

CSS选择器的优先级: 根据选择器的权值计算，组合选择器的权值会进行叠加。

      同一个元素应用可能多个选择器时，权值大的优先；如果权值相同，那么则选择最后加载的选择器。

      如果选择器设置为class="A B C"，最终选择的选择器不是按A/B/C的先后顺序，而方式按照A/B/C的CSS加载顺序。

1、基本选择器

(1) 标签选择器(元素选择器)

      直接写元素标签名字，比如p。其中比较特殊的是*，它表示选择所有元素。

(2) 类选择器

      .class，其中class就是元素的class属性需要填写的值。

(3) ID选择器

      #id，其中id就是元素的id属性值。(HTML页面中能够重复使用相同的ID)

(4) 属性选择器

      元素[属性=值][...]的基本格式，如果没有"=值"的部分就表示元素需要包括该属性。

      可以多个属性同时使用；其中=又扩展为~=、|=、^=、$=、*=。

2、派生选择器

(1) 后代选择器

      用空格隔开的多个选择器名字，比如div p表示div包含的所有p元素，不管是div直接包含还是间接包含。

(2) 子元素选择器

      用>号表示，比如div>p表示div下的所有子元素p，只能直接包含。

(3) (普通)兄弟选择器

      用~号表示，比如div~p表示div之后的所有同级兄弟p元素，但是div之前的兄弟元素p不包含在内。

(4) 相邻兄弟选择器

      用+号表示，比如div+p表示div后面相邻的p元素。(div和p在同一个层次上，并且p刚好在div后面)

(5) 并集选择器

      用,号表示，比如div,p表示所有的div元素和p元素。

(6) 交集选择器

      用.号表示，比如h3.special只能用于<h3 class="special">这样的标签中。

      注意它和h3 .special不一样，中间有空格和没空格是有区别的。

(7) 伪类选择器

      用:号表示，一个选择器可以同时使用多个伪类。

      伪类是为了弥补选择器的不足。

(8) 伪元素选择器

      用::表示，一个选择器只能使用一个伪元素。

      伪元素的本质则是创建一个虚拟元素然后在应用样式。

zhgc · 发表于 2020-9-3 11:26:30

CSS中关于:after的作用：

<!DOCTYPE html>
<html>
<head>
<style>
p:after
{
content:"- 台词";
}
</style>
</head>
<body>
<p>我是唐老鸭。</p>
<p>我住在 Duckburg。</p>
<p><b>注释：</b>对于在 IE8 中工作的 :after，必须声明 DOCTYPE。</p>
</body>
</html>

复制代码

显示：

我是唐老鸭。 - 台词

我住在 Duckburg。 - 台词

注释：对于在 IE8 中工作的 :after，必须声明 DOCTYPE。 - 台词

		自动登录	找回密码
密码			立即注册

CSS的定义规则

浏览过的版块