东光做淘宝网站,wordpress系列教程,wordpress 情侣博客,申请一个网站需要怎么做基本选择器
回顾选择器 通配符选择器元素选择器类选择器ID选择器后代选择器新增基本选择器 子元素选择器相邻兄弟选择器通用兄弟选择器群组选择器
子元素选择器
概念#xff1a;子元素选择器只能选择某元素的子元素
语法#xff1a;父元素 子元素 #xff08;Fathe…基本选择器
回顾选择器 通配符选择器元素选择器类选择器ID选择器后代选择器新增基本选择器 子元素选择器相邻兄弟选择器通用兄弟选择器群组选择器
子元素选择器
概念子元素选择器只能选择某元素的子元素
语法父元素 子元素 FatherChildren
兼容性IE8 、Firefox、Chrome、Safari、Opera
相邻兄弟元素选择器
概念相邻兄弟选择器可以选择紧接在另一个元素后的元素而且她们具有同一个相同的父元素
语法格式元素 兄弟相邻元素 (Element Sibling)
兼容性IE8 、Firefox、Chrome、Safari、Opera
通用兄弟选择器
概念选择某元素后面的所有兄弟元素而且他们具有一个相同的父元素
语法格式元素 ~ 后面所有兄弟相邻元素 (Element ~ Siblings)
兼容性IE8 、Firefox、Chrome、Safari、Opera
群组选择器
概念群组选择器是将具有相同样式的元素分组在一起每个选择器之间使用逗号“”隔开
语法格式元素1元素2.....元素n
兼容性IE6 、Firefox、Chrome、Safari、Opera
Element[attribute]
概念选择所有带有attribute属性的元素
兼容性IE8 、Firefox、Chrome、Safari、Opera
Element[attributevalue]
概念选择所有使用 attributevalue的元素
兼容性IE8 、Firefox、Chrome、Safari、Opera
Element[attribute~value]
概念选择attribute属性包含单词“value”的元素
兼容性IE8 、Firefox、Chrome、Safari、Opera
Element[attribute^value]
概念选择attribute属性值以“value”开头的所有元素
兼容性IE8 、Firefox、Chrome、Safari、Opera
Element[attribute$value]
概念选择attribute属性值以“value”结尾的所有元素
兼容性IE8 、Firefox、Chrome、Safari、Opera
Element[attribute*value]
概念选择attribute属性值包含“value”的所有元素
兼容性IE8 、Firefox、Chrome、Safari、Opera
Element[attribute|value]
概念选择attribute属性值为“value”或以“value-”开头的元素
兼容性IE8 、Firefox、Chrome、Safari、Opera
伪类选择器
动态伪类UI元素状态伪类CSS3结构类否定选择器伪元素
动态伪类
这些伪类不存在于HTML中只有当用户和网站交互的时候才能体现出来
锚点伪类 :link:visited用户行为伪类 :hover:activefocus
UI元素状态伪类
概念把:enabled:disabled:checked伪类称为UI元素状态伪类
兼容性IE9 、Firefox、Chrome、Safari、Opera
:nth选择器
我们把css3的:nth选择器也成为CSS3结构类
选择方法
:first-child:last-child:nth-child():nth-last-child():nth-of-type():nth-last-of-type():first-of-type:last-of-type:only-child:only-child:only-of-type:empty
Element:first-child
概念选择属于其父元素的首个子元素的每个Element元素
兼容性IE8 、Firefox、Chrome、Safari、Opera
Element:last-child
概念选择属于其父元素的最后一个子元素的Element元素
兼容性IE8 、Firefox、Chrome、Safari、Opera
Element:nth-child(N)
概念:nth-child(N)选择器匹配属于其父元素的第N个子元素不论元素的类型
兼容性IE9 、Firefox4 、Chrome、Safari、Opera
关于参数(N)
Element:nth-child(number) ———— 选择某元素下的第number个element元素Element:nth-child(n) ———— n是一个简单表达式取值从”0“开始计算。这里只能是n不能是其他字母代替Element:nth-child(odd)、Element:nth-child(even) ———— odd和even是可用于匹配下标是奇数或偶数的element元素的关键字第一个下标是1
Element:nth-last-child(N)
概念匹配属于其元素的第N个子元素的每个元素不论元素的类型从最后一个子元素开始计数
兼容性IE9 、Firefox4 、Chrome、Safari、Opera
Element:nth-last-of-type(N)
概念匹配属于父元素的特定类型的第N个子元素的每个元素从最后一个子元素开始计数
兼容性IE9 、Firefox4 、Chrome、Safari、Opera
Element:last-of-type(N)
概念:last-of-type 选择器匹配属于其父元素的特定类型的最后一个子元素的每个元素
兼容性IE9 、Firefox4 、Chrome、Safari、Opera
Element:only-child(N)
概念:only-child 选择器匹配属于其父元素的唯一子元素的每个元素
兼容性IE9 、Firefox4 、Chrome、Safari、Opera
Element:only-of-type(N)
概念:only-of-type 选择器匹配属于其父元素的特定类型的唯一子元素的每个元素
兼容性IE9 、Firefox4 、Chrome、Safari、Opera
Element:empty
概念:empty 选择器匹配没有子元素包括文本节点的每个元素
兼容性IE9 、Firefox4 、Chrome、Safari、Opera
否定选择器
概念:not(Element/Selector)选择器匹配非指定元素/选择器的每个元素
语法格式
父元素:not子元素|子选择器(Father:not(Children|selector))兼容性IE9 、Firefox4 、Chrome、Safari、Opera
伪元素
伪元素 ———— Element::first-line
概念根据”first-line“伪元素中的样式对element元素的第一行文本进行格式化
说明”first-line“伪元素只能用于块级元素
伪元素 ———— Element::first-letter
概念用于向文本的首字母设置特殊样式
说明”first-letter“伪元素只能用于块级元素
伪元素 ———— Element::before
概念在元素的内容前面插入新内容
说明常用content配合使用
特点
永远是第一个子元素行级元素内容通过content写入标签中找不到对应的标签
伪元素 ———— Element::after
概念在元素的内容后面插入新内容
说明常用content配合使用多用于清除浮动
伪元素 ———— Element::selection
概念用于设置在浏览器中选中文本后的背景与前景色
兼容性说明
::selection在IE家族中只用IE9 版本支持在firefox上要添加前缀
-mozCSS权重
什么是权重
当很多规则被应用到某一个元素上时权重是一个决定那种规则生效或者是优先级的过程
权重等级与权值
行内样式1000ID选择器100 类、属性选择器和伪类选择器10 元素和伪元素1 *0
权重计算口诀
从0开始一个行内样式 1000一个ID 100一个属性选择器、class或者伪类选择器 10一个元素名或者伪元素 1
本文转载于:猿2048➝https://www.mk2048.com/blog/blog.php?idb1kj20jtitleCSS3选择器
