快捷搜索:
来自 新京葡娱乐场网址 2019-09-12 04:44 的文章
当前位置: 67677新澳门手机版 > 新京葡娱乐场网址 > 正文

【新京葡娱乐场网址】读书笔记,浏览器支持

伪类选择器

选择器 描述 版本
E:hover 设置元素在其鼠标悬停时的样式 2.1
E:first-child 匹配父元素的第一个子元素E 2.1

E:hover在IE6中只有a元素可用

2、伪类

避免使用多层标签选择器。使用 class 选择器替换,减少css查找

CSS

/* Bad */ a[href="#"] > span > em {…} /* Good */ .className {}

1
2
3
4
5
/* Bad */
a[href="#"] > span > em {…}
 
/* Good */
.className {}

▲ 这种情况建议直接定义.className 选择器,然后使用 <em class="className"></em>

避免过渡使用子选择器

CSS

/* Bad */ div ul li a {} div > ul > li > a {} /* Good */ .className {…}

1
2
3
4
5
6
/* Bad */
div ul li a {}
div > ul > li > a {}
 
/* Good */
.className {…}

▲ 这种情况建议直接定义.className 选择器,然后使用 <a class="className"></a>

 

E:hover 失效

E:hover 伪类用于设置元素在其鼠标悬停时的样式,但是在某种情况会导致效果失效,如下:

CSS

#test { background:red; } #test div { display:none; } #test:hover div{ display:block; background:yellow; }

1
2
3
4
5
6
7
8
9
10
#test {
    background:red;
}
#test div {
    display:none;
}
#test:hover div{
    display:block;
    background:yellow;
}

 

<div id="test">触发我<div>看到我了吧</div></div>

1
<div id="test">触发我<div>看到我了吧</div></div>

▲ 当触发 #test:hover 时,此效果是在IE6中是无效的,因为在IE6中, E:hover 伪类仅能用于a(超链接)对象,且该a对象必须要拥有href属性。

E:hover 还有一种失效的状态,是大家最常见的,代码如下:

CSS

a:link {color:gray;} a:hover{color:green;} a:visited{color:yellow;} a:active{color:blue;}

1
2
3
4
a:link {color:gray;}
a:hover{color:green;}
a:visited{color:yellow;}
a:active{color:blue;}

 

<a href="#nogo">文字</a>

1
<a href="#nogo">文字</a>

▲ 当超链接处于 a:hover 时,你会发现其效果是无效,文字的颜色不会变成绿色,这是因为超链接的伪类样式书写是有固定顺序的,不能颠倒,这四个属性正确的定义顺序为:

CSS

a:link {} a:visited {} a:hover {} a:active {}

1
2
3
4
a:link {}
a:visited {}
a:hover {}
a:active {}

 

4、层叠和特殊性 5、继承

性能优化

CSS 选择器我们都在使用,但是如何让它变的更简洁,高效呢?
首先选择器对性能的影响源于浏览器匹配选择器和文档元素时所消耗的时间,所以优化选择器的原则是应尽量避免使用消耗更多匹配时间的选择器,但是在此之前我们需要先了解浏览器的匹配机制,就是它是如何读取我们的选择器的。

...

浏览器支持

 

属性选择器

选择器 描述 版本
E[attr] 匹配att属性的E元素 2.1
E[attr=”val”] 匹配att属性且属性值等于val的E元素 2.1
E[attr~=”val”] 匹配att属性且属性值中的词列表有一个等于val的E元素 2.1
E[attr^=”val”] 匹配att属性且属性值为以val开头的字符串的E元素 3
E[attr$=”val”] 匹配att属性且属性值为以val结尾的字符串的E元素 3
E[attr*=”val”] 匹配att属性且属性值为包含val的字符串的E元素 3
E[att|=”val”] 匹配att属性且属性值为以val开头并用连接符”-“分隔的字符串的E元素 2.1

IE7浏览器,单复选框的checked在属性选择器中是不被支持的,这部分内容会在下面的常见问题中详细说明。

  • 常用选择器:
    • 类型(元素、简单)选择器
    • ID选择器
    • 类选择器
    • 伪类
  • 新京葡娱乐场网址 ,通用选择器: *(通配)

  • 高级选择器:
    • 子选择器、相邻同胞选择器
      • 子选择(IE7以上才支持): #nav>li 选择#nav下的直接(第一个)li子元素,注意与通用选择器(#nav li)的区别
      • 注意这个选择器与后代选择器的区别,子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一个后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择
      • 相邻同胞选择(定位位于同一个父元素下某个元素之后的一个元素): h2 p 选择h2后面紧跟的一个p元素
    • 属性选择器(IE6不支持)

      • eg: [id="header"]{ color:red;}(指拥有id=header属性的所有元素 或者 div[title]{}(指选择有title属性的div元素)
  • 伪元素选择器:

    • first-letter、first-line、before、after
    • eg: p :first-letter{color:red;} div:after{content:"a";}

利用可继承性

CSS

/* Bad */ #nav > li > a { color:red; } /* Good */ #nav { color:red; }

1
2
3
4
5
/* Bad */
#nav > li > a { color:red; }
 
/* Good */
#nav { color:red; }

▲ 在使用选择器之前,请先考虑利用继承性实现

下一节继续整理选择器的优先级和继承性相关内容。

1 赞 1 收藏 评论

新京葡娱乐场网址 1

3、选择器

E:first-line 失效

如果在当前选择器内使用了 !important , :first-line 伪类内部的定义的属性会被完全忽略,示例:

CSS

p { color:blue; } p:first-line { color:red !important; }

1
2
3
4
5
6
p {
    color:blue;
}
p:first-line {
    color:red !important;
}

 

<p>第一行文字,<br/>第二行文字</p>

1
<p>第一行文字,<br/>第二行文字</p>

▲ 正常情况下第一行的文字会变成红色,但是在IE8浏览器却忽略它没有任何变化,如何来解决这个问题呢,把 !important 去掉就好了,如下:

CSS

p { color:blue; } p:first-line { color:red; }

1
2
3
4
5
6
p {
    color:blue;
}
p:first-line {
    color:red;
}

 

又翻了一下之前的读书笔记,再重温了忘掉的细节。最近一年的工作,由于有重构岗位的同学负责CSS的编写,虽说还是接触到,但毕竟不写好久了,有些东西还是忘记了,例如选择器的权重计算细节。这个笔记只是部分,后半部分快速浏览了,没写笔记。

* 通配符造成继承失效

CSS

* { color:red; } #test{ color:blue; }

1
2
3
4
5
6
7
* {
    color:red;
}
 
#test{
    color:blue;
}

 

