首先先捋一捋都有哪些选择器
1、通配符选择器
举例
*{width:100px;}
2、元素选择器
（在 W3C 标准中，元素选择器又称为类型选择器，看清楚啦是类型选择选器，区别于类选择器）
举例
h1 { color:black; }
3、类选择器
举例
<h1 class="important">我是标题</h1>
<p class="important">我是段落</p>
<p class="important">我是段落</p>
<p class="important urgent ">我是段落</p>
.important{ color:red; }
*.important {color:red;} 表示匹配 class 属性包含 important 的所有元素（通配符+类选择器）
p.important {color:red;} 表示匹配 class 属性包含 important 的所有 p 元素（元素+类选择器）
.important .urgent{color:red;} （多类选择器）
4、ID选择器
举例
<p id="intro">This is a paragraph of introduction.</p>
#intro {font-weight:bold;}
5、后代选择器
后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。
举例
h1 em { color:red;}
6、子元素选择器
举例
h1>strong {color:red;}
7、相邻兄弟元素选择器
举例
h1 + p {margin-top:50px;}
选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素
8、通用兄弟选择器
h1 ~ p {
width:200px;
height:200px;
background-color:red;
}
9、群组选择器
section > article,
section > aside,
section > div {
color: #f00;
margin-top: 10px;
background: #abcdef;
}
10、属性选择器
[attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素。
p[class~="important"]{ color: red;}
可以应用样式：
无法应用样式：
11、伪类选择器
A、动态伪类 （这些伪类并不存在HTML中，只有当用户和网站交互的时候才能体现）
锚点伪类（:link[ 未访问链接 ] :visited[ 已访问链接 ]）
用户行为伪类(:hover [ 当鼠标悬停 ] :active[ 正在进行的被选择的链接 ] :focus[ 规定获得焦点的输入字段的颜色 输入框内的颜色] )
B、UI元素状态伪类(css3新增)
:enabled（表单可选中）
input：enabled{}
:disabled（表单不可选中disabled=“disabled”）
input：disabled{}
:checked
C、CSS结构类
type类的就是数数的时候不管什么元素都一起算个数
:first-child【父元素的首个以及最后一个子元素】
section > div:first-child {color: #f00;}
配合前面的元素去写 否则很容易乱
:last-child、
某元素的最后一个元素
:nth-child ( n )
无论元素类型 ，匹配属于其父元素的第n个元素
（2n）even偶数 （2n+1）odd奇数
:nth-last-child( )
无论元素类型 ，从最后一个子元素开始计数，且从1开始计数
:nth-of-type( )
匹配属于父元素的特定类型的第n个子元素的每个元素
【如果指定div 那就只数div 不管还有什么元素】
:nth-last-of-type( )
如果指定div 那就只数div 不管还有什么元素 倒数的哦
:first-of-type、:last-of-type（正数）
:only-child、
匹配属于其父元素唯一子元素的每个元素 同一个父元素中有其他兄弟元素也不行
:only-of-type、
有兄弟元素也没关系啦 只要父元素里指定的元素只有一个就好啦
:empty
div:empty {background: #f00; }
把空的找出来 就可以给样式啦
否定选择器，被选中的 执行
举例
导航中不要最后一条线啦
nav > a:not(:last-of-type) { border-right: 1px solid red; }
12、伪元素 （伪造出来的，在html中找不到）两个冒号是为区别选择器
::first-line 文本首行
div::first-line {
color: #f00;
font-weight: bold;
}
::first-letter 文本首字母
div::first-letter {
color: #f00;
font-size: 24px;
font-weight: bold;
}
::before 元素前插入内容 行内元素
div::before {
content: "我在内容的前面";
}
::after 元素前插入内容 行内元素 多用于清除浮动
div::after {
content: "我在内容的后面";
}
::seletion 控制被选中的样式
div::selection {
background: red;
color: #ff0;
}
选择器权重问题
() 行内样式1000 > ID选择器 100 > 类、属性选择器和伪类选择器10 >元素和伪元素 1 > 通配符选择器。
带有上下文关系的选择器比单纯的元素选择器权重更高！
后面会覆盖前面的有冲突的选择器！
无论多少个元素组成的选择器 都没有一个class权重高！
网友评论