各种常用选择器的应用与区别

会整活的小李
191 阅读6分钟

学习目标

  • 复合选择器 在 HTML 中选择元素
  • Emmet 语法提高编码速度
  • hover伪类选择器设置标签的鼠标悬停状态
  • 背景相关属性 装饰元素的背景样式
  • Chrome调试工具 修改和检查样式

复合选择器

后代选择器

作用:后代选择器可以选择所有的后代标签 包括儿子 孙子 重孙子...

语法:
选择器1 选择2{
      css属性
      属性:属性值;
      属性:属性值;
     ...
 }
.box a{ css属性}

选择器与选择器之间使用空格隔开 后代选择器最终选择的是子代元素.选中子孙后代.

后代选择器可以是任意基础选择器的组合.

示例代码

 <ul>
        <li>我是ul里面的li标签</li>
        <li>我是ul里面的li标签</li>
        <li>我是ul里面的li标签</li>
        <!-- 特殊的a标签 -->
        <li><a href="#">我也想改变颜色</a></li>
    </ul>

 ul li {
     
       color: red;
       font-size: 30px;
   }

 ul li a { 
     /*如果想要给a标签设置颜色,必须选中a标签才可以.*/
     color: skyblue
 
}

子代选择器

作用:子代选择器只能选中亲儿子标签(亲儿子选择器)

语法
        选择器1 > 选择器2{
            css属性
            属性:属性值;
            属性:属性值;
            ...
        }
        作用:

只能选中亲儿子 选择器与选择器之间使用>隔开

示例代码:

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

.box>strong {
            color: red;
        }

并集选择器

作用:同时选中多组标签,设置相同的样式.

语法:
 选择器1,选择器2{
        css属性
        属性:属性值;
        属性:属性值;
   }

注意事项

选择器与选择器之间使用逗号隔开

​ 并集选择器中每组选择器习惯竖着写,最后一个选择器的后面千万不要加逗号.

​ 并集选择器每组选择器可以是任意基础选择器或复合选择器的组合

示例代码:

	<em>倾斜的文字</em>
    <em>倾斜的文字</em>
    <em>倾斜的文字</em>
    <em>倾斜的文字</em>
    <i>倾斜的文字</i>
    <i>倾斜的文字</i>
    <i>倾斜的文字</i>
    <i>倾斜的文字</i>
    <div>熊大</div>
    <p>熊二</p>
    <h3>光头强</h3>
    <ul>
        <li>小猪佩奇</li>
        <li>乔治</li>
        <li class="last">小龙女</li>
    </ul>

 	  em,
        i {
            font-style: normal;
        }

        div,
        p,
        h3,
        ul .last {
            color: pink;
        }

交集选择器

作用:交集选择器可以理解为既又的原则

语法:

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

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

交集选择器如果有标签选择器,标签选择器必须放到最前面

<!-- 只需要给大哥设置颜色为红色 -->
    <div class="box" id="box">大哥</div>
    <div>大姐</div>
    <p>二姐</p>
    <span class="box">三姐</span>

	
	div.box {
            color: red;
        }

        /* #box.box {
            color: pink;
        } */

hover伪类选择器

作用:选中鼠标悬停时候的样式

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

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

:的前面和后面不能有空格.

<a href="#">小米</a>
<div class="box"></div>

/* 鼠标经过改变a的文本颜色 */
        a:hover {
            color: orange;
        }

        .box {
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }

        /* 鼠标经过改变盒子背景颜色 */
        .box:hover {
            background-color: #ff6700;
        }

背景属性

背景颜色

background-color:red;
/* 默认颜色值 透明色 */
background-color: transparent;

背景图片

background-image:url(图片路径);

背景是否平铺

默认值
background-repeat:repeat;
不平铺
background-repeat:no-repeat;
水平平铺
background-repeat:repeat-x;
垂直平铺
background-repeat:repeat-y;

背景位置

