欢迎使用CSDN-markdown编辑器

CSS选择器

CSS的选择器很多，大致有以下分类

• 1.元素选择器
• 2.类选择器
• 3.ID选择器
• 4.属性选择器
• 5.后代选择器
• 6.子元素选择器
• 7.相邻兄弟选择器
• 8.结构性伪类选择器
• 9.root、not、empty、target
• 10.UI元素状态伪类选择器

---

1.元素选择器

1.1文档的元素就是选择器。h1{},a{}等。
1.2选择器分组h1,h2{}
1.3通配符*{}

2.类选择器

2.1独立于文档元素 .class{}
2.2结合元素选择器 a.class{}
2.3多类选择器 .class.class{}有两者兼得的效果也可定义更多样式

3.ID选择器

只能使用一次不可重复使用不能结合其他使用 #id{}

4.属性选择器

有通配符的概念：
包含字符[att*=val]
首字符[att^=val]
尾字符[att$=val]

4.1[title]{}
比如：<p title=“”>hello</p>，样式为[title]{color:…
4.2根据具体属性值选择，进一步缩小选择范围。
比如a[href=“http://www.baidu.com”]{}
4.3属性和属性值必须完全匹配
4.4根据部分属性选择，例如样式[title~=title“”]{}：~是模糊选择，只要有title就被选择

5.后代选择器

选择某元素的后代元素<p><i>……</i></p> 样式中：p i{}，后代选择器可以找后代，不只是子元素

6.子元素选择器

first-child 第一个
last-child 最后一个
nth-child(xn+y) 第x个子元素
nth-last-child(xn+y) 倒序第xn+y个子元素(odd奇数，even偶数)

nth-of-type，nth-last-of-type
只针对同类型的子元素进行计算

only-child
只有一个子元素的时候才使用

7.相邻兄弟选择器

选择紧接在另一个元素后的元素，二（多）者有相同的父元素，当前元素不起效果

/* 处在同一个父级元素中的子元素 div后面的p元素加上样式*/
div ~ p{
background: coral;
}

8.结构性伪类选择器

8.1伪类选择器
css中已经定义好的，不能随便取名；例：a:link、a:hover、a:active、a:visited
8.2伪元素选择器
first-line：某元素第一行文字
first-letter：某元素第一个字或首字母
before：在元素之前插入内容 li:before()
after：在元素之后插入内容 li:after()

9.root、not、empty、target

9.1 root 将样式绑定在页面根元素中 :root{}
9.2 not 对当前元素加载样式，not()中元素除外 div *:not(h1){}
9.3 empty 当前内容为空时使用该样式 :empty{}
9.4 target 点击之后，对其target元素加载样式 :target{}

10.UI元素状态伪类选择器

样式只有当元素处于某状态时才起作用
hover鼠标略过
active按中不放开
focus点击
disable失效
read-only只读
checked选中(checkbox)
default默认选中
indeterminate任何一个单选框都没有被选中的样式，一旦有选中，样式取消(只有Opera支持)
selection(选取部分的样式，如选中一部分文本 ::selection)
invalid(表单元素中的值是非法时设置指定样式，如max、min值，email格式 input:invalid)
valid(表单元素中的值是合法时设置指定样式)
required(必选项)
optional(未设置required的选项)
in-range(输入的值在区间内的样式)