CSS选择器类型总结
CSS选择器类型总结
1.通用选择器
一般用于给所有元素做一些通用性的样式设置，比如清除内边距、外边距等。但是效率比较低，尽量不要使用。
* {
margin: 0;
padding: 0;
}
2.元素选择器
也叫做“标签选择器”，用于选中一类标签进行样式设置。
div { color: #ff0000; }
span { font-size: 18px; }
3.类选择器
给元素添加class属性，通过
.class属性值来选中元素。
- 一个元素可以有多个class值，每个class值之间用空格隔开；
- class值如果由多个单词组成，单词之间可以用
中划线-、下划线_，也可以使用驼峰标识； - 最好不要用标签名作为class值；
.box {
width: 100px;
height: 100px;
background-color: #ff0000;
}
<div class="box"></div>
4.id选择器
给元素添加id属性，通过
#id属性值来选中元素。
- 一个HTML文档里面的id值是唯一的，不能重复；
- id值如果由多个单词组成，单词之间可以用
中划线-、下划线_，也可以使用驼峰标识； - 最好不要用标签名作为id的值；
#container { color: #ff0000; }
<div id="container"></div>
5.属性选择器
-
[attr]：选中拥有attr属性的元素；/* 选中拥有title属性的元素 */ [title]: { color: #ff0000; }<div title="one">内容</div> -
[attr=val]：选中attr属性值恰好等于val的元素；/* 选中title值恰好等于one的元素 */ [title="one"] { color: #ff0000; }<div title="one">内容</div> -
[attr*=val]：选中attr属性值包含单词val的元素；/* title属性值包含单词one的元素 */ [title*="one"] { color: #ff0000; }<div title="one">内容1</div> <p title="aaaone">内容2</p> <span title="one-two">内容3</span> -
[attr^=val]：选中attr属性值以val开头的元素；/* title属性值以单词one开头的元素 */ [title^="one"] { color: #ff0000; }<div title="one">内容1</div> <span title="one-two">内容2</span> <p title="one two">内容3/p> -
[attr|=val]：选中attr属性值恰好等于val或以单词val开头后面紧跟连字符-的元素；/* title属性值恰好等于one或者以单词one开头且后面跟着连字符-的元素 */ [title|="one"] { color: #ff0000; }<div title="one">内容1</div> <span title="one-two">内容2</span> -
[attr~=val]：选中attr属性值包含单词val的元素（单词之间必须用空格隔开）；/* title属性值包含单词one的元素（单词one与其他单词之间必须用空格隔开） */ /* 效果类似于类选择器 */ [title~="one"] { color: #ff0000; }<div title="one">内容1</div> <p title="one two">内容2</p> -
[attr$=val]：选中attr属性值以单词val结尾的元素；/* title属性值以单词one结尾的元素 */ [title$="one"] { color: #ff0000; }<div title="two-one">内容1</div> <p title="two one">内容2</p>
6.后代选择器
选择指定元素下的子元素，包括直接和间接子元素，使用空格进行隔开。
/* 选择div下所有span元素 */
div span { color: #ff0000; }
<div>
<span>文字内容1</span>
<p>
<span>文字内容2</span>
</p>
</div>
7.子代选择器
选择指定元素下的直接子元素，不包括间接子元素，使用
>。
/* 选择div元素下的直接span元素 */
div > span { color: #ff0000; }
<div>
<span>文字内容1</span>
</div>
8.兄弟选择器
-
相邻兄弟选择器
+：选择某元素后面紧挨的兄弟元素；/* div元素后面紧挨的p元素 */ div + p { color: #ff0000; }<div></div> <p>内容</p> -
全兄弟选择器
~：选择某元素后面的兄弟元素，不需要紧挨；/* div元素后面的p元素 */ div ~ p { color: #ff0000; }<div></div> <p>内容1</p> <p>内容2</p>
9.交集选择器
选择同时符合多个条件的元素。
/* 选择div元素且class为one的 */
div.one { color: #ff0000; }
/* 选择div元素且class为one且title属性值等于one的 */
div.one[title="one"] { color: #ff0000; }
<div class="one" >内容1</div>
<div class="one" title="one">内容2</div>
10.并集选择器
不同选择条件，中间用
,连接，进行全部选中。
/* 所有的div元素 + 所有class值有one的元素 + 所有title属性值等于one的元素 */
div, .one, [title="one"] { color: #ff0000; }
<div>内容1</div>
<span title="one">内容2</span>
<p class="one">内容3</p>
11.伪类选择器
11.1.动态伪类
:link：a:link未访问的链接；:visited：a:visited已访问的链接；:hover：a:hover鼠标移动到链接上；:active：a:active激活的链接（鼠标在链接上长按未松开）；:focus：当前拥有输入焦点的元素（能接收键盘的输入，一般为input）；
注意点：
:hover必须放在:link和:visited后面才能完全生效；:active必须放在:hover后面才能完全生效；- 建议编写顺序：link、visited、focus、hover、active；
- 处理a元素，
:hover和:active也能用于其他元素；
11.2.目标伪类和语言伪类
-
目标伪类：
:target； -
语言伪类：
:lang；
11.4.元素状态伪类
:enabled：可用的；:disable：禁用的；:checked：选中的；
11.5.结构伪类
-
:nth-child(n)：父元素中的第n个子元素（n代表任意正整数和0，也可用even（偶数）和odd（奇数））；/* 选中所有父元素下的第一个为p的元素 */ p:nth-child(1) { color: #ff0000; } -
:nth-last-child(n)：与:nth-child相反，父元素中倒数第n个子元素；/* 选中父元素下倒数第一个为p的元素 */ p:nth-last-child(1) { color: #ff0000; } /* 选中最后两个为p的元素 */ p:nth-last-child(-n + 2) { color: #ff0000; } -
nth-of-type(n)：计数时只计算同种类型的元素；/* 选中父元素下所有p元素中的第二个p元素 */ p:nth-of-type(2) { color: #ff0000; } -
:nth-last-of-type(n)：从后往前计算同种类型的元素；/* 选中父元素下所有p元素中倒数第二个p元素 */ p:nth-last-of-type(2) { color: #ff0000; } -
:first-child：等同于:nth-child(1)； -
:last-child：等同于:nth-last-child(1)； -
:first-of-type：等同于:nth-of-type(1)； -
:last-of-type：等同于:nth-last-of-type(1)； -
:only-child：是父元素中唯一的子元素； -
:only-of-type：是父元素中唯一的指定类型的元素； -
:empty：里面完全空白的元素，不包含子元素和内容； -
:root：根元素，就是html元素；
11.6.否定伪类
:not()的格式是：not(x)表示除x以外的元素（x表示简单的选择器，可以是元素、通用、属性、类、id、伪类（除否定伪类）选择器等）。
/* 选中父元素下所有p元素不是第一个和最后一个的p元素 */
p:not(:first-of-type):not(:last-of-type) { color: #ff0000; }
注意：:not()只支持简单选择器，不支持组合选择器，比如交集和并集选择器等。
