CSS: 选择器与三大特性

标签选择器

标签选择器就是选择一些HTML的不同标签，由于它们的标签需求不同，所以CSS需要设置标签去选择它们，为满足它们的需求给予对应的属性

基础选择器

标签选择器

<!DOCTYPE html>
<head><title>HOME</title><style>p{color: brown;}</style>
</head>
<body><p>Hello,World</p>
</body>
</html>

这里的<style></style>里面的p{}就是标签选择器，它选择了<p></p>标签，将<p></p>标签内的文本颜色修改为红色

演示结果

这里的Hello,World是红色的

类选择器

类选择器的存在是为了差异化每个选择器标签，它的基本格式为

.类名{所需要的属性}

<div class="类名类名 ...">文本</div>

基本代码

<!DOCTYPE html>
<head><title>HOME</title><style>.set{color: brown;}.size{font-size: 50px;}</style>
</head>
<body><p class="set size">Hello,World</p>
</body>
</html>

演示结果

这里<p></p>的文本添加了两个类型名，分别是更改颜色和大小的类选择器

id选择器

id选择器和类选择器的使用方式是相同的，唯一的不同点在于id选择器只能引用一个类名，而类选择器可以引用多个类名

基本使用方式

#id{属性}

<div id="属性名">文本内容</div>

代码演示

<!DOCTYPE html>
<head><title>HOME</title><style>#set{color: brown;font-size: 50px;}</style>
</head>
<body><div id="set">Hello,World</div>
</body>
</html>

演示结果

通配选择器

通配选择器格式

*{属性}

通配选择器会对所有文本生效

演示代码

<!DOCTYPE html>
<head><title>HOME</title><style>*{color:aqua;font-size: 50px;}</style>
</head>
<body><div>Hello,World</div>
</body>
</html>

演示结果

CSS复合选择器

复合选择器是由基础选择器构成的，当我们的代码非常庞大时，复合选择器可以用来更准确的定位某个标签，将它的属性改写

后代选择器

后代选择器是由两个父子选择器构成的，当标签的class既满足父标签又满足子标签那么它的属性才会被后代选择器修改

基本结构

.father son{}

我们来演示一下

演示代码

<!DOCTYPE html>
<head><title>HOME</title><style>.father span{color: blueviolet;font-size: 50px;}</style>
</head>
<body><div class="father"><span>Ni Hao</span><p><span>Hello,World;</span></p></div>
</body>
</html>

演示结果

我们可以得知当文本满足后代选择器的两个先后条件时，后代选择器的更改生效，只要满足子标签在父标签的内部即可

子选择器

子选择器需要子标签是父标签里面的第一个直接标签，也就是说子标签必须要是父标签的亲儿子标签，否则不生效

语法

父亲>儿子{}

演示代码

<!DOCTYPE html>
<head><title>HOME</title><style>div>span{color: blueviolet;font-size: 50px;}</style>
</head>
<body><div><span>Ni Hao</span><p><span>Hello,World;</span></p></div>
</body>
</html>

演示结果

我们可以看到，同样是<span></span>标签，但其中鄙视<div></div>标签的亲儿子标签不会被后代选择器选择

并集选择器

并集选择器可以在同一行定义许多个其它的复合选择器或基础选择器

语法

元素1 元素2{}

演示代码

<!DOCTYPE html>
<head><title>HOME</title><style>div,span,.father div{color: blueviolet;font-size: 50px;}</style>
</head>
<body><div>WeChat</div><span>Ni Hao</span><p>Hello,World;</p>
</body>
</html>

演示结果

我们可以发现这个并集选择器同时选择了<span></span>和<div></div>两个标签

当然我们也可以并上子选择器和后代选择器

演示代码

<!DOCTYPE html>
<head><title>HOME</title><style>.blue span,div>span{color: blueviolet;font-size: 50px;}</style>
</head>
<body><div><p class="blue"><span>P内的span文字标签</span><div>P内的div文字标签</div></p><span>div内的span文字标签</span></div>
</body>
</html>

