css总结（2）

最新推荐文章于 2022-06-23 00:17:02 发布

weixin_43821488

最新推荐文章于 2022-06-23 00:17:02 发布

阅读量90

点赞数

本文链接：https://blog.csdn.net/weixin_43821488/article/details/104316396

版权

1.父子选择器/派生选择器

<div>
	<span>123</span>css
</div>
	<span>456</span>

我要选择div中的span标签

div span{
    background-color:red;
}

这就叫做父子选择器

格式：选择器与选择器之间各一个空格就行

选择器选择器{}

例子：

<div>
    <em>1</em>
    <Strong>
    <em>2</em>
    </Strong>
</div>

我要选择div中的em

div em{
    background-color:red;
}

2.直接子元素选择器

<div>
    <em>1</em>
    <Strong>
    <em>2</em>
    </Strong>
</div>

我要选择div中第一个em，即div中的直接子元素

div > em{
    background-color:red;
}

格式：选择器 > 选择器{}

3.并列选择器

<div>1</div>
<div class="demo">2</div>
<p class="demo">3</p>

我要选中class为demo的div标签

div.demo{
    background-color:red;
}

格式：选择器后面直接加选择器不用空格

例如：选取class名为one的em标签

em.one{}

4.分组选择器

将多个选择器选中，公用以可代码块

格式：选择器，选择器{}

例：

将下面三个标签同时变成红色

<div>1</div>
<p>2</p>
<em>3</em>

div,
p,
em{
    background-color:red;
}

在下面html代码中

<div class="classDiv" id="idDiv">
    <p class="classP" id="idP">
        1
    </p>
</div>

执行下面这段css代码

#idDiv p{
    background-color:red;
}
div .classP#idP{
    background-color:pink;
}

计算#idDiv p和div .classP#idP的权重值

第一个为100+1（256进制）

第二个为1+10+100（256进制）

明显第二个大于第一个所以1的颜色应该为粉色

关注