基本选择器
通配符选择器、元素选择器、类选择器、ID选择器、后代选择器
子元素选择器
div > span //div元素里面的span元素
//子选择器只能选择某元素的子元素
相邻兄弟元素选择器
#aa + #bb //aa元素 相邻后面的 bb元素(单选)
//相邻兄弟选择器可以选择,紧接在另一元素后的元素,而且他们具有一个相同的父元素
通用兄弟选择器
section ~ article //section元素后面的所有 article兄弟元素(多选)
//选择某元素后面的所有兄弟元素,而且他们具有一个相同的父元素
群组选择器
div,span,p,... //各个元素一起选择
//群组选择器是将具有 相同样式 的元素分组在一起,每个元素选择器之间使用 逗号 隔开
属性选择器
a [href] //a标签中带有href属性的,选上
span [id="aa"] //span的ID类,必须只有一个id名,并且id="aa"
div [class~="bb"] //div的classname,classname可以有多个类名,并且 bb类名前后 必须有空格
article [class^="c"] //article的classname,必须只有一个类名,并且以“c”开头
section [class$="d"] //section的classname,必须只有一个类名,并且以“d”结尾
nav [class*="e"] //nav的classname,可以有多个类名,并且类名带有“e”
aside [class|="f"] //aside的classname,必须只有一个类名,并且类名以 f 或 f- 开头的元素
伪类选择器
动态伪类:这些伪类不存在HTML中,只有当用户和网站交互的时候才能体现出来
锚点伪类: :link 、:visited
用户行为伪类: :hover 、:active 、:focus
a{ text-decoration: none; }
a:link { color: black; }/*鼠标原始链接为黑色;*/
a:hover { color:white; }/*鼠标经过时为白色;*/
a:active { color: red; }/*鼠标点击下去为红色;*/
a:visited {color: purple;}/*鼠标访问过后为紫色;*/
input:focus { background:blue; }/*鼠标进入文本输入框时变成蓝色背景*/
UI元素状态伪类
UI元素状态伪类: :enabled 、:disabled 、 :checked (Opera专用)
input:enabled{ border: 1px solid red; } //选中可输入状态的input,并设置样式
input:disabled{ background: blue; } //选中不可输入状态的input,并设置样式
//默认input输入框都是 :enabled 的状态;
CSS3结构类
ul > li : first-child { }//ul元素下的li的第一个 ul > li : last-child { }//ul元素下的li的最后一个 ul > li : nth-child(3) { }//ul元素下的li的第3个 Element : nth-child(2n+1)//每隔一行选择一次(多选) Element : nth-child(3n+1)//每隔两行选择一次(多选) Element : nth-child(odd)//每奇数行选择一次(多选) Element : nth-child(even)//每偶数行选择一次(多选) Element : nth-last-child(n) // 所匹配属性的倒数第n个(单选)
//指定元素类型 div (Element) : nth-of-type(2) //所有父级元素(包括body)下的第二个元素,并且还是div(可多选) div (Element) : nth-last-of-type(2) //所有父级元素(包括body)下的倒数第二个元素,并且还是div(可多选) Element : first-of-type 选择器匹配 属于其父元素 的特定类型的 首个子元素 的每个元素 Element : last-of-type 选择器匹配 属于其父元素 的特定类型的 最后一个子元素 的每个元素 Element : only-child 选择器匹配 属于其父元素下 的唯一子元素 的每个元素 (Element是其父元素下的唯一一个子元素,不可以再有其他元素) Element : only-of-type 选择器匹配 属于其 父元素的 特定类型的 唯一子元素的每个元素(Element是其父元素下的唯一特定类型的子元素,不过还可以有其他类型的元素) Element : empty 选择器匹配没有子元素(包括文本节点)的每个元素(如<div></div>,这样的空元素)
否定选择器
nav:not(div) { border-right : 1px; } //表示nav里面的div,不需要这些样式
CSS权重规则
1.包含更高权重选择器的一条规则拥有更高的权重。
2.ID选择器的权重比属性选择器高
3.带有上下文关系的选择器比单纯的元素选择器权重要高。
4.与元素挨得近的规则生效,htm中规则的比CSS文件的优先。
5.最后定义的这条规则会覆盖上面与之冲突的规则。
6.无论多少个元素组成的选择器,都没有一个cass选择器权重高。
7.通配符选择器也有权重,权重被认为是O。
慎用 !important
行内样式 > id选择器 > 类,伪类和属性选择器 > 元素和伪元素选择器
伪元素
div::first-line //div的第一行,first-line伪元素只能用于块级元素
div::first-letter //div文本的首字母,first-letter伪元素只能用于块级元素
div::before{ content : "在div的前面出现,内容输入用content"; color:red; }
特点1:永远是div里面的第一个子元素(<div> ::before <p>这是第二个子元素</p> </div>)
特点2:默认是行级元素(可以更改成块级元素)
特点3:文本内容是通过content写入
特点4:标签中找不到对应的标签
div::after{ content : "在div的后面出现,内容输入用content"; color:red; }
跟before有同样的特点
div::selection { background:black;color:white; }, //div选中文本时,样式变成黑底白字;Firefox浏览器要加-moz
清除浮动常用
清除浮动用:div::after { display:block;content:"";clear:both; }
1、清除浮动必须转换为块级元素
2、无内容的话浏览器会默认不显示,实现不了清除浮动的效果,必须插入空内容
3、最后就clear:both;