前端小白的css学习笔记——复合选择器、元素的显示模式、背景属性（and日常）

复合选择器

由两个或多个基础选择器，通过不同方式组合而成的。

后代选择器：包含选择器 选择父元素里的子元素。 元素 元素　{样式声明}

一般情况下，后代选择器不要超过4层

解析过程从右到左

<style>
    .adv-selector li {
        color: blue;
    }
</style>

<h3>复合选择器</h3>
<div class="adv-selector">
    <ul>
        <li>后代选择器</li>
        <li>子代选择器</li>
        <li>并集选择器</li>
        <li>伪类选择器</li>
    </ul>
</div>

子代选择器：只选择子代（亲儿子)。元素>元素 {样式声明}

<style>
    div>a {
        color: tomato;
    }
</style>
<div>
    <a href="#">html</a>
    <p>
        <a href="#">css</a>
        <a href="#">JavaScript</a>
    </p>
</div>

并集选择器：选择多组标签，同时为他们定义相同的样式。通常用于集体声明，对任意选择器都可以使用。用，分割。元素1，元素2 {样式声明}。约定的书写规范，元素竖着写。

<style>
	div,
    p,
    .pig a {
        color: tomato;
    }

</style>

<div>熊大</div>
<p>熊二</p>
<span>光头强</span>
<ul class="pig">
    <li><a href="./test.html">小猪佩奇</a></li>
    <li><a href="#">猪爸爸</a></li>
    <li>猪妈妈</li>
</ul>

交集选择器：既是元素1又是元素2。中间不能有任何符号。

<style>
    p.nav {
        color: tomato;
    }
</style>

<div class="nav">123</div>
<div class="nav">123</div>
<div class="nav">123</div>
<p class="nav">abc</p>
<p class="nav">abc</p>
<p class="nav">abc</p>
<p>jkl</p>
<p>jkl</p>
<p>jkl</p>

伪类：某种状态下的样式。

链接伪类选择器

<style>
    a:link {
      color: #333;
      text-decoration: none;
    }

    a:visited {
      color: orange;
    }

    a:hover {
      color: skyblue;
    }

    a:active {
      color: green;
    }
</style>

复合选择器总结

css的元素显示模式

元素的显示模式：元素（标签）以什么方式进行显示。

HTML元素一般分为块元素和行内元素。

块元素一行放一个，行内元素一行可以放多个

块元素特点：

• 比较霸道，自己独占一行。
• 高度，宽度，内外边距都可以控制。
• 宽度默认是容器（父级）的宽度的100%。
• 是一个容器盒子，里面可以放行内活着块级元素。

注意：

文字类的元素内不能使用块级元素

p h 类标签不能放其他块级元素。

行内元素特点：

• 相邻行内元素一行上，一行可以显示多个。
• 宽度高度直接设置没有效果。
• 默认宽度就是本身内容的宽度。
• 行内匀速只能容纳文本或其他行内元素。

注意：

链接里不能再放链接。

a里面可以放块级元素，但是给a转换一下块级模式最安全。

行内块元素：img input td 等同时具有块元素和行内元素的特点

• 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）
• 默认款酷就是它本身内容的宽度（行内元素特点）
• 高度，宽度外边距和内边距都可以控制（块元素特点）

ps:特殊的行内元素，特殊在可以设置宽高

显示模式可以转换：

display:block 转化为块元素

display:inline-block 转化为行内块

display:inline 转化为行元素

背景图片

• 背景颜色background-color：transparent透明的

• 背景图片background-image:none|url() 网页logo 小的装饰性图片 超大图
  背景图片容易控制位置

• 背景平铺background-repeat： ；

• 背景方位background-position：x y;
  （x,y可以用方位名词或者精确单位）

方位名词：

上	下	左	右	中
top	bottom	left	right	center

如果是方位名词，顺序跟位置无关 left top == top left

两个参数可以省略其中一个

精确单位：

• 第一个是x坐标
• 第二个是y坐标

background-position：20px 30px;

混合单位：

background-position：left 30px;

• 背景固定（背景附着）background-attachment：scroll（滚动）|fixed（固定）

• 复合写法
  比较常用，顺序可以更改
  background： color image repeat attachment position

• 背景色半透明度 rgba（0.0.0.0.5）0.5中的0可以省略rgba（0.0.0. .5），不影响盒子里的内容

ps.盒子半透明 opacity：0.5；影响盒子里的内容

日常思维导图