CSS选择器的介绍

选择器的分类

最近在学css,对于看比较复杂的选择器来说有点摸不到头绪,所以再复习一下选择器的分类,ps:直接居然忘了#选择器是id选择器。。。自己真是太菜了。
在这里插入图片描述

标记选择器

也称为元素选择器,直接用HTML标记元素名称作为选择器

类选择器

class属性标记组,通常具有相同的功能或作用,因此可以设置相同的样式规则

```css
<p class="a1">著名诗人</p>
<ol class="a2">
	<li class="a3">李白</li>
	<li class="a4">杜甫</li>
</ol>
.a1{
color:red;
}
.a2{
font-style=italic;
}

联合选择器:标记选择器与类选择器直接相连

p.a2{
color:green;
font-size:20px;
}

id选择器

<p id="r">使用id选择器设置样式</p>
#r{
color:red;
text-align:right;
}

伪类选择器

自己理解的就是类名+:+伪类名,伪类名有:link、hover、active、visited、first-letter。。。直接上代码块吧!
HTML代码如下:

<p>在css中单位长度用的最多的是px、em、rem,这三个的区别是:
px是固定的像素,一旦设置了就无法因为适应页面大小而改变。
em和rem相对于px更具有灵活性,他们是相对长度单位,意思是长度不是定死了的,更适用于响应式布局。
对于em和rem的区别一句话概括:em相对于父元素,rem相对于根元素。
rem中的r意思是root(根源),这也就不难理解了。</p>
<a herf="https://www.cnblogs.com/wind-lanyan/p/6978084.html"></a>

css代码如下:

a:hover{
color:red;
text-decoration:underline;
}
/**link是未被访问前的样式*/
a:link{
color:blue;
text-decoration:underline;
}
p:first-line{
font-size:12px;
}
p:first-letter{
font-family:"黑体";
}

再回过头来看看自己最近写的选择器代码,,em…清晰很多~
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值