目录

• 一、组合选择器
  • 群组选择器
  • 子代选择器
  • 后代选择器
  • 相邻选择器
  • 兄弟选择器
  • 交集选择器
  • 组合选择器的优先级
• 二、属性选择器
• 三、盒模型
  • 盒模型概念
  • 盒模型成员介绍
• 四、边界圆角
  • 单角设置
  • 整体赋值
• 五、常用标签
  • 超连接标签a
  • 图片标签img
  • 列表标签list
• 六、伪类选择器
  • a标签的四大伪类
  • 内容伪类
  • 索引伪类
  • 取反伪类
• 七、盒模型布局
  • 做页面必备reset操作
  • 盒模型布局基本介绍
  • display:显示方式
  • 兄弟坑
  • 父子坑
  • 解决方案

一、组合选择器

群组选择器

可以将任意多个选择器分组到一起，并用逗号分隔。

div,.s,section{
            color:red;
        }

子代选择器

如果只希望影响到某个标签下的第一级标签，可以用子代选择器。

x > y。只会影响到x标签下的y标签，不会影响到x标签下的z标签里的y标签。

div>strong{
    color:red;
}

后代选择器

又称包含选择器。只要是在这个标签里的某种标签都会被影响

x 空格 y。x标签下所有的y标签

div a {
    text-decoration: none;
}

相邻选择器

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。

x + y。x标签左右的y标签

span+section{
            background-color:pink;
        }

兄弟选择器

x ~ y。x标签附近的所有的y标签。兄弟选择器包括相邻选择器。

span~section{
            background-color:brown;
        }

交集选择器

相交的部分就是要设置属性值的标签

xy。即有x又有y

i.s{
    color: yellow;
}
<i class=‘s‘>iiii</i>

组合选择器的优先级

同目录结构下

? 子代与后代优先级相投。相邻与兄弟优先级相同。

? 最终的样式采用逻辑后的样式根据选择器权值进行比较

不同目录结构下

? 根据选择器权值进行比较

? 权值为标签权重之和

? 权重： *:1

? div:10

? class:100

? id:1000

? !important:10000

? 权值比较时，关心的是值的大小，不关心位置和具体选择器名

? 权值相同时，靠位置决定

? id永远比class大，class永远比标签大

? 控制的是同一目标才具有可比性

二、属性选择器

? 属性选择器权重与class选择器一样

? 有属性class的所有标签

[class]{
            color: orange;
        }

? 有属性class且值为d2的所有标签

[class=‘d2‘]{
            color: pink;
        }

? div且class=‘d2‘,权重增加

div[class=‘d2‘]{
            color: blue;
        }

? 属性以什么开头：^=

[class^=‘he‘]{
            color: yellow;
        }

? 属性以什么结尾：$=

[class^=‘rd‘]{
            color: tan;
        }

? 属性模糊匹配：*=

[class^=‘llo‘]{
            color: cyan;
        }

三、盒模型

盒模型概念

• 广义盒模型：文档中所有功能性及内容性标签，及文档中所有显示性标签
• 侠义盒模型：文档中以块级形式存在的标签（块级标签拥有盒模型100%特性且最常用）
• 盒模型组成：margin + border + padding + content

盒模型成员介绍

content

• 通过设置width与height来规定content
• 块级标签可以设置自身宽高，默认宽为父级宽(width=auto)、高为0，高度可以由内容决定
• 内联标签不可以设置自身宽高，默认宽高均为0，宽高一定由内容决定

border

• border(边框)由border-width(宽度)、border-color(颜色)、border-style(风格)三部分组成
• border成员：border-left、border-right、border-top、border-bottom
• border-width成员：border-left-width、border-right-width、border-top-width、border-bottom-width
• border-color成员：border-left-color、border-right-color、border-top-color、border-bottom-color
• border-style成员：border-left-style、border-right-style、border-top-style、border-bottom-style

padding

• padding成员：padding-left、padding-right、padding-top、padding-bottom
• padding整体设置

margin

• margin成员：margin-left、margin-right、margin-top、margin-bottom
• margin整体设置

四、边界圆角

单角设置

border-top-left-radius

