《CSS选择符的分类及用法.docx》由会员分享，可在线阅读，更多相关《CSS选择符的分类及用法.docx（8页珍藏版）》请在三一办公上搜索。
1、CSS选择符的分类及用法CSS选择符 前言 CSS：是Cascading Style Sheet的缩写，译作，是一组格式设置规则。是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 CSS的组成：CSS的定义是由三个部分组构成：选择符，属性和属性的取值。语法：selectorproprety:value 注： 1、 CSS声明块由：选择符+“”+1个或者多个CSS属性+“”组成。 2、 CSS是大小写不敏感的，在CSS语法中推荐使用小写。 正文 一、CSS选择符：就是CSS样式的名字，当在HTML文档中表现一个CSS样式的时候，就要用到一个CSS。怎么用呢？这时就通过CSS选择
2、符来指定此HTML标签使用此CSS样式。 二、选择符语法：一个CSS选择符就定义了一个样式。 选择符名称 声明 ; 比如： p .dreamdublue font-size:12px; .dreamdu18px color:blue; font-size:18px; #dreamdured P、dreamdublue、dreamdured都是选择符。 三、选择符命名规则：CSS选择符可以使用英文字母的大写与小写，数字，连字号，下划线，冒号，句号。 color:red; 英文字母大写与小写 A-Z a-z 数字 0-9 连字号 - 下划线 _ 冒号 : 句号 . 注： 1、 CSS选择符只能以字
3、母开头。 四、选择符分类：CSS选择符可以分为很多类，比如：类型选择符，id选择符，class选择符，通用选择符，分组选择符，包含选择符，元素指定选择符，子对象选择符，属性选择符，相邻选择符等，以下将一一介绍分析。 1、 类型选择符：类型选择符就是网页元素本身，定义时直接使用元素名称。 Body /*定义页面属性*/ Div Width:774px ; /*把所有的div元素定义为宽度为774像素*/ 2、 id选择符：它是唯一的，不同元素的id值是不能重复的，id选择符为每个元素的具体对象定义不同的样式，方便用户更加精细的控制页面。使用id选择符时要先为每个元素定义一个id属性。 使用id选
4、择符时，需要使用到#进行标识： #top Width:774px ; /*把所有的div元素定义为宽度为774像素*/ 3、 class选择符：在一个文档中可以为不同类型的元素定义相同的类名，class可以实现把相同样式的元素统一为一类，使用class选择符时要先为每个元素定义一个class属性： 使用class选择符时，需要使用英文.进行标识： .red Color:red ; 4、 通用选择符：是一种特殊的选择符，它用*表示，是一个使用但又容易忽略的选择符。 * font-size:12pt;/*定义文档中所有字体大小为12pt*/ 5、 分组选择符：分组选择符不是一种选择符类型，而是一种
5、选择符方法。当多个对象定义了相同的样式时，我们可以把他们分为一组。这样能够简化代码读写，比如： .class1 font-size:13px; color:red; text-decraotian:underline; .class2 font-size:13px; color:blue; text-decroation:underline; 可以分组为： .class1,class2 font-size:13px; text-decroation:underline; .class1 color:red; .class2 color:blue; 使用分组有2原则：1.方面原则；2.就近原则
6、6、 包含选择符：最有用的一类选择符，它能够简化代码，实现大范围的样式控制。比如： .div1 h2 /*定义类div1层中所有h2的标题样式*/ font-size:18px; .div1 p /*定义类div1层中所有p的标题样式*/ font-size:12px; 7、 元素指定选择符：有时候我们希望控制某种元素在一定范围内对象的样式，这时可以把class或id选择符组合起来使用。比如： span.red /*定义span元素中class为red的元素颜色为红色*/ color:red; div#top /*定义div元素中id为top的元素宽度为100%*/ width:100%; e
7、g: 在上面代码中要使用news选择符很显然不行，直接使用P，h2类型选择符也不太好这时便可以使用元素指定选择符 p.news h2.news span.news 8、 子对象选择符：与元素选择符一样都是限制选择符，即在一定元素范围内定义符合限制条件的元素样式，元素制定选择符是用class和id属性作为限制条件的，而子对象选择符是用id和子对象作为限制条件的。 #main table/*定义id为main的主体模块中子对象table的样式*/ width:788px; font-size:12px; #main .title/*定义id为main的主体模块中子对象的class为title的样式
8、*/ color:red; font-style:italic; 9、 属性选择符：属性选择符是在元素后面加一个中括号，中括号中列出各种属性，或者表达式。属性选择符存在7种具体形式： l 存在属性匹配：通过匹配存在的属性来控制元素的样式，一般要把匹配的属性包含在中括号中，只列举姓名并不赋值： h1class color:red;/*作用任何带class属性的h1元素 不管class的值是什么*/ imgalt border:none;/*作用任何带alt属性的img元素 不管alt的值是什么*/ ahreftitle font-weight:bold;/*作用同时带href和title属性的a
9、元素*/ l 精准属性匹配：只有当属性值完全匹配指定的属性值时才会应用样式，id和class选择符实际上就是精准属性选择。 ahref = title=网易 font-size:12px;/*作用地址指向并且title提示字样为网易的a元素*/ l 空白分个匹配：通过为属性定义字符串列表，然后只要匹配其中任意一个字符串即可控制元素样式。 谁来控制我的样式 可以使用下面样式来控制： class=a color:red; 或： class=b color:red; 或： class=c color:red; 或： spanclass=c color:red; l 连字符匹配：与空白匹配的功能和用法
10、相同，但是连字符匹配中的字符串列表中用连字符进行分割. 谁来控制我的样式 可以使用下面样式来控制： class|=a color:red; 或： class|=a color:red; 或： class|=b color:red; 或： class|=c color:red; 或： spanclass|=c color:red; l 前缀选择符：只要属性值的开始字符匹配指定字符串，即可对元素应用样式。前缀匹配使用=形式来实现： 前缀匹配 可使用如下样式控制 class =my color:red; l 后缀匹配：与前缀相反，只要属性的结尾字符匹配指定字符，使用$=形式控制。 后缀匹配 可使用如下样式控制 class $=Test color:red; l 子字符串匹配：只要属性中存在指定字符串即应用样式，使用*=形式控制。 子字符串匹配 可使用如下样式控制 class *=est color:red; 10、 相邻选择符：就是指元素相邻的下一个元素。 div+p font-size:24px;/*作用所有紧贴div元素之后的p元素，定义p元素的字体大小为14px*/ eg: 要单独控制最下的p元素除非为他定义一个class和id属性如果使用使用相邻选择符就可以做到 #sub_wrap+p font-size:14px;
