[CSS] 文档选择器

[wang1dot0]

1. 对于低版本的IE6-8中如何使用新的HTML5元素，目前有几种方案：

   • 使用javascirpt辅助，如：

     document.createElement('section');

   • 使用通配符‘*’来匹配，如：（要匹配section下的p标签）

     section p { /* */ }
     body > * p { /* */ }

   • 优雅降级，IE条件注释

     <!--[if lt IE 9]><div class="section"><![endif]-->
     <!--[if IE 9]><section class="section"><![endif]-->
     <!--[if !IE]><!--><section class="section"><!--<![endif]-->
     ......
     <!--[if lt IE 9]></div><![endif]-->
     <!--[if IE 9]></section><![endif]-->
     <!--[if !IE]><!--></section><!--<![endif]-->

2. HTML[5]中属性选择符的属性名是不区分大小写的，但是属性选择符的属性值是区分大小写的。但是，HTML[5]属性值的关键字，如输入框的类型，不区分大小写。

属性选择符

// 简单选择符
[foo]
// 精准选择符
[foo="fooval"]
// 部分属性选择符
[foo|="bar"]
[foo~="bar"]
[foo*="bar"]
[foo^="bar"]
[foo$="bar"]
// 忽略属性选择符值的大小写: 末尾加i
foo[href=".PDf" i]

[wang1dot0]

后代选择器

后代选择符对元素之间的距离一无所知。 下面这个例子span最后取红色，因为红色再最后面。

div:not(.help) span { color: gray; }
div.help span { color: red }

<div class="help">
  <div class="aside">
    This text <span>a span element</span> within.
  </div>
</div>

选择子元素

h1 > strong {...} 选择的strong元素是h1元素的直接子代

选择紧邻的同胞元素

h1 + p {...} 选择的p元素紧跟在h1元素的后面，而且两者同属一个父元素 两个元素之间的文本不影响紧邻同胞元素连接符的作用。

选择后续同胞

h2 ~ ul 选择的ul元素列表都在h2元素的后面，而且他们同属一个父元素

[wang1dot0]

伪类选择符

伪类始终指代所依附的元素

结构伪类

div:first-child 选择的div元素必须是父元素的第一个元素。 若想要选择div的第一个子元素，div > :first-child。 :root 表示根元素，HTML中根元素就是html :empty 表示没有任何子代的元素，甚至连文本或空格都没有，这个伪类也是唯一一个在匹配时考虑文本节点的css选择符，但是img/input/textarea 都会被匹配。 :only-child 表示它选择的元素是父元素的唯一子元素 :only-of-type 表示匹配同胞中唯一的那种元素。 它指代的是元素，而不是其他任何东西。如下，它不会选中任何元素，因为它表示：选择的p元素的class属性中包括unique这个词，而且p元素是同胞中唯一的一个。

p.unique:only-of-type { color: red; }
<div>
  <p class="unique">Unique class.</p>
  <p>donot have unique class.</p>
</div>

:first-child&:last-child和:first-of-type&:last-of-type的区别 p:first-child 表示选择的p元素是父元素的第一个元素 p:first-of-type 表示选择的p元素是同胞元素中的第一个标签为p的元素，它可能不是第一个同胞元素。 p:first-child:last-child === p:only-child p:first-child === p:nth-child(1) nth-child 参数可以是an+b或者关键字odd和even 第9行后的每一行选中，下面两种方法都可以，第二种特指性更高

tr:nth-child(n+9) { ... }
tr:nth-child(8) ~ tr { ... }

动态伪类

超链接伪类： :link, :visited 用户操作伪类： :focus, :hover, :active

UI状态伪类

