欢迎使用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(输入的值在区间内的样式)