如何增加网站pr值,网易云邮箱,电商网站怎么做seo,网站后台管理系统安装选择器种类 严格来讲#xff0c;选择器的种类可以分为三种#xff1a;标签名选择器、类选择器和ID选择器。而所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用。而在标签内写入style的方式#xff0c;应该是CSS的一种引入方式#xff0c;而不是选…选择器种类 严格来讲选择器的种类可以分为三种标签名选择器、类选择器和ID选择器。而所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用。而在标签内写入style的方式应该是CSS的一种引入方式而不是选择器因为根本就没有用到选择器。而一般人们将上面这几种方式结合在一起所以就有了5种或6种选择器了。 基本的选择器类型
语法如下
通用选择器如*{}。标签名选择器如p{}即直接使用HTML标签作为选择器。类选择器如.citys{}。ID选择器如#citys{}。
注意ID选择器跟类选择器有很大的不同一个页面内不能出现相同的ID再就是ID也是后台开发人员会经常用的所以前端开发人员应该尽量少的使用。当然跟后台人员的工作配合十分娴熟之后这些都不会成为限制。 扩展选择器
后代选择器如.citys span img{}后代选贼器实际上是使用多个选择器加上中间的空格来找到具体的要控制标签。群组选择器如div,span,img{}群组选择器实际上是对CSS的一种简化写法只不过把有相同定义的不同选择器放在一起省了很多代码。 选择器的优先级别
了解了各种选择器后还有一个重要的知识点就是CSS选择器的优先级。举个简单的例子 div classcitys span classbeijing 北京 /span span 上海 /span
/div 如果已经把.citys下span内的字体设置成红色 .citys span {color:red;} 这时如果要改变.beijing的颜色为蓝色用下面的命令是不能实现的 .beijing {color:blue;} 出现这种情况就是因为后一个命令的优先级不够两条相互冲突的样式设置浏览器只会执行优先级较高的那个。 那么选择器的优先级是怎么规定的呢 一般而言选择器越特殊它的优先级越高。也就是选择器指向的越准确它的优先级就越高。通常我们用1表示标签名选择器的优先级用10表示类选择器的优先级用100标示ID选择器的优先级。比如上例当中 .citys span {color:red;}的选择器优先级是 10 1 也就是11而 .polaris 的优先级是10浏览器自然会显示红色的字。理解了这个道理之后下面的优先级计算自是易如反掌 div.test1 .span var 优先级 110 10 1
span#xxx .songs li 优先级1100 10 1
#xxx li 优先级 100 1 对于什么情况下使用什么选择器用不同选择器的原则是 第一准确的选到要控制的标签 第二使用最合理优先级的选择器 第三HTML和CSS代码尽量简洁美观。 通常
1、最常用的选择器是类选择器。 2、li、td、dd等经常大量连续出现并且样式相同或者相类似的标签我们采用类选择器跟标签名选择器结合的后代选择器 .xx li td dd {} 的方式选择。 3、极少的情况下会用ID选择器当然很多前端开发人员喜欢headerfooterbannerconntent设置成ID选择器的因为相同的样式在一个页面里不可能有第二次。 在这里不得不提使用在标签内引入CSS的方式来写CSS即
div stylecolor:red北京/div 这时候的优先级是最高的。我们给它的优先级是1000这种写法不推荐使用特别是对新手来说。这也完全违背了内容和显示分离的思想。DIVCSS的优点也不能再有任何体现。后代选择器的定位原则 在这里介绍一下对于后代选择器浏览器是如何查找元素的呢 浏览器CSS匹配不是从左到右进行查找而是从右到左进行查找。比如DIV#divBox p span.red{color:red;}浏览器的查找顺序如下先查找html中所有classred的span元素找到后再查找其父辈元素中是否有p元素再判断p的父元素中是否有id为divBox的div元素如果都存在则匹配上。 浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。比如如下html和css:
CSS:
#divBox p span.red{color:red;} HTML:
body
div iddivBoxpspans1/span/ppspans2/span/ppspans3/span/ppspan classreds4/span/p
/div
/body 如果按从左到右查找哪会先查找到很多不相关的p和span元素。而如果按从左到右的方式进行查找则首先就查找到span classred的元素。firefox称这种查找方式为key selector(关键字查询)所谓的关键字就是样式规则中最后(最右边)的规则上面的key就是span.red。简洁、高效的CSS 所谓高效的CSS就是让浏览器在查找style匹配的元素的时候尽量进行少的查找下面列出一些我们常见的写CSS犯一些低效错误 ◆不要在ID选择器前使用标签名 一般写法DIV#divBox 更好写法#divBox 解释 因为ID选择器是唯一的加上div反而增加不必要的匹配。 ◆不要再class选择器前使用标签名 一般写法span.red 更好写法.red 解释同第一条但如果你定义了多个.red而且在不同的元素下是样式不一样则不能去掉比如你css文件中定义如下
p.red{color:red;}
span.red{color:#ff00ff} 如果是这样定义的就不要去掉去掉后就会混淆不过建议最好不要这样写◆尽量少使用层级关系一般写法#divBox p .red{color:red;}更好写法.red{..}◆使用class代替层级关系一般写法#divBox ul li a{display:block;}更好写法.block{display:block;}
