HTML学习笔记记录---速预CSS(1) 选择器类型

选择器

选择器内可以写无数条属性

每行属性都得以英文分号结尾

选择器{

属性1:属性值1;

属性2:属性值2;

}

例:

css 复制代码
p{
    color:blue;        颜色
    font-size:16px;    字号大小(像素)
}

样式表优先级:

内联样式(inline styles) 最高优先级

内部样式表(internal stylesheet)

外部样式表(extrnal stylesheet) 最低优先级

指令笔记:

link 导入文件 href 文件的路径

background-color 背景颜色

font-family:'名称'; 设定字体(须用单引号)

weight 字体粗细

选择器类型:

css选择器可以在"style"设置格式时对"h2、h3"这样的级别段落进行统一设置,也可以对"body"内容下所设定的"class"(类)或"id"进行统一设置。

类选择器:".名称{ }"格式。

id选择器:"#名称{ }"格式。

元素选择器:"名称{ }"格式。

通用选择器:

"*{ }"格式,"*"代表的是所有类型子元素选择器:".father > .son{ }"指father标签下的子元素,可以是"p、h2等及其他标签名称"

例如:

css 复制代码
.father > .son{
            color: seagreen;
        }

<div class="father">
        <p class="son">子元素</p>
    </div>

后代选择器:

"father"下"div"是子元素。"div"中的"grandson"不是子元素,属于"孙子"级别为后代元素,所以须使用后代选择器".father p{ }"来对其修改样式属性。

例如:

css 复制代码
.father p{
            color: gold;
        }

 <div class="father">
        <p class="son">子元素</p>
        <div>
            <p class="grandson">后代元素</p>
        </div>
    </div>

相邻元素选择器:

会将相邻并指定类型的元素标签赋予指定的属性。

例如:

css 复制代码
 h3 + p{
            background-color: blue;
        }

<p>普通标签</p>
<h3>相邻元素选择器</h3>
<p>另一个普通标签</p>

此命令会给"h3"相邻的"p"标签添加蓝色底纹,他只能给"h3"下面的进行添加,无法对上面的进行修改。

同时若有标签隔开了"h3"与"p"则不进行任何效果修改。

css 复制代码
<p>普通标签</p>
<h3>相邻元素选择器</h3>
<h2>隔开</h2>
<p>另一个普通标签</p>  

伪类选择器:

用于添加一些互动效果。

例如:当鼠标放在指定文本上时,会对文本的颜色进行修改,离开时恢复原样。

css 复制代码
#weileitest:hover{
            color: brown;
        }

<h3 id="weileitest">鼠标悬停修改颜色</h3>
相关推荐
永日4567014 小时前
学习日记-HTML-day51-9.9
前端·学习·html
xy_recording15 小时前
Day20 K8S学习
学习·容器·kubernetes
Lynnxiaowen15 小时前
今天继续昨天的正则表达式进行学习
linux·运维·学习·正则表达式·云计算·bash
奶昔不会射手15 小时前
css3之grid布局
前端·css·css3
用户4582031531715 小时前
10个你可能不知道的实用CSS技巧,立竿见影提升开发效率
前端·css
qq_1728055915 小时前
Go 装饰器模式学习文档
学习·golang·装饰器模式
睡不着先生16 小时前
CSS `:is()` & `:where()` 实战指南:简化选择器,提升可维护性
css
cellurw16 小时前
Day39 SQLite数据库操作与HTML核心API及页面构建
数据库·sqlite·html
拜无忧16 小时前
css带有“反向圆角”的 Tab 凸起效果。clip-path
前端·css
lyq31516 小时前
Sass 常用语法
css·scss