一个固定值:表示横纵
border-top-left-radius: 100px;
两个固定值:表示横与纵
border-top-left-radius: 100px,50px;
百分比赋值
border-top-left-radius: 100%;

整体赋值

border-radius

不分方位
左上为第一个角,顺时针,不足找对角
border-radius: 30px;

区分横纵
1.控制横向/控制纵向
2.横向又可以分为1,2,3,4个值;纵向亦然
border-radius: 10px 100px 50px /50px;
左上横10 右上横100 右下横50 左下横100/纵向全为50

五、常用标签

超连接标签a

语法

<a href="链接地址"  title=‘鼠标悬浮的文本提示‘ target=‘目标位置‘></a>

target:_self 当前页面打开 | _blank 新开空白标签为来打开目标网页

基本使用

<a href="https://www.baidu.com">百度</a>

注：如果是在本地的链接。当前目录./ 上一级目录..

其他应用场景

• mailto：邮件给...
• tel：电话给...
• sms：信息给...

a标签默认属性的清除

a {
    color: #333;
    text-decoration: none;
    outline: 0
}

锚点

通过锚点名与#锚点名建起关联

name=‘tag‘|href=‘#tag‘

前往底部

<a href="#tag">前往底部</a>

设置一个锚点

<div class="bottom">
        <a name="tag">底部</a>
</div>

图片标签img

语法

<img src="图片地址" alt="加载错误提示文字" title="鼠标悬浮的文本提示">

列表标签list

reset操作

<style>
        ol,ul{
            margin: 0;
            padding:0;
            list-style: none;
        }
    </style>

有序列表

<ol>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ol>

无序列表

<ul>
    <li>列表项</li>
    <li>列表项</li>
    <li>列表项</li>
</ul>

六、伪类选择器

a标签的四大伪类

• :link 初始状态
• :hover 鼠标悬停
• :active 活动状态
• :visited 访问过后的状态

注:鼠标样式

{
    cursor: pointer | wait | move;
}

内容伪类

• :before：内容之前
• :after：内容之后

.txt:before{
    content: ‘我是前缀```‘
}
.txt:after{
    content: ‘```我是后缀‘
}

索引伪类

• :nth-child(n)：位置优先，再匹配类型。找到所有结构下的第N个标签,如果刚好是所选类型,那么匹配成功。
• :nth-of-type(n)：类型优先，再匹配位置。先将页面中的所有的所选类型找出,在匹配那些在自己结构层次下的第N个。

注：位置从1开始

取反伪类

• :not(selector)：对selector进行取反

七、盒模型布局

做页面必备reset操作

*{
    margin: 0
}

盒模型布局基本介绍

• 布局方位：margin-left、margin-right、margin-top、margin-bottom
• 影响自身布局：margin-left、margin-top
• 影响兄弟布局：margin-right、margin-bottom

  ? margin-bottom影响上下兄弟,尽量别对margin-right进行设置

  ? margin-right影响上下兄弟,尽量别对margin-bottom进行设置

display:显示方式

• 块:block
• 内联:inline
• 内联块:inline-block

兄弟坑

    <!-- 坑1 -->
    <section class="s1"></section>
    <section class="s2"></section>

盒模型布局的坑只出现在和margin-top相关的地方

        .s1,.s2{
            width: 100px;
            height: 100px;
            background-color: pink;
        }

和左右不一样,上下top会重叠取大值

        .s1{
            margin-bottom: 20px;
        }
        .s2{
            margin-top: 20px;
        }

父子坑

    <!-- 坑2 -->
    <div class="sup">
        <div class="sub"></div>
    </div>

.sup{
            width: 200px;
            height: 200px;
            background-color:cyan;
        }
        .sub{
            width: 100px;
            height: 100px;
            background-color:orange;
        }

父子top重叠,取大值

    .sup{
        margin-top: 50px;
    }
    .sub{
        margin-left: 50px;
        /*margin-top:100px;*/
    }

解决方案

1.将父级固定

.sup{
    /border-top: 1px solid black;/
    /border-top: 1px solid transparent;/
    /保证显示区域不变200200/
    /height: 199px/
}

2.通过padding

.sup{
    padding-top:50px;
    height: 150px;
}

原文地址：https://www.cnblogs.com/xvchengqi/p/9688197.html