演示结果

我们可以看到并集选择器同时完成了子选择器和后代选择器的功能

伪类选择器

用于给一些元素添加某种效果

链接伪类选择器

a：link，选择未被访问的链接

a：visited，选择已经被访问的链接

a：hover，选择鼠标悬停的链接

a：active，选择鼠标点击的链接

演示代码

<!DOCTYPE html>
<head><title>HOME</title><style>a{font-size: 50px;}a:link {color: rgb(165, 14, 14);}a:active {color: rgb(249, 5, 5);}a:hover {color: rgb(153, 0, 255);}a:visited {color: rgb(127, 253, 2);}</style>
</head>
<body><a href="https://www.bilibili.com/">bilibili</a>
</body>
</html>

演示结果

当我们鼠标悬停时

这里由于浏览器的安全限制我们就先不演示其它的了

：focus 伪类选择器

focus用于获取表单，focus通过获取表单得到修改表单的权限

我们来演示一下

演示代码

当我们点击这些表单的时候，这些表单便会因为选择器添加的属性而变色

CSS三大特性

层叠性

当我们由两个相同的选择器时，那么就会发生命名冲突，那么命名冲突后，编译器会怎么选择属性呢

演示代码

<html>
<head><title>Document</title><style>p{color: brown;font-size: 50px;}p{color: blue;}</style>
</head>
<body><p>Hello,World</p>
</body>
</html>

演示结果

当由两个p选择器时，后面的选择器属性会覆盖前面的，没有被覆盖的属性会继承下来，比如颜色被覆盖，但是文本大小被继承下来

继承性

在CSS中子进程会继承父进程的特性

演示代码

<html>
<head><title>Document</title><style>div{color: brown;font-size: 50px;}</style>
</head>
<body><div>your name   <p>Hello,World</p></div>
</body>
</html>

演示结果

这里的<p></p>标签继承了<div></div>标签的特性

优先级

当一个元素被多个选择器选择会出现两种情况

选择器相同，执行层优先

选择器不同，执行优先级

选择器的优先级取决于，选择器的权重

选择器	权重
从父级继承 / 通配符`*`	`0.0.0.0`
标签选择器	`0.0.0.1`
类选择器 / 伪类选择器	`0.0.1.0`
id选择器	`0.1.0.0`
行内样式`style=""`	`1.0.0.0`
`!important` 修饰	`∞`

代码演示

<html>
<head><title>Document</title><style>div{color: brown;font-size: 50px;}.father{color:black;}#son{color: blue;}</style>
</head>
<body><div class="father" id="son">Hello,World</div>
</body>
</html>

演示结果

因为id选择器权重最高，所以是蓝色

还有一个!important元素，当选择器加上它时，那么它的优先级就是最高

当有两个元素都加了!important时，那么就比较它们各自的优先级，如果它们时相同的选择器，那么就比它们那个在后面

代码演示

<html>
<head><title>Document</title><style>div{color: brown;font-size: 50px;}#son{color: blue !important;}.father{color:black !important;}</style>
</head>
<body><div class="father" id="son">Hello,World</div>
</body>
</html>

演示结果

虽然father加了!important，但是son也加了，所以最后比较的就是son和father的优先级

权重的叠加

当我们使用后代选择器或者子选择器时，便会发生权重的叠加

比如div span的权重叠加起来就是 0.0.0.1 + 0.0.0.1 = 0.0.0.2

div .father的权重 0.0.0.1 + 0.0.1.0 =0.0.1.1

.father .son的权重 0.0.1.0 + 0.0.1.0 =0.0.2.0

权重会在对应的位置叠加，但权重不会进位

代码演示

<html>
<head><title>Document</title><style>.FATHER span{color: brown;font-size: 50px;}div span{color: blue;font-size: 50px;}</style>
</head>
<body><div class="FATHER"><span>HELLO,WORLD</span></div>
</body>
</html>

演示结果