选择器的认识和学习（后代选择器、交集选择器、并集选择器。。。。、背景图片的设置样式）

不会写就发呆
285 阅读4分钟

今日总结

选择器的进阶

为了能够提高代码效率和代码的美观度，我们日常开发中，使用最多的是复合选择器

后代选择器

根据HTML标签的嵌套关系，选择父级标签后代中的元素，后代选择器可以选择所有的后代标签，包括儿子、孙子、重孙子... 后代选择器之间用空格进行隔开

写法：选择器1 选择器2 {

css属性；

属性值，属性值

.................

}

示例代码：

ul li {
                color: red;
                font-size: 20px;
                font-weight: 700;
            }

<ul>
        <li>后代选择器</li>
        <li>后代选择器</li>
        <li>后代选择器</li>
    </ul>

特殊的a标签 ，因为a标签浏览器已经默认给了固定的样式，如果想要改变，就必须要选中a来给定样式，这样才能给浏览器默认样式给覆盖掉。

交集选择器

交集选择器选中页面同时满足多个选择器的标签，交集选择器之间不需要加空格，是紧挨着的

写法：选择器1选择器2 {

css属性；

css属性值；css属性值；

}

<div class="one" id="two">
    我是一个交集选择器
</div>

  .box#box2 {
            color: red;
        }

并集选择器(这个很重要)

并集选择器是可以同时选中多个标签来给定属性值，并集选择器中间要用,隔开 ，在并集选择器中，可以使用不同类型的选择器在一起使用，并集选择器 一行只显示一个标签，这样有助于提高代码的可读性

 <em>字体倾斜</em>
    <em>字体倾斜</em>
    <em>字体倾斜</em>
    <i>字体倾斜</i>
    <i>字体倾斜</i>
    <i>字体倾斜</i>

<style>
        em,
        i {
            font-style: normal;
        }
        em, ul .color {
            color: pink;
        }
    </style>

在一般的开发中，并集选择器用的特别多，因为可以很好的提高代码的效率，有效的会给多个标签添加同样样式

子代选择器

子代选择器是选择父级元素子代中的标签元素。

写法：选择器1>选择器2 {

css属性：属性值；

css属性：属性值；

..................

}

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

 <style>
        .box>strong {
            color: red;
        }
        p>strong {
            color: rosybrown;
        }
    </style>

在子代选择器中，子代只包括父级的儿子，不能包含孙子、重孙子，在开发中，子代选择器用的很少，基本上用不到。

hover伪类标签选择器

hover伪类标签选择器，是指定标签添加鼠标经过的样式，这个标签一般大多数给a标签使用，但是hover伪类不仅能给a使用，还可以给其他标签使用， :hover标签前后不能有空格

<body>
    <!-- 伪类标签选择器,:hoverx选择器不仅可以给a标签设置鼠标经过的样式，还可以给其他的标签设置鼠标经过的样式，:hover标签前后不能有空格 -->
    <a href="#">小米</a>
​
</body>

a:hover {
            color: black;
        }
/*就等于是给a加了一个鼠标经过时候文本显示黑色。

复合选择器总结：

1641472318216.png

emmet语法

作用：通过简写写语法，提高写代码效率。

1641472251828.png

背景颜色

背景颜色:background-color:(rbg)

属性值： • 颜色取值：关键字、rgb表示法、rgba表示法、十六进制……

其中background-color默认的颜色是透明的（transparent），背景颜色不会影响盒子的大小，一般在定义布局的时候都会先给盒子设置一个背景颜色，可以提高效率。

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

<style>
        .box {
            width: 300px;
            height: 300px;
            background-color: rgba(0, 0, 0, 0.1);
            /* background-color: #000; */
            /* background-color: transparent; */
        }
        /* 背景透明用background-transaprent; */
    </style>

背景图片

背景图片：background-image:url

背景图片是给背景添加一张图片，一般作用于项目中小的装饰图片、logo图片、还有超大背景图片。

背景图片的特点：背景图片不会撑开盒子，在定义图片背景的时候需要给盒子定义一个高度，要不然背景图片显示不出。

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

<style>
        .box {
            width: 300px;
            height: 300px;
            background-color: red;
            background-image: url(./images/1.jpg);
        }
        /* 背景图片 不设置高度出不来图片，因为图片不能撑开盒子 */
    </style>

图片的平铺

图片的平铺：background-repeat

属性值有：

  • repeat :默认 水平和垂直方向都平铺
  • no-repeat:表示不平铺
  • repeat-x:沿着水平方向（x轴平布）
  • repeat-y:沿着垂直方向（y轴平铺）
 <style>
        .box {
            width: 600px;
            height: 600px;
            background-color: red;
            background-image: url(./images/1.jpg);
            /* background-repeat: no-repeat; */
            /* 这个是背景图片不平铺 */
            /* background-repeat: repeat-x; */
            /* repeat-x是沿着x方向平铺 */
            background-repeat: repeat-y;
            /* repeat-y是沿着x方向平铺 */
        }
    </style>

背景位置

属性名：background-position:水平方向 垂直方向

  • 背景位置有两个取值,第一个是水平方向：left center right。第二个是垂直方向：top center bottom，如果省略了一个属性，那么第二个会自动默认为center
  • background-position: 背景位置可以设置精确值，可以用数值来表示，x就对应水平位置，y就对应垂直位置，x和y不能调换位置，调换位置对应的背景位置也会改变
<body>
    <div class="box">
​
    </div>
</body>

<style>
        .box {
            width: 600px;
            height: 600px;
            background-color: red;
            background-image: url(./images/1.jpg);
            background-repeat: no-repeat;
            background-position: 50px 50px;
            background-position: 100px 50px;
        }
        /* 背景位置可以设置精确值，可以用数值来表示，x就对应水平位置，y就对应垂直位置，x和y不能调换位置，调换位置对应的背景位置也会改变 */
    </style>

注意：这里的两个数值是不可以交换位置的。x轴和y轴是固定显示的。

  • 背景位置也可以使用混合写法，方位+数字写法，混合写法第一个只能是水平位置，第二个是垂直位置

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

    <style>
        .box {
            width: 600px;
            height: 600px;
            background-color: red;
            background-image: url(./images/1.jpg);
            background-repeat: no-repeat;
            background-position: left 80px;
            background-position: 80px bottom;
        }
        /* 背景位置也可以使用混合写法，方位+数字写法，混合写法第一个只能是水平位置，第二个是垂直位置 */
    </style>

背景的位置属性总结图片：

1641475167528.png

背景属性的连写

背景属性的连写推荐写法：background-color：color image repeat position

顺序没有固定的要求。

  • 注意：

    如果需要设置单独的样式和连写 ① 要么把单独的样式写在连写的下面 ② 要么把单独的样式写在连写的里面

img标签和背景图片的区别

  • img一般用于产品的图片上面，用于经常改变图片的地方。

背景图片一般用于网页中小图片、logo、超大背景图片

  • img标签是一个标签，不设置宽高会默认以原尺寸显示，但是背景图片在定义的时候必须要设置高度，背景图片不能撑开盒子。
avatar
文章
阅读
粉丝