网站建设销售技巧和话术,男女做暖网站是什么样子的,做便民工具网站,flash网站的优点和缺点CSS是一种用于屏幕上渲染html#xff0c;xml等一种语言#xff0c;CSS主要是在相应的元素中应用样式#xff0c;来渲染相对应用的元素#xff0c;那么这样我们选择相应的元素就很重要了#xff0c;如何选择对应的元素#xff0c;此时就需要我们所说的选择器。选择器主要是…CSS是一种用于屏幕上渲染htmlxml等一种语言CSS主要是在相应的元素中应用样式来渲染相对应用的元素那么这样我们选择相应的元素就很重要了如何选择对应的元素此时就需要我们所说的选择器。选择器主要是用来确定html的树形结构中的DOM元素节点。我把CSS选择器分开成三部分第一部分是我们常用的部分我把他叫做基本选择器第二部分我把他称作是属性选择器第三部分我把他称作伪类选择器这一部分也是最难理解和掌握的部分今天我们先来看第一部分——基本选择器。我们先来看一个常用的选择器列表图 选择器例子例子描述CSS.class.intro选择 classintro 的所有元素。1#id#firstname选择 idfirstname 的所有元素。1**选择所有元素。2elementp选择所有 p 元素。1element,elementdiv,p选择所有 div 元素和所有 p 元素。1element elementdiv p选择 div 元素内部的所有 p 元素。1elementelementdivp选择父元素为 div 元素的所有 p 元素。2elementelementdivp选择紧接在 div 元素之后的所有 p 元素。2[attribute][target]选择带有 target 属性所有元素。2[attributevalue][target_blank]选择 target_blank 的所有元素。2[attribute~value][title~flower]选择 title 属性包含单词 flower 的所有元素。2[attribute|value][lang|en]选择 lang 属性值以 en 开头的所有元素。2:linka:link选择所有未被访问的链接。1:visiteda:visited选择所有已被访问的链接。1:activea:active选择活动链接。1:hovera:hover选择鼠标指针位于其上的链接。1:focusinput:focus选择获得焦点的 input 元素。2:first-letterp:first-letter选择每个 p 元素的首字母。1:first-linep:first-line选择每个 p 元素的首行。1:first-childp:first-child选择属于父元素的第一个子元素的每个 p 元素。2:beforep:before在每个 p 元素的内容之前插入内容。2:afterp:after在每个 p 元素的内容之后插入内容。2:lang(language)p:lang(it)选择带有以 it 开头的 lang 属性值的每个 p 元素。2element1~element2p~ul选择前面有 p 元素的每个 ul 元素。3[attribute^value]a[src^https]选择其 src 属性值以 https 开头的每个 a 元素。3[attribute$value]a[src$.pdf]选择其 src 属性以 .pdf 结尾的所有 a 元素。3[attribute*value]a[src*abc]选择其 src 属性中包含 abc 子串的每个 a 元素。3:first-of-typep:first-of-type选择属于其父元素的首个 p 元素的每个 p 元素。3:last-of-typep:last-of-type选择属于其父元素的最后 p 元素的每个 p 元素。3:only-of-typep:only-of-type选择属于其父元素唯一的 p 元素的每个 p 元素。3:only-childp:only-child选择属于其父元素的唯一子元素的每个 p 元素。3:nth-child(n)p:nth-child(2)选择属于其父元素的第二个子元素的每个 p 元素。3:nth-last-child(n)p:nth-last-child(2)同上从最后一个子元素开始计数。3:nth-of-type(n)p:nth-of-type(2)选择属于其父元素第二个 p 元素的每个 p 元素。3:nth-last-of-type(n)p:nth-last-of-type(2)同上但是从最后一个子元素开始计数。3:last-childp:last-child选择属于其父元素最后一个子元素每个 p 元素。3:root:root选择文档的根元素。3:emptyp:empty选择没有子元素的每个 p 元素包括文本节点。3:target#news:target选择当前活动的 #news 元素。3:enabledinput:enabled选择每个启用的 input 元素。3:disabledinput:disabled选择每个禁用的 input 元素3:checkedinput:checked选择每个被选中的 input 元素。3:not(selector):not(p)选择非 p 元素的每个元素。3::selection::selection选择被用户选取的元素部分。3下面我们先看看上表中基本的选择器的使用方法和其所起的作用为了更好的说明问题先创建一个简单的DOM结构如下 复制代码 代码如下: div classdemo ul classclearfix li idfirst classfirst1/li li classactive important2/li li classimportant items3/li li classimportant4/li li classitems5/li li6/li li7/li li8/li li9/li li idlast classlast10/li /ul /div 给这个demo加上一些样式让他好看一点 复制代码 代码如下: .demo { width: 300px; border: 1px solid #ccc; padding: 10px; } li { float: left; height: 20px; line-height: 20px; width: 20px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; text-align: center; background: #f36; color: green; margin-right: 5px; } 初步效果如下所示 一、通配符选择器 通配符选择器是用来选择所有元素也可以选择某个元素下的所有元素。如 复制代码 代码如下: *{ marigin: 0; padding: 0; } 上面代码大家在reset样式文件中看到的肯定不少他所表示的是所有元素的margin和padding都设置为0另外一种就是选择某个元素下的所有元素 复制代码 代码如下: .demo * {border:1px solid blue;} 效果如下 从上面的效果图看只要是div.demo下的元素边框都加上了新的样式。所有浏览器支持通配符选择器。 二、元素选择器(E) 元素选择器是css选择器中最常见而且最基本的选择器。元素选择器其实就是文档的元素如html,body,p,div等等比如我们这个demo中元素包括了div,ul,li等。 复制代码 代码如下: li {background-color: grey;color: orange;} 上在表示选择页面的li元素并设置了背景色和前景色效果如下 所有浏览器支持元素选择器(E)。 三、类选择器.className 类选择器是以一独立于文档元素的方式来指定样式使用类选择器之前需要在html元素上定义类名换句话说需要保证类名在html标记中存在这样才能选择类如 li classactive important items2/li 共中“active,important, items”就是我们以类给li加上一个类名以便类选择器能正常工作从而更好的将类选择器的样式与元素相关联。 .important {font-weight: bold; color: yellow;} 上面代码表示是给有important类名的元素加上一个“字体为粗体颜色为黄色”的样式如 类选择器还可以结合元素选择器来使用比如说你文档中有好多个元素使用了类名“items”但你只想在p元素这个类名上修改样式那么你可以这样进行选择并加上相应的样式p.items {color: red;} 上面代码只会匹配class 属性包含important 的所有p 元素但其他任何类型的元素都不匹配包括有“items”这个类名的元素上面也说过了“p.items”只会对p元素并且是其有一个类名叫“items”。不符合这两个条件的都不会被选择。 类选择器还有可以具备多类名上面我们也看到了我们li元素中同时有两个或多少类名其中他们以空格隔开那么选择器也可以使用多类连接在一起如 复制代码 代码如下: .important {font-weight: bold;} .active {color: green;background: lime;} .items {color: #fff;background: #000;} .important.items {background:#ccc;} .first.last {color: blue;} 正如上面的代码所示.important.items这个选择器只对元素中同时包含了important和items两个类才能起作用如图所示 有一点大家需要注意如果一个多类选择器包含的类名中其中有一个不存在那么这个选择器将无法找到相匹配的元素 比如说下在这句代码他就无法到找相对应的的元素标签因为我们列表中只有一个li.first和一个li.last不存在有一个叫li.first.last的列表项 复制代码 代码如下: .first.last {color: blue;} 所有浏览器都支持类选择器但多类选择器.className1.className2不被ie6支持。 四、id选择器#ID ID选择器和上面说的类选择器是很相似的在使用ID选择器之前也需要先在html文档中加注ID名称这样在样式选择器中才能找到相对应的元素不同的是ID选择器是一个页面中唯一的值我们在类使用时是在相对应的类名前加上一个“.”号.className而id选择器是在名称前使用#如(#id), 复制代码 代码如下: #first {background: lime;color: #000;} #last {background: #000;color: lime;} 上在的代码就是选择了id为first和last的列表项其效果如下 ID选择器有几个地方需要特别注意的第一一个文档中一个id选择器只充许使用一次因为id在页面中是唯一的第二id选择器不能像类选择器一样多个合并使用一个元素只能命名一个id名第三可以在不同的文档中使用相同的id名比如说在“test.html”中给h1定了“important”,也可以给“test1.html”中定义p的id为#important但前提是不管在test.html还是test1.html中只充许有一个id叫#important的存在。 所有浏览器都支持ID选择器。 那么什么时候采用id命名什么时候采用类命名呢我个人认为就是关键的一点就是具有唯一性使用id选择器公用的类似的使用类选择器。使用这两个选择器时最好区别大小写。 五、后代选择器 后代选择器也被称作包含选择器,所起作用就是可以选择某元素的后代元素比如说:E F前面E为祖先元素为后代元素所表达的意思就是选择了元素的所有后代元素请注意他们之间需要一个空格隔开。这里不管是E元素的子元素或者是孙元素或者是更深层次的关系都将被选中换句话说不论在中有多少层关系都将被选中 .demo li {color: blue;} 上面表示的是选中div.demo中所有的li元素 所有浏览器都支的后代选择器。 六、子元素选择器(EF) 子元素选择器只能选择某元素的子元素其中E为父元素而F为子元素其中EF所表示的是选择了元素下的所有子元素。这和后代选择器 不一样在后代选择器中是的后代元素而子元素选择器 F其中仅仅是的子元素而以。ul li {background: green;color: yellow;} 上在代码表示选择ul下的所有子元素li。如 IE6不支持子元素选择器。 七、相邻兄弟元素选择器(E F) 相邻兄弟选择器可以选择紧接在另一元素后的元素而且他们具有一个相同的父元素换句话说EF两元素具有一个相同的父元素而且元素在元素后面而且相邻这样我们就可以使用相邻兄弟元素选择器来选择元素。 复制代码 代码如下: li li {background: green;color: yellow; border: 1px solid #ccc;} 上面代码表示选择li的相邻元素li我们这里一共有十个li那么上面的代码选择了从第2个li到 10 个li一共九个请看效果 因为上面的lili其中第二li是第一li的相邻元素第三个又是第二个相邻元素因此第三个也被选择依此类推所以后面九个li都被选中了如果我们换过一种方式来看可能会更好的理解一点 复制代码 代码如下: .active li {background: green;color: yellow; border: 1px solid #ccc;} 按照前面所讲的知识这句代码很明显选择了li.active后面相邻的li元素注意了和li.active后面相邻的元素仅只有一个的。如图 IE6不支持这个选择器 八、通用兄弟选择器 〜 通用兄弟元素选择器是CSS3新增加一种选择器这种选择器将选择某元素后面的所有兄弟元素他们也和相邻兄弟元素类似需要在同一个父元素之中换句话说E和F元素是属于同一父元素之内并且F元素在元素之后那么E ~ F 选择器将选择中所有元素后面的元素。比如下面的代码 复制代码 代码如下: .active ~ li {background: green;color: yellow; border: 1px solid #ccc;} 上面的代码所表示的是选择中了li.active 元素后面的所有兄弟元素li,如图所示 通用兄弟选择器和相邻兄弟选择器极其相似只不过相邻兄弟选择器仅选择是元素的仅与其相邻的后面元素选中的仅一个元素而通用兄弟元素选择器选中的是元素相邻的后面兄弟元素这样说起来可能会有迷糊大家可以仔细看看其相邻兄弟的效果图。 IE6不支持这种选择器的用法。 九、群组选择器selector1,selector2,...,selectorN 群组选择器是将具有相同样式的元素分组在一起每个选择器之间使用逗号“”隔开如上面所示selector1,selector2,...,selectorN。这个逗号告诉浏览器规则中包含多个不同的选择器如果不有这个逗号那么所表达的意就完全不同了省去逗号就成了我们前面所说的后代选择器这一点大家在使用中千万要小心加小心。我们来看一个简单的例子 复制代码 代码如下: .first, .last {background: green;color: yellow; border: 1px solid #ccc;} 因为li.first和li.last具有相同的样式效果所以我们把他们写到一个组里来 所有浏览器都支持群组选择器。 上面九种选择器是CSS3中的基本选择器而我们最常用的是元素选择器、类选择器、ID选择器、后代选择器、群组选择器同时大家可以在实际应用中把这些选择器结合起来使用达到目的就行了。那么关于CSS3选择器的第一部分——基本选择器就介绍到这里有点简单希望对初次接触CSS的同学有所帮助下节将介绍CSS3选择器的第二部分——属性选择器感兴趣的朋友请观注本站的更新。 如需转载烦请注明出处W3CPLUS http://www.jb51.net/css/41450.html转载于:https://www.cnblogs.com/losesea/p/4394338.html
