CSS引用以及CSS选择器

最新推荐文章于 2023-10-20 10:57:08 发布
最新推荐文章于 2023-10-20 10:57:08 发布
阅读量464 收藏
点赞数
分类专栏： CSS 文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52142992/article/details/126398612
版权

（一）CSS的引用

（1）引用样式

1、外部样式

新建一个外部的css

<link rel="stylesheet" href="外部样式.css">
2、内部样式

就是写在head标签里的样式

	<style>
        div{
            color: red;
        }
    </style>
3、内联样式

写在标签里面的

<div style="color: red;">Hello World!</div>
4、css样式原则

就近原则：内联>内部>外部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>就近原则： 内联>内部>外部样式</title>
    <!-- 外部样式 -->
    <link rel="stylesheet" href="外部样式.css">
    <!-- 内部样式 -->
    <style>
        div{
            color: red;
        }
    </style>
</head>
<body>
    <div style="color: red;">Hello World!</div>
</body>
</html>

(二）CSS选择器

（1）常用选择器

1、通配符选择器

通配符：*（应用到页面上的所有元素上）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通配符选择器</title>
    <style>
        *{
            margin: 0;  /*外边距 */
            padding: 0;  /*内边距 */
            line-height: 1; /*行高 */
        }
    </style>
</head>
<body>

</body>
</html>
2、元素选择器

以标签名作为选择器的名字，样式作用于该标签上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素选择器</title>
    <style>
        div{
            color: blueviolet;
        }
        p{
            border: 1px solid red;
        }
        span{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div>Hello World!</div>
    <p>Hello World!</p>
    <span>Hello World!</span>
</body>
</html>
3、id选择器

给某个标签一个id，则该id值可用来设置样式，以#号开头，但每个id都是唯一的，一个网页中不能出现重复的id。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>id选择器</title>
    <style>
        #one{
            color: aqua;
            background-color: orangered;
        }
    </style>
</head>
<body>
    <div id="one">Hello World!</div>
</body>
</html>
4、class选择器

以英文句号开头，该选择器应用最为广泛。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类选择器</title>
    <style>
        .f30{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div class="f30">Hello World!</div>
</body>
</html>
5、并集选择器

并，顾名思义，并且的意思，所以是指合集，选择器中间没有任何符号和间隔。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 把div选中，改变字体颜色 */
        div.div1{
            color: aqua;
        }
        /* 选择元素名称为div并且class="div2"的元素 */
        div.div2{
            color: blueviolet;
        }
    </style>
</head>
<body>
    <div class="div1">twobyetwo</div>
    <p class="div4">onebyeone</p>
    <div class="div2">fourbyefour</div>
    <div class="div2">threebyethree</div>
</body>
</html>
6、群组选择器

选择器之间用逗号隔开。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>群组选择器</title>
    <style>
        div,p,span{
            border: 1px solid palegreen;
        }
    </style>
</head>
<body>
    <div>Hello World!</div>
    <p>Hello World!</p>
    <span>Hello World!</span>
</body>
</html>
7、后代选择器

这也是使用最为广泛的一种，选择器之间使用空格隔开。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后代选择器</title>
    <style>
        ul li{
            color: red;
        }
        /* 
            .list .item{
                color: red;
            }
        */
    </style>
</head>
<body>
    <ul class="list">
        <li class="item">Hello World!</li>
        <li class="item">Hello World!</li>
        <li class="item">Hello World!</li>
        <li class="item">Hello World!</li>
        <li class="item">Hello World!</li>
    </ul>
</body>
</html>
8、子代选择器

中间用>隔开，且应用与父元素与子元素之间，也就是上下级的关系，同级不行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 给class="box"的元素的儿子代元素为div的元素添加边框 */
        .box>div{
            color: blueviolet;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>
          xxxxx
          <div>yyyyy</div>
        </div>
        <p>ppppp</p>
      </div>
      <!--vs code里面的快捷操作方法： -->
      <!-- 添加一个ul(class为list),含五个li(class为item) -->
      <!-- 使用emmet语法添加子代元素:ul.list>li.item{xxx}*5 -->
      <ul class="list">
        <li class="item">xxx</li>
        <li class="item">xxx</li>
        <li class="item">xxx</li>
        <li class="item">xxx</li>
        <li class="item">xxx</li>
      </ul>
</body>
</html>
9、相邻的下一个兄弟选择器

中间+隔开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 给p标签的下一个为span的兄弟元素设为字体红色 */
        .pp+span{
            color: red;
        }
         /* 没有效果, 必须是相邻,且不包括它本身 */
         .pp+i{
            color: aqua;
         }
         /* 给所有的li元素添加上边框(第一个除外) */
         li+li{
            border-top: 1px solid red;
         }
         .item+.item{
            color: cyan;
         }
    </style>
</head>
<body>
    <div class="box">
        <div class="div">div标签</div>
        <p class="pp">p标签</p>
        <span class="span">span标签</span>
        <i>i标签</i>
    </div>
    <ul>
        <li class="item">xxx</li>
        <li class="item">xxx</li>
        <li class="item">xxx</li>
        <li class="item">xxx</li>
        <li class="item">xxx</li>
      </ul>
</body>
</html>
10、伪类选择器
  • :nth-child(n)、first-child(第一个)、last-child(最后一个)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>伪类选择器</title>
    <style>
        .list .item:nth-child(1){
            border: 1px solid red;
        }
        .list .item:nth-child(2){
            font-size: 30px;
        }
        /* 奇数 */
        .list3 .item3:nth-child(odd){
            color: blue;
        }
        /* 偶数 */
        .list3 .item3:nth-child(even){
            color: green;
        }

        /* :nth-child(xn+y)：n的取值从0开始 */
        /* 将1,4,7,10...的例设置为字体红色 */
        .list1 .item1:nth-child(3n+1){
            color: red;
        }
        /* 将3,6,9,12...设置为绿色 */
        .list1 .item1:nth-child(3n+3){
            color: green;
        }

        /* first-child和last-child */
        /* 将第一个设为字体红色 */
        .list2 .item2:first-child{
            color: red;
        }
        /* 将最后一个设为字体绿色 */
        .list2 .item2:last-child{
            color: green;
        }
    </style>
</head>
<body>
    <!-- nth-child(n) -->
    <ul class="list">
        <li class="item">Hello World!</li>
        <li class="item">Hello World!</li>
        <li class="item">Hello World!</li>
        <li class="item">Hello World!</li>
        <li class="item">Hello World!</li>
    </ul>

    <!-- 奇数偶数 -->
    <ol class="list3">
        <li class="item3">Hello World!</li>
        <li class="item3">Hello World!</li>
        <li class="item3">Hello World!</li>
        <li class="item3">Hello World!</li>
        <li class="item3">Hello World!</li>
    </ol>

    <!-- :nth-child(xn+y)：n的取值从0开始 -->
    <ul class="list1">
        <li class="item1">xxxxx</li>
        <li class="item1">xxxxx</li>
        <li class="item1">xxxxx</li>
        <li class="item1">xxxxx</li>
        <li class="item1">xxxxx</li>
        <li class="item1">xxxxx</li>
        <li class="item1">xxxxx</li>
        <li class="item1">xxxxx</li>
        <li class="item1">xxxxx</li>
        <li class="item1">xxxxx</li>
        <li class="item1">xxxxx</li>
        <li class="item1">xxxxx</li>
        <li class="item1">xxxxx</li>
        <li class="item1">xxxxx</li>
        <li class="item1">xxxxx</li>
        <li class="item1">xxxxx</li>
        <li class="item1">xxxxx</li>
        <li class="item1">xxxxx</li>
        <li class="item1">xxxxx</li>
        <li class="item1">xxxxx</li>
    </ul>

    <!-- first-child和last-child -->
    <ol class="list2">
        <li class="item2">yyyyy</li>
        <li class="item2">yyyyy</li>
        <li class="item2">yyyyy</li>
        <li class="item2">yyyyy</li>
        <li class="item2">yyyyy</li>
    </ol>
</body>
</html>
  • :before和:after
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .aa{
            border: 1px solid red;
        }
        .b1{
            border: 1px solid green;
        }

        /* 利用伪类实现购物车元素上的定位效果 */
        .b2{
            width: 50px;
            height: 50px;
            position: relative;
            border: 1px solid blueviolet;
        }
        .b2::after{
            position: absolute;
            content: '6';
            background-color: red;
            color: #fff;
            width: 20px;
            height: 20px;
            text-align: center;
            border-radius: 50%;
            top: -10px;
            right: -10px;
        }

        /* 在aa里面创建两个元素，一个放在最前面，一个放在最后面 */
        .aa:before{
            content: 'three';
        }
        .aa:after{
            content: 'four';
        }
        
        /* b1本身为行内元素，所以添加的元素也会出现在一行 */
        .b1:before{
            /* 此处为行内元素，把它变成块级元素，可以加一个display:block; */
            content: '111111';
            /* display:block; */
            color: blue;
        }
        .b1:after{
            content: '222222';
            color: blueviolet;
        }
    </style>
</head>
<body>
    <div class="aa">
        <p class="b1">one</p>
        <p class="b2">two</p>
    </div>
</body>
</html>
  • 链接相关的伪类：:link、:visited、:hover、:active
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 未访问的链接 */
        a:link{
            color: blueviolet;
        }
        /* 已访问的链接 */
        a:visited{
            color: #999;
        }
        /* 鼠标移动到元素上 */
        a:hover{
            background-color: red;
            color: #fff;
        }
        /* 元素被点击时的颜色设置，没松手之前看到的样式 */
        a:active{
            color: blue;
        }
    </style>
</head>
<body>
    <a href="http://www.baidu.com" target="_blank">百度</a>
    <a href="http://www.sina.com" target="_blank">新浪</a>
    <a href="http://zk.huruqing.cn" target="_blank">博客</a> 
</body>
</html>

（2）新增-选择器

1、:slection：选中
<!DOCTYPE html>
<html lang="en">

<head>

  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge"xxxxxxxx>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
   /* 选中的文字变黄色 */
   p::selection{
    color: yellow;
    background-color: black;
   }
  </style>
</head>

<body>
   <p>xxxxxxxx</p>
   <p>xxxxxxxx</p>
   <p>xxxxxxxx</p> 
</body>

</html>
2、属性选择器
  • E[att] 选择具有att属性的E元素
  • E[att=“val”] 选择具有att属性且属性值等于val的E元素
  • E[att^=“val”] 匹配具有att属性且值以val开头的E元素
  • E[att$=“val”] 匹配具有att属性且值以val结尾的E元素
  • E[att*=“val”] 匹配具有att属性且值中含有val的E元素
    E为元素；att为元素属性；val为基于元素属性值的条件，它可加引号，也可以不加
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>css3新增属性选择器</title>
    <style>
      /*1. E[att] 选择具有att属性的E元素 */
      /* 选择属性含有value属性的元素 */
      input[value]{
        border: 1px solid red;
      }
 
      /* 2.E[att="val"] 选择具有att属性且属性值等于val的E元素 */
      /* 只选择type=text 文本框的input 选取出来 */
      input[type=text]{
        color: blue;
      }
 
      /* 3.E[att^="val"]   匹配具有att属性且值以val开头的E元素 */
      /* 选择首先是div 然后 具有class属性  并且属性值 必须是icon开头的这些元素 */
      div[class^=icon]{
        color: aqua;
      }
 
      /* 4.E[att$="val"]  匹配具有att属性且值以val结尾的E元素 */
      /* 选择有clss, 且以data结尾的元素 */
      *[class$=data]{
        color: blueviolet;
      }

      /* 5.E[att*="val"] 匹配具有att属性且值中含有val的E元素 */
      /* 选择所有class包含e的li元素 */
      li[class*=e]{
        color: orange;
      }

    </style>
  </head>
  <body>
    <input type="text" value="请输入查询条件" />
    <input type="text" />
  
    <input type="text" name="" id="" />
    <input type="password" name="" id="" />
  
    <div class="icon1">小图标1</div>
    <div class="icon2">小图标2</div>
    <div class="icon3">小图标3</div>
    <div class="icon4">小图标4</div>
    <div>我是打酱油的</div>
 
    <section class="icon1-data">我是安其拉</section>
    <section class="icon2-data">我是妲己</section>
    <section class="icon3-ico">我是甄姬</section>
  
    <div>
      <ul>
        <li class="icon1-data">1</li>
        <li class="icon1-time">2</li>
        <li class="icon1-week">3</li>
        <li class="icon1-mnth">4</li>
      </ul>
    </div>
  </body>
</html>
3、兄弟选择器
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 选择.box元素所有的p元素兄弟 */
    .box~p{
        color: orchid;
    }

    /* 选择.box元素的兄弟标签a标签 */
    .box~a{
        color: brown;
    }

  </style>
</head>

<body>
  <div class="box">divvvvvvvvv</div>
  <p>pppppppppppppp</p>
  <a href="#">xxxxx</a>
  <span>spannnnnn</span>
  <p>pppppppppppppp</p>
</body>

</html>
4、:checked：已选中的
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 已被选择的输入框的下一个span元素设置为字体红色 */
    input:checked+span{
        color: red;
    }

    /* 这个会选中下面所有的span */
    /* input:checked~span{
        color: red;
    } */
  </style>
</head>

<body>
  <span>选项1</span><input type="checkbox">
  <span>选项2</span><input checked type="checkbox">
  <span>选项3</span><input type="checkbox">
  <span>1234</span>
  <span>5678</span>
</body>

</html>

（3）、选择器优先级

1、!important > id选择器 > class选择器 > 元素选择器 > 通配符(*)选择器
  • !important最优先:非必要不使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <style>
        /* 或.one .two也一样 */
        .two .three{
            color: aqua;
        }
        .one .two .three{
            color: blueviolet;
        }
        .three{
            color: red!important;
        }
    </style>
</head>
<body>
    <div class="one">
        <p class="two">
            <span class="three">Hello World!</span>
        </p>
    </div>
</body>
</html>
  • id选择器 > class选择器 > 元素选择器 > 通配符(*)选择器
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>id>class>元素>通配符</title>
    <style>
        #one{
            color: red;
        }
        .two{
            color: blue;
        }
        div{
            color: green;
        }
    </style>
</head>
<body>
    <div id="one" class="two">Hello World!</div>
</body>
</html>
2、样式层叠

代码运行是从上到下的，所以后面的样式会覆盖前面的样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>样式层叠</title>
    <style>
        .one{
            font-size: 30px;
        }
        .two{
            color: cyan;
        }
        .three{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="one two three">Hello World!</div>
</body>
</html>
3、继承来的优先级最低
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .list{
            color: red;
        }
         
        li {
          color: green;  
        }
    </style>
</head>
<body>
    <ul class="list">
        <li class="item">xxx</li>
        <li class="item">xxx</li>
        <li class="item">xxx</li>
    </ul>
</body>
</html>
4、优先级越长越越优先
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器越长越优先</title>
    <style>
        .one .two .three{
            color: cyan;
        }
        .one .two{
            color: purple;
        }
    </style>
</head>
<body>
    <div class="one">
        <p class="two">
            <span class="three">Hello World!</span>
        </p>
    </div>
</body>
</html>
5、都是class选择器的优先级比较
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .list .item{
            color: red;
        }
        .list .item{
            color: green;
        }
    </style>
</head>
<body>
    <ul class="list">
        <li class="item">xxx</li>
        <li class="item">xxx</li>
        <li class="item">xxx</li>
    </ul>
</body>
</html>
咩Kakao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3 选择器 基本选择器介绍
12-13
那么从现在开始我们先丢开他们版本的区别，从头一起来看看CSS选择器的运用。 CSS是一种用于屏幕上渲染html，xml等一种语言，CSS主要是在相应的元素中应用样式，来渲染相对应用的元素，那么这样我们选择相应的元素就很重要了，如何选择对应的元素，此时就需要我们所说的选择器。选择器主要是用来确定html的树形结构中的DOM元素节点。我把CSS选择器分开成三部分，第一部分是我们常用的部分，我把他叫做基本选择器；第二部分我把他称作是属性选择器，第三部分我把他称作伪类选择器，这一部分也是最难理解和掌握的部分，今天我们先来看第一部分——基本选择器。我们先来看一个常用的选择器列表图 下面我们先看看上
JSoup CSS选择器用法大全
08-15
备查，搞爬虫开发者必备
如何在一个CSS文件中引入其他CSS文件
青春木鱼的博客
10-20 986
@import 规则可以在一个CSS文件中引用另一个CSS文件
CSS引入方式（外部样式表、内部样式表、行内样式表）；CSS选择器
qq_61657066的博客
03-20 1325
行内（内联）样式：在标签的开始标签里面添加style属性，属性值中添加css样式代码 2.内部样式表 3.外部选择器：先创建一个后缀名为.css的文件，在里面通过选择器书写css代码，再在head标签通过link标签引入css文件。4.CSS选择器标签选择器、类选择器、id选择器 （1）标签选择器 通过标签名找到指定标签
css预编译语言 sass scss（变量$var, css嵌套规则，@import规则，@extend，@mixin）
浩星
12-07 3282
什么是sass Sass 是对 CSS 的扩展，让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、 mixins、导入等众多功能， 并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好， 同时也让你能够快速开始小型项目， 特别是在搭配 Compass 样式库一同使用时 【特点】 完全兼容 CSS3 在 CSS 语言的基础上增加变量(variables)、嵌套 (nesting)、混合 (mixins) 等功能 通过函数进行颜色值与属性值的运算 提供控制指令等高级功能
scss的基本用法
apqm78637的博客
09-07 2539
scss的基本用法 一、使用变量 　　sass 让人们受益的一个重要特性就是为 CSS 引入了变量。你可以把反复使用的 CSS 属性值 定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。或者，对于仅使用过一 次的属性值，你可以赋予其一个易懂的变量名，...
CSS 选择器及各样式引用方式
weixin_34408717的博客
07-19 455
　　Css ：层叠样式表 (Cascading Style Sheets),定义了如何显示HTML元素。 目录 1. 选择器的分类：介绍ID、class、元素名称、符合、层次、伪类、属性选择器。 2. 样式调用方式：介绍外部、内部、内联等调用方式。 3. 样式的优先级：介绍调用样式的优先级。   1. 选择器的分类 语法结构   1.1 Id选择器 1.1.1 格式 　　...
css使用变量
qq_41340792的博客
10-29 263
background:url("#{$theme}路径")//$theme 公共前缀
CSS
jiangxt211的专栏
01-31 282
Title of the document input.btnStyle { text-align:center; height: 30px; width: 30px; font-size: 14px; border-style: solid; } .center { margin:auto; width:70%; } yuiyiuyiuyiheolorl
在css文件引入其他css,在一个css文件中引入其他css文件
weixin_36031047的博客
08-04 427
移动端 touch 事件的originalEvent对于移动端的触摸事件,我们通过touchstart.touchmove.touchend实现,PC端一般使用mousedown.mousemove.mouseup实现. 我们获取事件坐标,原生js获取 ...SaveData FunctionsHere are some save function for some situations: Yes...
CSS样式的引用方式
Battles2的博客
09-19 5102
想只用CSS修饰网页，就需要在HTML文档中引入CSS。CSS提供了4种引用方式，分别是行内式、内嵌式、外链式和导入式。.
十种CSS选择器详解介绍
01-31
1. 通用选择器 2. 标签选择器 3. ID 选择器 4. 类选择器 5. 后代选择器 6. 子选择器 8. 通用兄弟选择器 9. 分组选择器 10. 属性选择器 基础选择器总结
CSS 选择器支持列表
09-25
evotech网站整理的CSS选择器支持列表.
CSS选择器实现字段解析
01-21
但是我不想要这种标签该咋办，这时候就要使用CSS选择器中的伪类方法。如下所示。 注意的是两个冒号。使用CSS选择器真的很方便。同理我用CSS实现字段解析。代码如下 # -*- coding: utf-8 -*- import scrapy import ...
【ElementUI】通过改变SCSS变量修改ElementUI样式
热门推荐
csdn_vplus的博客
03-14 1万+
目录 一、创建覆盖ElementUI样式的文件 二、在项目入口文件中引入上记文件 三、覆盖ElementUI的样式变量 四、如何修改变量以外的样式 五、既然可以直接修改样式，为什么还要覆盖变量 大家好 在Element官网中，提供了四种方法来对样式进行自定义： 主题编辑器 仅替换主题色 在项目中改变SCSS变量 命令行主题工具 本文将按照官网的描述，介绍如何在使用了SCSS的项目中，通过改变SCSS变量修改ElementUI样式，并在此基础上给出示例和补充。 ...
Scss使用（css预处理器）
qq_45256497的博客
06-19 346
scss的用法
css通过全局设置类名自定义控制样式
m0_52009348的博客
10-12 780
css通过全局设置类名自定义控制样式
CSS嵌套选择器
wychh85的博客
01-12 3247
2.3 嵌套选择器 在某个选择器内部再设置选择器，通过空格隔开 只有满足层次关系最里层的选择器所对应的标签才会应用样式 注意：使用空格时不区分父子还是后代，使用CSS3中新增的>时必须是父子关系才行 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*...
CSS选择器
一无是处的博客
03-17 334
CSS选择器的说明
css3选择器-属性选择器
最新发布
04-20
CSS3选择器-属性选择器是一种用于选择具有特定属性或属性值的HTML元素的CSS选择器。它可以根据元素的属性来选择元素，从而实现对元素的样式控制。 CSS3属性选择器有以下几种类型： 1. [attribute]：选择具有指定...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值