学习前端第四天CSS选择器进阶

1.复合选择器

​ （1）后代选择器

​ 1.语法：选择器1 选择器2 选择器3{}

​ div span{} 选择器1及时父级元素 最终样式作用在最后一个选择器上

​ （2）子代选择器 只选择他的儿子

​ 语法：选择器1 > 选择器2 {}

​ （3）并集选择器*** 并集的可以是基础选择器，也可以是复合选择器

​ 语法：选择器1，选择器2，选择器3，...{}

​ （4）交集选择器

​ 语法：选择器1选择器2...{} 意思就是一个引号里面同时有几个选择器 例如：".box .box1 p"

​ （既又原则）找到页面中 既 能被选择器1选中，又 能被选择器2选中的标签，设置样式

​ 注意：

​ 1.交集选择器中的选择器之间是紧挨着的，没有东西分隔

​ 2.交集选择器中如果有标签选择器，标签选择器必须写在最前面

2.emmet语法

<!-- 生成普通标签：标签选择器 div -->
  <div></div>
  <!-- 生成类类选择器：类选择器 .red -->
  <div class="red"></div>
  <p class="red"></p>
  <!-- 生成id选择器：id选择器 #one -->
  <div id="one"></div>
  <!-- 生成指定的标签 标签名+类选择器名+id选择器名 -->
  <p class="red" id="one"></p>
  <!-- 子代选择器 父代选择器>子代选择器 -->
  <ul>
    <li></li>
  </ul>
  <!-- 创建多个 ul>li*5  -->
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <!-- 创建内部文本内容 ul>li*5{$} -->
  <ul>
    <li>刘佳慧</li>
    <li>刘佳慧</li>
    <li>刘佳慧</li>
    <li>刘佳慧</li>
    <li>刘佳慧</li>
  </ul>
  <!-- 创建内部文本内容依次递增 加$ ul>li*5>a{$} -->
  <ul>
    <li><a href="">你好1</a>
      <a href="">你好2</a>
      <a href="">你好3</a>
      <a href="">你好4</a>
      <a href="">你好5</a>
    </li>
  </ul>

3.hover伪类选择器

​ hover选择器是鼠标悬停上去的时候设置的一种状态

​ 语法：选择器:hover {} 例如：a:hover {}

4.背景相关属性

​ （1）背景图片

 ​ 背景图片不可以把父盒子撑开，图片可以把父盒子撑开

background-image: url(./images/pic.jpeg);
/* background-image: url('./images/pic.jpeg'); */

（2）背景平铺

/* 不平铺 */
background-repeat: no-repeat;
/* 平铺 */
background-repeat: repeat;
/* 沿X轴方向平铺 */
background-repeat: x;
/* 沿Y轴方向平铺 */
background-repeat: y;

（3）背景位置

/* 一、方位名词
        X轴的方位名词：left center right
        Y轴的方位名词：top center bottom
        注意：如果你只写一个方位名词，剩下的就是center
   二、精确单位
        第一个值是X值   第二个值是Y值
        注意：如果你只写了一个精确单位，写的这个值是X轴的，省略的值是center */

      background-position: 50px 0;

背景属性连写：background：颜色 路径（url） 平铺 位置； 推荐这样写

5.元素显示模式

​ 块级元素 display: block; 块级元素文字可以换行，一行文字占一个块

​ 标签：p、div、h h是块元素，是一行一个的，然后需要一行多个可以转换成行内块元素

行内块元素 dsplay: inline-block; 行内块元素文字不可以换行，是许多个块元素在一行内

​ 和相邻的元素在一行上显示，但是中间会有空白缝隙，可以给行内块元素设置宽度和高度

​ 一行显示多个，可以设置宽高，宽度是文本的宽度

​ 标签有：textarea、input、button、select

​ 行内元素 display: inline;

​ 一行可以显示多个，默认宽度是他本身的宽度，不能设置宽高。

​ 标签有：a、span