CSS3_01之选择器、Hack

1、兄弟选择器：①相邻兄弟选择器：元素的后一个兄弟元素，选择器1+选择器2；②通用兄弟选择器：元素后的所有兄弟元素，选择器1~选择器2；

2、属性选择器：attr表示属性名称，elem表示元素名；①[attr]：页面中所有带有attr属性的元素；②elem[attr]：页面中所有带attr属性的elem元素；③elem[attr1][attr2]……：页面中所有既带attr1属性又带attr2属性……的elem元素；④elem[attr=value]：页面中所有带attr属性，且其值为value的elem元素；⑤elem[attr~=value]：页面中所有带attr属性且其值列表中包含独立值value的elem元素（多用于元素class类属性）；⑥elem[attr^=firstchar]：页面中所有带attr属性且其值以firstchar（一个字母或字符串）开头的elem元素；⑦elem[attr$=lastchar]：页面中所有带attr属性且其值以lastchar（一个字符或字符串）结尾的elem元素；⑧elem[attr*=everchar]：页面中所有带attr属性且其值包含everchar（一个字符或字符串）字符的elem元素；

3、目标伪类：~：target，凸显html锚；

4、元素状态伪类：①~：enabled，每个被启用的元素；②~：disabled，每个被禁用的元素；③~：checked，每个被选中的元素（单选/复选框）；

5、结构伪类：①~：first-child，其父元素的首个子元素；②~：last-child，其父元素的最后一个子元素；③~：nth-child（n），其父元素的第n个子元素；④~：empty，所有没有子元素的元素（没有子元素即没有内容，没有空格换行）；⑤~：only-child，其父元素中的唯一子元素；

6、否定伪类：~：not（selector），该元素中所有不满足selector选择器的元素；

7、伪元素选择器：①~：first-line或~：：first-line，该元素的首行；②~：first-letter或~：：first-letter，该元素的首字符；③~：：selection，该元素下用户选中区域部分；

8、计数器：①声明/复位计数器：counter-reset：计数器名称 值；（* 值可省，默认为0；可一次声明多个，counter-reset：名1 值1 名2 值2……；计数器声明不能放在使用的元素上；）；②计数器增量：counter-increment：计数器名称 增量值；（* 不可省，默认值为1，放于使用元素中；）；③计数器调用：counter（计数器名称）；（放于调用元素中）；

9、内容生成：①选择器：：before和：after，生成位置前/后；②属性：content，插入的内容，取值：url（）（插入图像）/字符串（“纯文本”）/计数器（有规律的数字）；

10、多列：①分割列：column-count：数字；②列间隔：column-gap：数字px；③列规则：column-rule：宽 样式 颜色；（* 即列间隔边框样式）；④兼容性：IE10+，Opera支持；

11、CSS Hack：①CSS类内部：样式规则加前缀；-：IE6；+：IE7；②选择器：选择器加前缀：*：IE6；*+：IE7；③头部引用：<！--[if 条件 IE 版本]>内容……<！[endif]-->；（* 条件：a、gt：大于；b、gte：大于等于；c、lt：小于；d、lte：小于等于；！非IE；）；④媒体查询：@media screen{}；

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有