hate css of 选择器

发表于   |   分类于   |  

选择器

继承

  • 子元素从父元素继承属性，IE/Windows 直到 IE6 还存在相关的问题，在表格内的字体样式会被忽略。
  • 针对子元素创建规则，则可摆脱继承

元素选择器

  • 文档的元素就是最基本的选择器 比如 p、h1、em、a，甚至可以是 html 本身

选择器分组

1
h2, p {color:gray;}

将 h2 和 p 选择器放在规则左边，然后用逗号分隔，就定义了一个规则。其右边的样式（color:gray;）将应用到这两个选择器所引用的元素。逗号告诉浏览器，规则中包含两个不同的选择器

  • 通配符选择器 *,与任何元素匹配

类选择器

  • class

结合元素选择器 

1
p.important {color:red;} //匹配 class 属性包含 important 的所有 p 元素

class 值中可能包含一个词列表，各个词之间用空格分隔

1
2
3
4
5
< p class="important warning">
This paragraph is a very important warning.
< /p>
.important.warning {background:silver;}//class 中同时包含 important 和 warning

在 IE7 之前的版本中，不同平台的 Internet Explorer 都不能正确地处理多类选择器

ID选择器

  • ID 选择器前面有一个 # 号
  • 不能使用 ID 词列表
1
#intro {font-weight:bold;}

属性选择器

1
2
3
*[title] {color:red;}// 把包含标题（title）的所有元素变为红色
a[href] {color:red;} // 对有 href 属性的锚（a 元素）应用样式
a[href][title] {color:red;} //将同时有 href 和 title 属性的 HTML 超链接的文本设置为红色

根据具体属性值选择

1
2
3
4
//将指向 Web 服务器上某个指定文档的超链接变成红色
a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}
//可以把多个属性-值选择器链接在一起来选择一个文档
a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;}

后代选择器

  • 依赖于上下文关系来应用或者避免某项规则
1
2
3
4
5
6
7
8
9
10
11
12
13
//列表中的 strong 元素变为斜体字
li strong {
    font-style: italic;
    font-weight: normal;
  }
 
 <p><strong>我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用</strong></p>
<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>