<div id='test'> <a href="#">text</a> </div>

1
2
3
<div id='test'>
    <a href="#">text</a>
</div>

▲ 最终text的颜色却是红色的

按照我们的理解, id 的优先级是高于 * 通配符的,而文字也本应该继承 id 元素的color值,所以最终的文字应该是蓝色呀。

所以这里混淆了一个概念,继承的样式的优先级永远低于元素本身的样式,包括通配符选择器,所以大家在开发中,应该尽可能的避免滥用通配符,以免带来一些隐性问题。

关于这个问题,还可以参考《关于CSS特殊性的问题》

而在IE6及更早浏览器并不支持通配选择符(*),只是将它忽略了,所以也变相的能看到效果。

  • 类名或者ID以元素是做什么的来命名,不要以元素的外观表现来命名。
  • 类名或者ID全部小写,并用连字符号或许下划线分隔。(.add-class)

优化建议

我们理解了CSS选择器从右到左匹配的机制,也了解关键选择器的重要性,以及CSS选择器的效率排序,那么在使用选择器的时候,通过避免不恰当的使用,来提升 CSS 选择器性能。

1、元素命名规则

避免过度限制选择器

CSS

/* Bad */ html body .wrapper #content a {} /* Good */ #content a {}

1
2
3
4
5
/* Bad */
html body .wrapper #content a {}
 
/* Good */
#content a {}

▲ 这里至少有3个选择器是完全不需要的,过度限制选择器使浏览器工作比它实际需要的更繁重,花费的时间更多,所以这里应该避免。

  • 链接伪类: :link和:visited
  • 动态为例: :hover :active :focus
    • 设置:fouces与:hover相同的样式,让使用键盘来访问元素(更多时候是a标签)时,表现就跟用鼠标移到该元素上的效果相同
    • 用途:
      • <a></a>使用:link,:visited,:hover,:active,:focus使链接的效果更丰富;:link指未访问<a>标签前
        • 注意:<a>中使用伪类是,必须注意伪类套用样式的顺序,不然会导致后面的伪类覆盖了前面的伪类的情况
        • 顺序为:a:link,a:visited,a:hover,a:focus,a:active(记忆:LVHFA)
        • 习惯:LV一般一起设置,HFA一起设置
        • eg: a:link,a:visited{text-decoration:none;} a:hover,a:focus,a:active{text-decoration:underline;}
      • 表格行<tr></tr>中使用:hover伪类,悬停的该行整行变色

      • 提交按钮上使用:active
      • 输入框中使用:focus,使输入时获得丰富效果
  • 注意:IE7及以下的版本不支持除链接外的其他元素上使用伪类选择器!

基本选择器

选择器 描述 版本
s1,s2,…,sN 群组选择器,同时匹配所有s1元素或s2元素 2.1
E > F 子元素选择器,匹配所有E元素的子元素F 2.1
E F 毗邻元素选择器,匹配所有紧随E元素之后的同级元素F 2.1
E ~ F 匹配任何E标签之后的同级F标签 3

伪元素选择器

选择器 描述 版本
E:before 在元素前面插入内容,配合”content”使用 2.1
E:after 在元素后面插入内容,配合”content”使用 2.1

伪元素选择器

选择器 描述 版本
E::first-letter 选择文本块的第一个字母 3
E::first-line 选择元素的第一行 3
E::before 在元素前面插入内容,配合”content”使用 3
E::after 在元素后面插入内容,配合”content”使用 3
E::selection 设置对象被选择时的样式 3

E:first-letter 失效

E:first-letter 失效和 E:first-line 失效的问题是相同的,解决方案请参考上方。

避免使用标签或 class 选择器限制 id 选择器

CSS

/* Bad */ div#nav {…} .menuBalck#menu {…} /* Good */ #nav {…} #menu {…}

1
2
3
4
5
6
7
/* Bad */
div#nav {…}
.menuBalck#menu {…}
 
/* Good */
#nav {…}
#menu {…}

▲ ID选择器本身就是唯一的,加上div反而增加不必要的匹配;

本文由67677新澳门手机版发布于新京葡娱乐场网址,转载请注明出处:【新京葡娱乐场网址】读书笔记,浏览器支持

关键词: