码迷,mamicode.com
首页 > Web开发 > 详细

css选择器

时间:2017-10-15 18:01:54      阅读:198      评论:0      收藏:0      [点我收藏+]

标签:属性   box   css   结束   visit   大小写   区分大小写   hold   cal   

一、类选择器:

1.点号开始

2.包含字母、数字、连字符、下划线

3.点后面必须是字母开始

4.区分大小写

5.一个类选择器可以应用到多个标签

 

二、伪类选择器:

元素名称-伪类名称:

a:link(未访问)

a:visited(已访问)

a:hover(鼠标悬停)

a:active(点击时)

 

三、后代选择器:(可越级)

父级元素名称+空格+子级元素名称{声明块}

 

四、子级选择器:(不可越级)

父级元素名称+“>”+子级元素名称{声明块}

 

五、属性选择器:input type=“text”

格式一:元素名称[属性名称+属性值]{声明块}

             input[type=“text”]{color:red;} 【设置input属性值为text的样式】

input::-webkit-input-placeholder{color:green;}【设置placeholder提示信息的样式】

 

格式二:选择以属性值开始的标签

元素名称[属性名称+“^=”+属性值]{声明块}

input[name^=“si”]{color:green;}

 

格式三:选择以属性值结束的标签

元素名称[属性名称+“$=”+属性值]{声明块}

input[name$=“chuan”]{color:green;}

 

格式四:选择包含属性值的标签

元素名称[属性名称+“*=”+属性值]{声明块}

input[name*=“chuan”]{color:green;}

 

格式五:选择box4里类型为p的第三个p元素

. box4 p:nth-of-type(3){color:red;}

 

六、css两个核心概念:

1.继承:(1)是应用在某个标签/元素上的css属性传递给了内部嵌套的标签

            (2)通常来说文本类的会被继承(字体、字号、颜色)

            (3)chrome里面是灰色的表示没继承

2.层叠:(1)继承

            (2)一个标签可能有一个或多个样式的来源,当属性发生冲突时,按照加载顺序和权重大小决定

            (3)对比权重:样式不冲突:同时作用      

                                      样式冲突:对比权重①权重相同,后覆盖前

                                                                ②权重不同,权重大的生效

 

七、

1.border:1px solid red;边框

2.font-size:20px;字体大小,字号

3.font-family:Algerian;字体类型

4.font-weight:400;加粗

5.text-align:center;水平居中

6.text-indent:2px;

7.text-decoration:none;下划线

8.line-height:20px;行高

9.vertical-align:middle;垂直居中

10.text-shadow:-11px -11px 2px red;字体阴影

11.letter-spacing:10px;字间距

12.word-spacing:10px;词间距

13.font-weight:500;字体加粗

14.font-variant  字体大小写

css选择器

标签:属性   box   css   结束   visit   大小写   区分大小写   hold   cal   

原文地址:http://www.cnblogs.com/aswd/p/7671305.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!