css 为元素选择器,css目标状态伪类,结构化选择器,多媒体选择器,清除表默认样式、属性选择器

伪元素选择器web


:before 和 :after浏览器

添加的位置
:before --- 第一个子节点
:after --- 最后一个子节点app

特色
一、默认是 inline 元素
二、必须包含 content 属性
三、content 属性的值 : 字符串或者CSS的函数(url(), attr(), counter()) 多个字符串使用 空格 链接函数

注意事项:
规范要求是用::, 实际开发使用: 为了支持IE低版本浏览器。url

使用场景:
一、清除浮动
e:after{
content: "";
display: table;
clear: both;
}开发

二、页面中有重复显示的内容,且该内容无需进行DOM操做。(钱的符号等)
e:after{
content: "$";
}字符串

三、防止父子块元素嵌套,致使的高度塌陷(外边距合并)。get

e:before{
content: "";
display: block;
}it


::selection -- 选中的文本内容,为其设置样式io

注意:支持的CSS样式有限。

::first-letter --- 一行的首字母

::first-line ---- 首行


2、目标状态伪类

触发的条件:
点击连接元素,该连接元素href属性指向的元素(元素id == 锚连接的值)
e:target{

}


3、结构化伪类选择器

nth-child()

--- 不区分元素类型

nth-of-type()

--- 区分元素类型


参数:
number 数字 ---- 第几个位置上的元素
odd ---- 奇数位元素
even ---- 偶数位元素
an + b ---- n (0 ~ 无限大的正整数)

4、计数函数 counter(), counters(num, "分割符")

5、属性函数 attr(属性名)

6、多媒体选择器 @media

监控打印设备
@media print{


}


7、appearance 清除表单控件的默认样式


扩展: 浏览器厂商前缀

-webkit- Chrome, Safari
-moz- 火狐
-o- 欧朋
-ms- IE


使用浏览器厂商前缀的属性,
1.该属性处于试验阶段,浏览器支持很差。
二、该浏览器特有属性

8、属性选择器

e[属性名]
e[属性名=属性值]
e[属性名^=属性值]
e[属性名$=属性值]
e[属性名*=属性值]

e[属性名~=属性值]

e[属性名|=属性值] 1.只包含该属性值 2.或者改属性值以属性值-开头

相关文章
相关标签/搜索