CSS3选择器及属性概括

最新推荐文章于 2024-07-15 16:30:05 发布

轩尼诗道-

最新推荐文章于 2024-07-15 16:30:05 发布

阅读量143

点赞数 1

分类专栏： CSS3知识点文章标签： css3

本文链接：https://blog.csdn.net/lzy________/article/details/116333772

版权

CSS3知识点专栏收录该内容

2 篇文章 0 订阅

订阅专栏

常用选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css选择器</title>
    <style>
        常用选择器：
        #abc{
            color: aqua;  /*字体颜色*/
            letter-spacing: 10px; /*字体间距*/
            text-indent: 10px; /*文本缩进*/
            text-align: center; /*文本对齐*/
            font-size: 10px; /*字体大小*/
            font-family:'Times New Roman', Times, serif; /*字体字形*/
            font-weight: bold; /*字体加粗*/
            font-style: italic; /*斜体字*/
            line-height: 30px; /*行高*/
            text-decoration: underline; /*文本装饰，下划线:underline*/
            outline: aqua 5px dashed; /*外轮廓*/
            border: dashed red 2px; /*表格边框*/
            cursor: crosshair; /*鼠标样式*/
        }
        .blue{
            color: blue;
        }
        .size{
            font-size: 20px;
        }
        复合选择器：
        b.blue{
            font-size: 20px;
        } /*交集选择器*/
        h1,span{
            color: green;
        }/*并集选择器*/
        /* *{}可以选中所有h1,span */
        关系选择器：
        div > span{
            color:salmon;
        }/*子元素选择器，选择比div小一级的span元素*/
        div span{
            color: silver;
        }/*后代选择器，选择div里的所有span元素*/
        p + span{
            color:coral;
        }/*选择p后面紧挨的那个span元素*/
        p ~ span{
            color: cornsilk;
        }/* 选择p后面所有的span元素*/
        属性选择器：
        p[class]{
            color: aqua;
        }
        /* [属性名]选择含有指定属性的元素 */
        p[class=12]{
            color: aqua;
        }
        /* [属性名=属性值]选择含有属性和属性值的元素 */
        p[class^=12]{
            color: aqua;
        }
        /* [属性名^=属性值]选择以12属性值开头的元素 */
        p[class$=34]{
            color: aqua;
        }
        /* [属性名$=属性值]选择以34属性值结尾的元素 */
        p[class*=34]{
            color: #00ffff;
        }
         /* [属性名*=属性值]选择属性值有34属性的元素 */
        伪类选择器：
         ul>li:first-child{
             color: aqua;
         }
         /* :first-child--第一个子元素，:last-child--最后一个子元素，
         :nth-child()--选中第n个子元素，odd选中奇数，even选中偶数 */    
        a:link{
            color: azure;
        }
        /* link表示正常的链接 给超链接设置属性*/
        a:visited{
            color: red;
        }
        /* :visited用来表示访问过的链接，由于隐私原因visited这个伪类只能修改链接的颜色 只适用于超链接*/
        a:hover{
            font-size: 30px;
        }
        /* :hover用来表示鼠标移入的状态 */
        a:active{
            color: royalblue;
        }
        /* 表示鼠标正在点击的状态 */
        伪元素选择器：
        :root{
            background-color: aqua;

            /* 设置整个网页的样式 */
        }
         p::first-letter{
             font-size: 50px;
         }
         /* 表示第一个字母 */
        p::first-line{
             background-color: salmon;
         }
         /* ::first-line 表示第一行 */
        p::selection{
            color: rgb(7, 7, 7);
        }
        /* ::selection 表示选中的内容 */
        p::before{
            content: '开始';
            color: slateblue;
        }
        p::after{
            content: '结束';
            color: tan;
        }
        /* 元素的开始和结束位置；必须结合content使用，开始和结束显示content中的内容；
        并且无法用鼠标选中 */
        样式的继承：
        p{
            color: bisque;
        }
        /* 为一个元素设置的样式也会应用到他的后代元素上，并不是所有的样式都会被继承，比如布局 背景等，38讲 */
        选择器的权重：
        div{
            color:blanchedalmond;
        }
        .red{  
             color: brown;
         }
           /* 样式冲突，通过不同的选择器选中相同的元素，并且为相同的样式设置不同的值时，
           此时发生样式的冲突，应用哪个样式由选择器的权重（优先级）决定，
           权重：
            内联样式            1,0,0,0
            id选择器            0,1,0,0
            类和伪类选择器       0,0,1,0
            元素选择器           0,0,0,1
            通配选择器（*）      0,0,0,0
            继承选择器           没有优先级
           比较优先级时需要将优先级相加计算，分组选择器单独计算,(一般选择器越具体优先级越高)
           如果优先级计算后相等，则优先使用靠下的
           可以在某一个样式后面加一个（！important）就可以获取到最高的优先级，（开发中这个要慎用！）
            39讲 */
            .box1{
                width: 200px;
                height: 200px;
                background-color: aqua;
            }
            /* 不同的屏幕像素大小不同 */
            .box2{
                width: 50%;
                height: 50%;
                background-color: beige;
            }
            /*百分比可以将属性值设置为相对于父元素属性的百分比
            并且跟随父元素的改变而改变
             40讲*/
            .box3{
                width: 10em;
                height: 10em;
                background-color: blanchedalmond;
            }
            /* em是相对于字体大小来计算的，1em = 1fint-size =10个像素，
            rem相对于根元素（html）来计算大小
             41讲*/
            .box4{
                background-color: rgb(230, 61, 201);
            }
            /* css中可以用颜色名直接设置，但是很不方便，
            RGB值：
                 RGB通过三种颜色的不同浓度来调配出不同的颜色
                 R red,G green,B blue 
                 每一种颜色在0-255之间（0&-100%）
                 语法：RGB（红色,绿色,蓝色）*/
            /* RGBA:
                RGB的基础上增加了一个A表示不透明度（红色,绿色,蓝色，A）
                1表示完全不透明，0表示完全透明，0.5半透明 */
            /* 十六进制的RGB值：
                语法：#红色绿色蓝色
                颜色浓度通过 ff0000
                如果颜色两位两位重复可以进行简写
                  如#aabbcc=#abc 
                42讲*/
            .box4{
                background-color: hsl(hue, saturation, lightness);
            }
             /* HSL值（工业设计用的多）H：色相(0-360) S：饱和度(0%-100%) L：亮度(0%-100%) 43讲 */

             /* 网页是一个多层结构，一层层叠起来，通过css分别设置每一层的样式，用户只能看到最顶上一层，
             最底下的一层称为文档流，是网页的基础，我们创建的元素默认在文档流中排列
             元素只有两种状态：在文档流中，不在文档流中。
             元素在文档流的特点：
              块元素<div>：会在页面中独占一行，默认宽度是父元素的全部，默认高度会被内容撑开 
              行内元素<span>：行内元素不会独占页面的一行，如果一行不能容纳所有则自动跳到第二行，默认高度和内容被内容撑开 44讲*/
            
    </style>
</head>
<body>   
</body>
</html>

轩尼诗道-

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS3选择器及属性概括

常用选择器：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css选择器</title> <style> 常用选择器：
复制链接

扫一扫