css组合选择器怎么使用

发布时间:2022-03-14 13:47:56 作者:iii
来源:亿速云 阅读:169

这篇文章主要介绍了css组合选择器怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇css组合选择器怎么使用文章都会有所收获,下面我们一起来看看吧。

  css基本选择器

  基本选择器又分为:通配符、标签选择器、class选择器、id选择器,在这里需要注意的编程思想在css层叠样式表中元素有且仅有一个id。注意以下几点1.id唯一性2.元素id不相同,就像每一个人只有一个身份证一样,ID就代表身份证3.class选择器不具有唯一性,它可以重复使用!此外这个通配符代表的是全局

  1 <!DOCTYPE html>

  2 <html lang="en">

  3 <head>

  4     <meta charset="UTF-8">

  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">

  6     <title>css基本选择器</title>

  7     <style type="text/css">

  8         *{

  9             color: skyblue;

  10         }/**通配符*/

  11         div{

  12             color: red;

  13         }/*标签选择器*/

  14         .box{

  15             color: steelblue;

  16         }/*class选择器*/.box{color: steelblue;}也可以写成*.box{color: steelblue;}代表的所有的box字体颜色为 steelblue 17         #content{

  18             color: tomato;

  19         }/*id选择器*/

  20     </style>

  21 </head>

  22 <body>

  23     <div class="box" id="content">

  24 学习Q-q-u-n: 784783012      </div>

  26 </body>

  27 </html>

  css组合选择器

  把基本选择器通过特殊符号串在一起有意见称之为css组合选择器,常见的css组合选择器有:分组选择器、嵌套选择器、子选择器、相邻同级别选择器

  1 <!DOCTYPE html>

  2 <html lang="en">

  3 <head>

  4     <meta charset="UTF-8">

  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">

  6     <title>css组合选择器</title>

  7     <style type="text/css">

  8     /* div{ 9 color: teal; 10 font-size: 24px; 11 } 12 p{ 13 color: teal; 14 } */

  15     div{

  16         font-size: 24px;

  17     }

  18     div,p{

  19         color: teal;

  20     }/*分组选择器*/

  21     div p{

  22         color: red;

  23     }/*嵌套选择器*/

  24     ul>li{

  25         font-size: 24px;

  26         list-style: square;

  27     }/*子选择器*/

  28     div+p{

  29         color: blue;

  30     }/*相邻同级别选择器*/

  31     </style>

  32 </head>

  33 <body>

  34     <div>

  35 成功的花,人们只惊羡她现时的明艳!然而当初她的芽儿,浸透了奋斗的泪泉,洒遍了牺牲的血雨

  36         <p>自以为懂得很多了经历很多了最后才知道都是那么的可笑</p>

  37     </div>

  38     <p>我们不要只看成功者荣誉的瞬间,更要看到成功者为之努力、为之奋斗的过程,从而激励自己也不断付出,奔着那个成功的目标前进.</p>

  39     <p>成功的花,人们只惊羡她现时的明艳!然而当初她的芽儿,浸透了奋斗的泪泉,洒遍了牺牲的血雨<span>我们不要只看成功者荣誉的瞬间,更要看到成功者为之努力、为之奋斗的过程,从而激励自己也不断付出,奔着那个成功的目标前进.</span></p>

  40     <ul>

  41         <li>1</li>

  42         <li>2</li>

  43         <li>3</li>

  44     </ul>

  45 </body>

  46 </html>

  css属性选择器

  基本选择器[属性]、基本选择器[属性=值]、 基本选择器[属性&mdash;&mdash;=值]空格符隔开多个、 基本选择器[属性^=值]以什么开始、 基本选择器[属性$=值]以什么结束

  1 <!DOCTYPE html>

  2 <html lang="en">

  3 <head>

  4     <meta charset="UTF-8">

  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">

  6     <title>css属性选择器</title>

  7     <style type="text/css">

  8     div[title]/*基本选择器[属性]*/

  9     div[title=english]{

  10         color: blue;

  11     }/*基本选择器[属性=值]*/

  12     div[title&mdash;&mdash;=en]{

  13         color:#f90;

  14         font-weight: bold;

  15     }/*基本选择器[属性&mdash;&mdash;=值] 任意包含有属性中的一个*/

  16     p,div[title^=zh]{

  17         font-size:24px;

  18         color: brown;

  19     }/*基本选择器[属性^=值]以什么开始*/

  20     div[title$=china]{

  21         letter-spacing: 10px;

  22         text-decoration: line-through;

  23         font-style: italic;

  24     }/*基本选择器[属性$=值]以什么结束*/

  25     </style>

  26 </head>

  27 <body>

  28     <div title="english">

  29 If you can NOT explain it simply, you do NOT understand it well enough 30     </div>

  31     <div title="english en yingyu">

  32 你们没发现嘛?2013爱你一生,2014爱你一世,2015爱你一屋,2016爱你一路,2017爱你一切,2018爱你一半,2019爱你依旧,2020爱你爱你,2021爱你而已  33     </div>

  34     <p title="zh en">

  35 css选择器四大类:基本、组合、属性、伪类 36     </p>

  37     <div title="zh en china">

  38 http://www.cnblogs.com/dhnblog/p/12293463.html 39     </div>

  40 </body>

  41 </html>

  css伪类选择器

  从字面意思来讲,伪就是假的,元素是标签与标签包裹的内容,简单来说伪元素就是假的元素,假的反义词是真的,在页面中这些又是我们自己写的,所以它是真的。在这个html页面中,所有元素都会被偷偷加上开始与结束标签,这个就是伪元素,伪类选择器指的是一种操作状态!

  1 <!DOCTYPE html>

  2 <html lang="en">

  3 <head>

  4     <meta charset="UTF-8">

  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">

  6     <title>css伪类选择器</title>

  7     <style type="text/css">

  8         p{

  9             color: brown;

  10             border: 1px solid black;

  11             height: 40px;

  12             line-height: 40px;

  13         }

  14         p::before{

  15             content: "before开始";

  16         }

  17         p::after{

  18             content: "after结束";

  19         }

  20         /* 针对块元素 21 第一个字母::first-letter 22 第一行文字::first-line */

  23         div::first-letter{

  24         font-size: 24px;

  25         color: blue;

  26         }

  27         div::first-line{

  28             color: yellowgreen;

  29             font-style: initial;

  30             font-weight:bolder;

  31         }

  32     </style>

  33 </head>

  34 <body>

  35     <div class="box">

  36     <!--before 开始-->

  37     <p>情人节祝福语送女朋友,很甜很撩,瞬间收服她的心!</p>

  38     <!--after 结束-->

  39     </div>

  40 </body>

  41 </html>

关于“css组合选择器怎么使用”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“css组合选择器怎么使用”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. CSS 3 组合选择器
  2. 怎么使用css选择器

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css

上一篇:CSS聊天气泡效果怎么实现

下一篇:怎么去打造微信小程序的爆款

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》