CSS如何引入以及引入的优先级,有哪些选择器以及这些选择器如何使用

引入方式

1.行内引入 在标签里面直接加style

2.内联式 在head头部加style,下面加标签名

3.外联式 link-css引入

选择器

*通配符选择器(全局选择器)

标签选择器

类选择器

id选择器

层级选择器

兄弟选择器

伪类选择器

属性选择器

1.引入方式

<p title="行内引入" style="background-color: rgb(0, 170, 28);;height: 50px;">行内引入</p>

2.内联式 在head头部加style,下面加标签名

  1. <style>

  2. p{background-color: red;}

  3. </style>

优先级 行内引入方式,优先级最高 内联式和外联式谁在后面谁生效

<link rel="stylesheet" href="demo1.css">

选择器

通配符选择器(全局选择器)

一般用于浏览器的默认样式

*{

margin: 0;

padding: 0;

}

标签选择器

h1-h6 div ul li span等等

p{

font-size: 28px;

}

类选择器

.classname{
    width: 500px;
    height: 200px;
    background-color: rgb(218, 211, 211);
    color: purple;
    font-size: 21px;
}

id选择器

#box1{
    font-size: 28px;
}

层级选择器

1.子代 >

2.后代 空格

.ul1>li{
    color: red;
}
.ul2 li{
    color: aqua;
}

兄弟选择器

1.相邻兄弟 + 只选择下面的一个

2.通用兄弟 ~ 把下面的全都选择上

.ul3 + li{
    color: aquamarine;
}
.ul3 ~ li{
    color: blue;
}

伪类选择器

.ul3:hover{
    cursor: pointer;
}
.ul3:hover ~li{
    color: brown;
}

!important 设置最高优先级 一般不建议使用

*优先级最低 标签选择器<.class<#id<行内优先级

组合选择器时按优先级顺序叠加 谁大谁生效

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值