分享更有价值
被信任是一种快乐

css组合选择器怎么使用

文章页正文上

这篇文章主要介绍了css组合选择器怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇css组合选择器怎么使用文章都会有所收获,下面我们一起来看看吧。
  css基本选择器
  基本选择器又分为:通配符、标签选择器、class选择器、id选择器,在这里需要注意的编程思想在css层叠样式表中元素有且仅有一个id。注意以下几点1.id唯一性2.元素id不相同,就像每一个人只有一个身份证一样,ID就代表身份证3.class选择器不具有唯一性,它可以重复使用!此外这个通配符代表的是全局
  1

  2
  3
  4
  5
  6
  7

  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
  21
  22
  23
  24 学习Q-q-u-n: 784783012
  26
  27
  css组合选择器
  把基本选择器通过特殊符号串在一起有意见称之为css组合选择器,常见的css组合选择器有:分组选择器、嵌套选择器、子选择器、相邻同级别选择器
  1

  2
  3
  4免费云主机、域名
  5
  6
  7

  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
  32
  33
  34
  35 成功的花,人们只惊羡她现时的明艳!然而当初她的芽儿,浸透了奋斗的泪泉,洒遍了牺牲的血雨
  36 自以为懂得很多了经历很多了最后才知道都是那么的可笑
  37
  38 我们不要只看成功者荣誉的瞬间,更要看到成功者为之努力、为之奋斗的过程,从而激励自己也不断付出,奔着那个成功的目标前进.
  39 成功的花,人们只惊羡她现时的明艳!然而当初她的芽儿,浸透了奋斗的泪泉,洒遍了牺牲的血雨我们不要只看成功者荣誉的瞬间,更要看到成功者为之努力、为之奋斗的过程,从而激励自己也不断付出,奔着那个成功的目标前进.
  40
  41
  42
  43
  44
  45
  46
  css属性选择器
  基本选择器[属性]、基本选择器[属性=值]、 基本选择器[属性——=值]空格符隔开多个、 基本选择器[属性^=值]以什么开始、 基本选择器[属性$=值]以什么结束
  1

  2
  3
  4
  5
  6
  7

  8 div[title]/*基本选择器[属性]*/
  9 div[title=english]{
  10 color: blue;
  11 }/*基本选择器[属性=值]*/
  12 div[title——=en]{
  13 color:#f90;
  14 font-weight: bold;
  15 }/*基本选择器[属性——=值] 任意包含有属性中的一个*/
  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
  26
  27
  28
  29 If you can NOT explain it simply, you do NOT understand it well enough 30
  31
  32 你们没发现嘛?2013爱你一生,2014爱你一世,2015爱你一屋,2016爱你一路,2017爱你一切,2018爱你一半,2019爱你依旧,2020爱你爱你,2021爱你而已 33
  34
  35 css选择器四大类:基本、组合、属性、伪类 36
  37
  38 http://www.cnblogs.com/dhnblog/p/12293463.html 39
  40
  41
  css伪类选择器
  从字面意思来讲,伪就是假的,元素是标签与标签包裹的内容,简单来说伪元素就是假的元素,假的反义词是真的,在页面中这些又是我们自己写的,所以它是真的。在这个html页面中,所有元素都会被偷偷加上开始与结束标签,这个就是伪元素,伪类选择器指的是一种操作状态!
  1

  2
  3
  4
  5
  6
  7

  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
  33
  34
  35
  36
  37 情人节祝福语送女朋友,很甜很撩,瞬间收服她的心!
  38
  39
  40
  41 关于“css组合选择器怎么使用”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“css组合选择器怎么使用”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注云技术行业资讯频道。

相关推荐: es6如何删除数组中的相同元素

这篇文章主要介绍了es6如何删除数组中的相同元素的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇es6如免费云主机、域名何删除数组中的相同元素文章都会有所收获,下面我们一起来看看吧。 删除方法:1、利用Map对象和数组的filter…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册