background-position:x y;
取值:
    方位名词:
		水平方位:left|center|right
		垂直方位:top|center|bottom
方位名词和书写顺序无关系 bottom right与right bottom效果一致
如果指定了一个方位名词,另外一个省略不写,则默认居中对齐(center)
background-position: left bottom;
background-position: center;
    数字+px:
如果是精确单位 第一个参数是x坐标,第二个参数一定y坐标
background-position: 20px 30px;
background-position: 30px 20px;
    混合单位:
第一个参数表示x坐标 第二个参数表示y坐标
background-position: 40px top;
 background-position: 50px bottom;

背景连写

background:color image  repeat position
background: pink url(./img/icon.png) no-repeat left center;

背景案例

<h3 class="title">成长守护平台</h3>

	.title {
            /* 1.1 设置h3的基本样式 */
            width: 118px;
            height: 41px;
            /* background-color: pink; */
            font-weight: 400;
            font-size: 14px;
            line-height: 41px;
            /* 1.2 设置背景的相关样式 */
            background-image: url(./img/icon.png);
            background-repeat: no-repeat;
            background-position: left center; 
    	 /* 背景连写 */
            /* background:color image repeat position*/
            /* 背景连写 各个属性值之间使用空格隔开 */
            background: url(./img/icon.png) no-repeat left center;
            /* 1.3 文字首行缩进 */
            text-indent: 1.5em;
        }

        /* 1.4 鼠标经过改变文本颜色 */
        .title:hover {
            color: orange
        }

​ img标签应用场景:产品图片

​ 背景图片的应用场景:装饰型的小图片 logo 超大背景图

​ 区别:

​ img标签可以撑开盒子.

​ 背景图片只是装饰css的样式,不能撑开盒子

​ 以后要使用背景图片,一定要记得设置宽高.

元素显示模式

块级元素

特点:

    1. 独占一行
    1. 宽度默认是父元素的宽度,高度由内容撑开

    1. 可以设置宽高

    • 代表性标签:
    • div p h系列 ul li dl dt dd ...

行内元素

特点:

    1. 一行可以显示多个
  • 2 .宽高默认内容撑开
  • 3 .设置宽高无效
    • 代表性标签:
    • a span em strong.....

行内块元素

  • 1.一行显示多个;
  • 2.设置宽高有效
    • 代表性标签:
    • input textarea button

显示模式转换

目的:改变元素默认的显示特点

  • 转换为块级元素:
    • display: block;
  • 转换为行内块元素
    • display*: inline-block;*
  • 转换为行内元素
    • display: inline;

标签嵌套注意事项

块级元素可以嵌套任意元素,反之不要用p标签去包含 div h p系列 等块级元素

a标签可以嵌套任意元素,但是不要用a标签包含a标签

a标签可以包含块级元素,但是吐血推荐小伙伴们进行模式转换

css特性

三大特性:继承性 层叠性 优先级

继承性

子承父业

子元素可以继承父元素的某些样式.

以下属性都可以继承
color: red;
font-style: italic;
font-weight: 700;
font-size: 14px;
font-family: '黑体';
text-indent: 2em;
text-align: center;
line-height: 200px;

控制文字的属性都能继承,不是控制文字的都不能继承.

	ul {
            /* 去除li标签默认的小圆点 */
            list-style: none;
        }

继承失效:

如果元素有浏览器默认样式，此时继承性依然存在，但是优先显示浏览器的默认样式

  1. a标签的color会继承失效

​ 其实color属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了(原型链继承优先级问题 a标签会被dom给一个默认蓝色所以不会继承上面的)

  1. h系列标签的font-size会继承失效

​ 其实font-size属性继承下来了，但是被浏览器默认设置的样式给覆盖掉了

  1. div的高度不能继承，但是宽度有类似于继承的效果

​ 宽度属性不能继承，但是div有独占一行的特性

层叠性

相同的选择器设置相同的样式才会有层叠性.

avatar
文章
阅读
粉丝