CSS宝典（选择器、盒子模型、浮动、定位）

最新推荐文章于 2022-03-02 22:53:02 发布

Z__legend

最新推荐文章于 2022-03-02 22:53:02 发布

阅读量322

点赞数 1

分类专栏：前端文章标签： css css3

本文链接：https://blog.csdn.net/Z__legend/article/details/117327878

版权

CSS 选择器

关系选择器

<body>
    <div>
        我是div内部的文字
        <p>我是div中的p元素
            <span> 我是div中的1号span元素 </span>
        </p>
        <span>我是div中的2号span元素</span>
        <span>我是div中的3号span元素</span>
    </div>
    <span>我是div外的span</span>
</body>

<!--将 “我是div中的1号span元素” 改成红色字体-->
        <!--父子元素-->
        div > p > span{
            color: red;
        }      
        <!--或者使用不带 > 号的方法，这中方法选取的范围更广-->
        div p span{
            color: red;
        }    
<!--将 div中所有的span元素（1号、2号、3号span）改成蓝色字体-->
        div span{
            color: blue;
        }     
<!--将 2号span元素 的字体颜色改成 greenyellow-->
        <!--兄弟元素  选择下一个兄弟用 + ， 选择下面所有兄弟用 ~ -->
        p + span{
            color: greenyellow;
        }      
<!--将 2号、3号span元素 的字体颜色改成 greenyellow-->
        p ~ span{
            color: greenyellow;
        }

伪类选择器

第一部分：伪类

<!--
伪类（不存在的类）描述一个元素的特殊状态
    比如：第一个子元素、被点击的元素、鼠标移动时所指示的元素
    伪类一般情况下都是使用冒号 ：开头
        :first-chil
        :last-child
        :nth-child() 选中第n个子元素
            特殊值：
                n 选中所有 0~n
                2n或even 选中偶数位
                2n+1或odd 选中奇数位
            -以上这些伪类都是根据所有的子元素进行排序

        :first-of-type
        :last-of-type
        :nth-of-type()
            -这几个伪类的功能和上述的类似，不同点是它们在同类型元素中进行排序
        类似于大家庭中子女的排序：大儿子、二闺女、三儿子、四闺女；
                     换个排序：大儿子、二儿子；大闺女、二闺女

        :not() 否定伪类
            -将符合条件的元素从选择器中去除
    -->    
    <style>
        ul > li:first-child{
     
            background: #bbffaa;
        }
        ul > li:nth-child(4){
     
            background: #3F3F3F;
        }      
        <!--
        ul > li:not(:nth-child(2)){
     
            background: orange;
        }  -->
    </style>
    
<body>
    <ul>     <!-- ul>li*5  按下tab键  自动生成 -->
        <li> 一 </li>
        <li> 二 </li>
        <li> 三 </li>
        <li> 四 </li>
        <li> 五 </li>
    </ul>
</body>

第二部分：伪元素

<!--
    伪元素：表示页面中一些特俗的并真实不存在的元素（特殊位置）
        伪元素使用 :: 开头

        ::first-letter  表示第一个字母
        ::first-line   表示第一行
        ::selection    表示被鼠标选中的内容
        ::before    元素的开始  行内元素
        ::after    元素的最后   行内元素
            before 和 after 必须结合content属性来使用
       -->
    <style>
        div::before{
     
            content: "无法被选中";
            color: red;
        }
        div::after{
     
            content: "无法被选中";
            background: orange;
        }
    </style>
    
<body>
    <div>
        Something just like this!
    </div>
</body>

超链接的伪类

<!--
    超链接的伪类：
            :link 表示没访问过的链接（正常的链接）
            :visited 表示访问过的链接
            :hover 表示鼠标移入的状态
            :active 表示鼠标点击
    -->
    <style>
        a:link{
     
            color: blue;
        }
        a:visited{
     
            color: red;
        }
        a:hover{
     
            font-size: 30px;
        }
    </style>
    
<body>
    <p> <a href="https://www.baidu.com/"> 百度首页 </a> </p>
    <p> <a href="https://www.qq.com/"> 腾讯首页 </a> </p>
    <p> <a href="https://www.game.163.com/"> 网易首页 </a> </p>
    <p> <a href="https://www.baidu.com/"> 百度首页被访问过，所以我变红了 </a> </p>

</body>

选择器的优先级

样式的冲突：
当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值，此时就发生了样式的冲突。

发生样式冲突时，应该用哪个样式由选择器的权重决定：

内连样式优先级 1000；如<h1 style="color: red; font-size: 66px">一号标题</h1>
id 选择器优先级 100
class 选择器优先级 10
元素选择器优先级 1
通配选择器优先级 0；如* { }选择所有元素
继承的样式没有优先级

特殊情况：

如果是两种相同优先级为同一个元素、同一个属性设置的话，优先选择代码位置靠后的样式；
交集选择器的优先级，所有优先级加起来运算，然后比较。交集指的是如div.className{}这类写法的选择器

可以在某个样式的后边添加 !important ,此时该样式获得最高优先级。慎用

样式的继承：

我们为一个元素设置的样式同时也会应用到它的后代元素
并不是所有的样式都会被继承，比如背景相关的、布局相关等这些样式都不会被继承

长度单位和颜色

长度单位：

像素 px
1. 屏幕（显示器）实际上是由一个一个的点构成的
2. 不同屏幕的像素大小是不同的，像素越小的屏幕显示的效果越清晰
百分比 %
1. 可以将属性值设置为相对于其父元素属性的百分比
2. 设置百分比可以使得子元素跟随父元素的改变而改变
em
1. em是相对于元素的字体大小来计算的
2. 1 em = 1 font-size
3. em会根据字体大小的改变而改变

颜色：

在CSS中可以直接使用颜色名来设置各种颜色
RGB （red

最低0.47元/天解锁文章

Z__legend

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS宝典（选择器、盒子模型、浮动、定位）

文章目录简介CSS 选择器元素选择器：id 选择器：class 选择器：复合选择器：关系选择器伪类选择器超链接的伪类选择器的优先级长度单位和颜色文本 text/font字体大小和字体类型行高文本的水平对齐和垂直对齐其它文本样式列表、表格和表单盒子边框和内外边距盒子的水平布局和垂直布局盒子的显示和隐藏盒子的尺寸轮廓、阴影和圆角浮动高度塌陷定位简介网页分三个部分：结构（HTML）表现（CSS）行为（JAVAScript）CSS 指层叠样式表 (Cascading Style Sheets)
复制链接

扫一扫