24 学习Q-q-u-n: 784783012
十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
这篇文章主要介绍了css组合选择器怎么使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇css组合选择器怎么使用文章都会有所收获,下面我们一起来看看吧。
专注于为中小企业提供成都网站制作、网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业南澳免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上1000+企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
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组合选择器怎么使用”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注创新互联行业资讯频道。