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>
相关推荐
数字芯片实验室38 分钟前
分享一个可以学习正则表达式的网址:Pythex.org
学习·正则表达式
陈洪奇1 小时前
注册中心学习笔记整理
笔记·学习
光影少年1 小时前
从前端转go开发的学习路线
前端·学习·golang
柚子8163 小时前
scroll-marker轮播组件不再难
前端·css
兴趣使然_4 小时前
【笔记】使用 html 创建网址快捷方式
笔记·html·js
凌辰揽月6 小时前
7月10号总结 (1)
前端·css·css3
aramae6 小时前
C++ -- STL -- vector
开发语言·c++·笔记·后端·visual studio
天天扭码6 小时前
很全面的前端面试——CSS篇(上)
前端·css·面试
sunbyte6 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleVerticalSlider(双垂直滑块)
前端·javascript·css·vue.js·vue
fen_fen6 小时前
学习笔记(32):matplotlib绘制简单图表-数据分布图
笔记·学习·matplotlib