1、*用于匹配任何的标记
2、>用于指定父子节点关系
3、E+F毗邻元素选择器,匹配所以紧随E元素之后的同级元素F
4、E~F匹配所以E元素之后的同级元素F
5、名称[表达式]
[att=val]
[att^=val]
[att$=val]
[att*=val]
6、伪类
6.1 :hover, :link , :active , :visited , :focus
6.2 :disabled , :enabled , :checked , :read-only , :read-write
6.3 :nth-child(n) , :nth-last-child(n) , :nth-of-type(n) , :first-child , :last-child , :nth-last-of-type(n) , :first-of-type , last-of-type
6.4 not()
7. 伪元素
::before ::after
::first-letter ::first-line
::selection
/*>表示只获得一级子元素,可以比较和d#1 p的区别*/ #d1>p { color :red; } #d1{ width :150px; height :150px; border :solid 1px black; } /* + 获取和.c1平级的并且是挨着的元素*/ .c1+div{ color :blue; } #d2{ width :150px; height :100px; border :solid 1px black; } /* ~ 获取~之后的所有同级元素*/ .c2~div{ color :pink ; } #d3{ width :150px; height :150px; border :solid 1px black; } /* a下面定义了href 或 title 属性的元素*/ a[href] { color :blue; } /*定义title=b的元素*/ a[title =b] { color:red; } /*^=表示以什么开头*/ a[href^=www]{ font-size :32px; } /*$=以什么结尾*/ a[href$=html]{ color :green ; } /* *=内容里面包含什么的*/ a[href*=tao]{ color :orange ; } /*伪类,这里替代了class*/ i:first-child { color :mediumpurple; } /*这里必须遵循love hate原则 Link visited hover active 只有满足这个顺序,才能使这四个伪类都起作用 这四个伪类对其他标签一样存在效果 */ /*a:link超链接没点击之前的样式*/ a:link{ font-style:italic; } a:visited { color:aqua; } /*a:hover鼠标放在超链接时的样式*/ a:hover { color :yellow ; } /*a:activer鼠标点击超链接那一刻时的样式*/ a:active { color :black ; } /*当获取焦点的时候*/ input:focus { color :red; } /*获取到被禁用的元素 :disabled{ } 这个代表所有被禁用的元素 */ input:disabled { color :blue; } /*获取checked元素,没测试成功*/ :checked { font-size :30px; } /*获取checked元素*/ /*:read-only { color :mediumpurple; }*/ /*默认情况下就是又可以读又可以写*/ :read-write { color :greenyellow ; } /*这个元素:1,是它的父标签的第n个 2, 是P标签*/ p:nth-child(2){ color:green ; } /*这个元素:1.是它的父元素的倒数第n个元素 2. 是P元素*/ p:nth-last-child(2){ color :pink; } /*这个元素:父元素的第n个P元素*/ p:nth-of-type(2){ color :yellow ; } /*这个元素:父元素的倒数第n个P元素*/ p:nth-last-of-type(2){ color :aqua; } /*这个元素:1,是它的父标签的第1个 2, 是P标签*/ p:first-child { } /*这个元素:1.是它的父元素的倒数第1个元素 2. 是P元素*/ p:last-child { } /*这个元素:父元素的第1个P元素*/ p:first-of-type{ } /*这个元素:父元素的倒数第1个P元素*/ p:last-of-type{ } /*class不等于c1的pre标签*/ pre:not(.c1){ color :red; } /*获取所有disabled的input标签 input:not(:enabled){ } 获取所有read-only的input标签 input:not(:read-only){ } */ /*在P标签前面添加内容*/ p::before { content :"加在前面:"; } /*在P标签后面追加内容*/ p::after{ content :"加在后面..."; } /*p标签的第一个字母 p::first-letter { } p标签的第一行 p::first-line { }*/ /*选择内容的时候,字体和底板呈现什么颜色*/ ::selection { color :red; background-color :#00F; }