css基础——续

一、css复用选择器

1.交集选择器：

交集选择器是并且的意思，即...又...的意思

（1）交集选择器需要两个选择器组成，

（2）且第一个必须为元素选择器，第二个为id或者class选择器，

（3）选择器之间不能有任何连接符。

<p>元素选择器</p>
<p class="one" >类选择器</p>
<p id="two" >id选择器</p>

p.one{
    color: red;
}

p#two{
    color: blue;
}

2.并集选择器：

并集选择器是和的意思

(1)各个选择器之间使用逗号进行分割；

(2)可应用与多个选择器。

p,#two{
    color: blue;
}

交集并集的区别：

交集（&&）——既要满足第一个元素选择器的要求，又要满足后面的选择器的要求

并集（||）——两者满足其一皆可

3.兄弟选择器：

选中贴着的兄弟或者后面的所有兄弟。

语法格式有两种：

（1）A+B 表示选择贴着的那一个标签

p+div{
            color: aqua;
        }

(2)A~B 表示选择后面所有标签

p~div{
            color: aqua;
        }

4.子元素和后代选择器

（1）子元素，只能选择子类选择器  ">"

div>p {
            color: bisque;
        }

（2）后代，选中的元素为所有的后代  " 空格 "

div p {
            color: bisque;
        }

5.属性选择器

属性选择器分为多种情况

1.不给任意符号和标志的时候，代表只要有这个自定义或者全局属性的属性都可以

<div title="one">123</div>
<div title="one2">ll</div>

div[title]{
            color: aqua;
        }

2.= 属性值要完全相等

<div title="one">123</div>
<div title="one2">ll</div>

div[title="one"]{
            color: aqua;
        }

3.*任意 里面包含这个完整的字符

<div title="one">123</div>
<div title="one2">ll</div>

div[title*="one"]{
            color: aqua;
        }

4.$ 以指定字符结尾

<div title="one">123</div>
<div title="one2">ll</div>

div[title$="one"]{
            color: aqua;
        }

5.^ 以指定字符开始

<div title="one">123</div>
<div title="one2">ll</div>

div[title^="one"]{
            color: aqua;
        }

六、伪元素选择器

1.E::first-letter

             —————————— 代表选中元素中的第一个汉字或者是第一个字母

.one::first-letter{
        font-size: 50px;
      }  

2.E::first-line

             ——————————— 代表选中元素中浏览器中第一行的所有文字（字母）

.one::first-line{
        font-size: 50px;
      }  

3.E::selection

             ———————————— 可改变选中文字的样式

.one::first-selection{
        font-size: 50px;
      }  

4.E::after（before）

             ———————————— 代表再选中标签之后(之前)增加内容，内容放在content属性里面，对应修改content里面的样式，不会修改其他内容

 p::after{
                 content: "吃饭";
                 color: blueviolet;
                 font-size: 20px;
             }

二、css三大特性

1.层叠性

（1）通过一个样式覆盖掉另外一个样式

（2）优先级相同时，后来者居上

2.优先级

【1】浏览器默认样式<继承<*<元素<class<id

（1）同类型选择器，后来者居上

（2）不同类型选择器，根据选择器优先级来层叠

【2】当多个选择器混合在一起使用时, 可以通过计算权重来判断谁的优先级最高。

3.继承性————所有后代都可以应用父元素的样式

（1）并不是所有的属性都可以继承, 只有以color/font-/text-/line-开头的属性才可以继承。

（2）在CSS的继承中不仅仅是儿子可以继承, 只要是后代都可以继承 。

（3）a标签的颜色和下划线的设置不能继承，必须对a标签本身进行设置。

（4）h标签的字体大小不能修改，必须对h标签本身进行修改。

三、css背景(background)

1.背景颜色 (background-color)

background-color: red;

2.背景图片 (background-image)

——————————需要设置高度和宽度

background-image: url("./t1.jpg"); 

3.背景平铺 (background-repeat)

background-repeat:repeat-x ;

4.背景位置 (background-position)

取值可以为left、right、top、bottom、center，还可以为百分数（%），以及像素值

background-position: top bottom;

5.背景附着（background-attachment）

属性值可以为：

（1）fixed：图片固定

background-attachment: fixed;

（2）scroll：图片一起滚动

background-attachment: scroll;

6.背景尺寸(background-size)

 cover：完全覆盖

background-size: cover;

四、标签显示模式

1.块级元素(block)

（1）常见的块级元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<form>等

（2）块级元素的特点：永远不跟其他元素在一行；永远按照自上而下的顺序排列；并且能设置宽高

2.行内元素(inline)

（1）常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等

（2）行内元素的特点：在一行上展示；不能设置宽高

3.行内块元素(inline-block)

（1）常见的行内块元素有<img>、<input>

（2）行内块元素的特点：在一行上展示；并且可以设置宽高

（3）也被称为可替换元素

4.标签显示的转换(display)

块转行内：

display:inline;

行内转块：

display:block;

块、行内元素转换为行内块：

display:inline-block;