启用禁用UI元素： :enabled, :disabled 选择状态： :checked, :indeterminate 并没有unchecked伪类，只能用:not(:checked)表示 默认选项伪类：:default, 一组单选按钮中，匹配最初选中的那个 有效性伪类：:valid, :invalid 表示用户输入的值满足全部数据验证条件 范围伪类：:in-range, :out-of-range 表示用户输入的值在min和max属性设置的范围之内/外。无范围匹配的元素两个属性都不匹配。step属性表示步进值，如果一个值不匹配步进值，但是在范围以内，那么它的:in-range和:invalid生效 可选性伪类：:required, :optional 匹配必填的表单控件 可变性伪类：:read-write, :read-only

:target伪类

与URL中的片段标识符相对应的文档片段成为目标 不生效的情况：

• 页面的URL中没有片段标识符
• 页面中的URL中有片段标识符，但是文档中没有与之匹配的元素

:lang伪类

:lang(fr) == [lang|='fr']，与属性选择符类似，区别是语言信息有多个来源，而属性选择符必须有lang属性才能匹配。

否定伪类

:not()，参数为简单的选择符，包括：一个类型选择符，通用选择符，属性选择符，类选择符，ID选择符或伪类。

[wang1dot0]

伪元素

伪元素通常使用两个冒号，但是为了向后兼容，浏览器也接受单个冒号的伪元素。但是，建议使用标准的双冒号，因为以后有可能会放弃兼容。 伪元素只能出现在选择符的最后。p::first-line em无效

装饰首字母和首行 ::first-letter 和 ::first-line

p:first-of-type::first-letter 第一段的第一个字母大写 限制：

• 只能用在块级元素上面 h1 或 p
• 可以使用的css属性也有限制 所有字体属性/所有背景属性/所有文本装饰属性/所有行内排版属性/所有边框属性/color/opacity ::first-letter: 所有行内布局属性/box-shadow ::first-line: 所有外边距属性/所有内边距属性

装饰(创建)前置和后置内容元素

::before 和 ::after

[wang1dot0]

特指度

选择符的特指度规则：

• !important重要声明的特指度最高
• 行内样式的特指度为 1 0 0 0
• 选择符中的每个ID属性值加 0 1 0 0
• 每个类属性值/属性选择或伪类加 0 0 1 0
• 每个元素和伪元素加 0 0 0 1
• 通用选择符不增加特指度 0 0 0 0
• 连结符没有特指度，即连 0 0 0 0 都没有

继承

继承的值没有特指度，连零都没有。很容易被覆盖

层叠

CSS 的层叠规则如下：

1. 找到匹配特定元素的所有规则
2. 按显示权重排序应用到特定元素上的所有声明。以 !important 标记的规则比没有这个标记的权重高
3. 按来源排序应用到特定元素上的所有声明。三个来源： 创作人员/读者/用户代理。创作人员编写的样式高于读者提供的样式；读者以!important标记的样式高于其他样式权重，包括创作人员编写的!important样式；创作人员和读者样式覆盖用户代理的默认样式。
4. 按特指度排序应用到特定元素上的所有声明。特指度高的声明具有较高的声明
5. 按声明的前后位置排序应用到特定元素上的所有声明。样式表或靠后的声明权重高。导入的样式表中的声明放在当前样式表中所有声明的前面。

a标签的伪类编写顺序：link-visited-focus-hover-active 因为他们的特指度都是0010，最后匹配的规则胜出，单击，悬停或激活未访问链接时都会覆盖link。

[wang1dot0]

自定义属性

1. 都以--开头，调用方法是var()，同时要区分大小写。

   html {
   --base-color: #639;
   --highlight-color: #AEA;
   }
   h1 {
   color: var(--base-color);
   }
   h2 {
   color: var(--highlight-color);
   }

2. 作用域在一定范围内

   
   html { --base-color: #639; }
   aside { --base-color: #f60; }

h1 { color: var(--base-color); }

```html
<body>
  <h1>1</h1>
  <aside>
    <h1>2</h1>
  </aside>
  <h1>3</h1>
</body>

3. 如果担心支持情况，可以引入@supports()

   @supports (color: var(--custom)) {
   // 使用变量的样式
   }
   @supports (--custom: value) {
   // 替换样式
   }