选择器进阶+背景的一些相关属性

余晖_
203 阅读4分钟

选择器

复合选择器

后代选择器

语法:

选择器1 选择器2{
        属性:属性值;
        属性:属性值;
        ...
}

后代选择器中可以选择所有的后代标签, 选择器与选择器之间用空格隔开

如果想要给a标签设置颜色，必须选中a标签才可以,因为浏览器默认给了a标签一个蓝色带有下划线的样式，会优先执行浏览器给的默认样式

    <ul>
        <li>我是ul里面的li标签</li>
        <li>我是ul里面的li标签</li>
        <li><a href="#">我也想改变颜色</a></li>
        <li class="last">我是ul里面的li标签</li>
    </ul>

ul .last{
            color: blue;
            font-size: 20px;
        }
ul li a {
            color: pink;
        }

子代选择器

语法:

选择器1>选择器2{
      属性:属性值;
      ...
}

选择器与选择器之间使用 > 隔开

子代选择器只能选中亲儿子标签

    <div class="box">
        <strong>我是儿子</strong>
        <p>
            <strong>我是孙子</strong>
        </p>
    </div>
​

.box>strong {
            color: blue;
        }

并集选择器

语法:

选择器1,选择器2{
       属性:属性值;
       ...
}

同时选中多组标签,设置相同的样式

并集选择器中每组选择器习惯竖着写,最后一个选择器的后面不要加逗号,并集选择器每组选择器可以是任意基础选择器或复合选择器的组合

<em>倾斜的文字</em>
<em>倾斜的文字</em>
<em>倾斜的文字</em>
<i>倾斜的文字</i>
<i>倾斜的文字</i>
<i>倾斜的文字</i>

em,
 i {
    font-style: normal;
}

交集选择器

语法:

选择器1选择器2:{
      属性:属性值;
      ...
}

交集选择器可以理解为既又的原则(既能被选择器1选中,又能被选择器2选中的标签)

选择器1与选择器2 之间紧挨着,不需要任何符号分割

交集选择器如果有标签选择器,标签选择器必须放到最前面,如果没有标签选择器,其他选择器不分前后顺序

<div class="box" id="box">大哥</div>
<div>大姐</div>
<p>二姐</p>
<span class="box">三姐</span>

div.box{
    color: pink;
}
​
#box.box{
     color:blue;
}

伪类选择器

语法:

选择器:hover{
    属性:属性值;
    ...
}

鼠标悬停在元素上的状态,设置样式

:hover选择器不仅可以给a标签使用,其他的任意标签都可以使用

:的前后都不能有空格

 <div class="box1">京东</div>

.box1 {
    width: 300px;
    height: 50px;
    background-color: pink;
    line-height: 50px;
    text-align: center;
    font-weight: 700;
    color: green;
}
.box1:hover {
    color: purple;
    background-color: #d9d9d9;
}

emmet语法

通过简写语法,快速生成代码

背景相关属性

Snipaste_2022-01-06_20-39-04.png

背景颜色

background-color

可以用关键字、rgb表示法、rgba表示法、十六进制进行颜色取值

背景颜色默认值是透明的（transparent）

背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置，一般在布局中会习惯先给盒子设置背景颜色

<div class="box"></div>

.box {
    width: 300px;
    height: 300px;
    /* 透明色 */
    background-color: transparent;
    background-color: skyblue;
}

背景图片

background-image

背景图片默认是在水平和垂直方向平铺的

如果没设置盒子的宽高，背景图片是不能撑开盒子的

背景图片中url中的引号可以省略不写

 <div class="box"></div>

 .box {
    width: 600px;
    height: 600px;
    background-image: url(./img/1.jpg);
}

背景平铺

background-repeat

Snipaste_2022-01-06_21-07-56.png

<div class="box"></div>

 .box {
            width: 600px;
            height: 600px;
            background: skyblue;
            background-image: url(./img/1.jpg);
            /* 默认值 */
            background-repeat: repeat;
            /* 不平铺 */
            background-repeat: no-repeat;
            /* 水平方向平铺 */
            background-repeat: repeat-x;
            /* 垂直方向平铺 */
            background-repeat: repeat-y;
        }

背景位置

background-position

Snipaste_2022-01-06_21-21-55.png

方位名词

方位名词取值

水平方向：left、center、right 垂直方向：top、center、bottom

方位名词和书写顺序无关系 bottom right与right bottom效果一致,如果指定了一个方位名词,另一个值省略,则第二个值默认居中对齐

 <div class="box"></div>

.box {
            width: 400px;
            height: 400px;
            background: skyblue;
            background-image: url(./img/1.jpg);
            background-repeat: no-repeat;
            background-position: left bottom;
}

精确单位

精确单位是以坐标系来表示的，原点（0,0）在盒子的左上角；x轴取正值水平向右，取负值则从原点水平向左；y轴取正值垂直向下，取负值则从原点垂直向上

如果是精确单位第一个参数是x坐标，则第二个参数一定是y坐标

x、y可以取负值

 <div class="box"></div>

.box {
            width: 400px;
            height: 400px;
            background: skyblue;
            background-image: url(./img/1.jpg);
            background-repeat: no-repeat;
            /* 精确单位 */
            background-position: 20px 30px;
            background-position: 50px;
            background-position: -30px -50px;
}

混合单位

第一个参数表示x坐标 ,第二个参数表示y坐标

<div class="box"></div>

.box {
            width: 400px;
            height: 400px;
            background: skyblue;
            background-image: url(./img/1.jpg);
            background-repeat: no-repeat;
            /* 混合单位 */
            background-position: 100px top;
            background-position: left 80px;
        }

背景相关属性连写

书写顺序：

background：color image repeat position

单个属性值的合写，取值之间以空格隔开

如果盒子大小和背景图片大小一样，此时可以直接写 background：url() 其他属性可以省略

<div class="box"></div>

.box {
            width: 300px;
            height: 500px;
            background: orange url(./img/icon.png) no-repeat left center;
        }

img标签和背景图片的区别

  • img标签直接写上img标签就行

img标签是一个标签，不设置宽高默认会以原尺寸显示

  • 背景图片需要有个div父元素

需要设置div的宽和高，因为背景图片只是装饰的css样式，不能撑开div标签

avatar
文章
阅读
粉丝