html5基础选择器含义,前端基础之CSS选择器，你真的都了解吗？

最近写页面感觉有些选择器已经忘了，于是乎重新整理了一遍css选择器。你们还记得多少种选择器呢，每一种选择器的用法都还记得吗

那么下面我们一起来复习一下吧

ID选择器

以#加id名来表示, id是唯一的，同一个页面里不允许多个ID相同的元素。一般只用来强调某个页面或者某个模块，多个功能相同的模块建议使用类选择器。

我是box

#box{

color: #fff;

background: #000;

}

复制代码

类选择器

以.加上class名称来表示，下面以class 名称为 item 的元素为例

• a
• b
• c
• d

.item {

margin: 0;

padding: 0;

}

复制代码

标签选择器

直接标签名作为选择器的名称，如果使用标签选择器，那么该页面所有使用该标签的元素样式都会改变，一般不建议使用。

hello world

你好呀~

p {

color: red;

}

复制代码

属性选择器

[attr]表示选择所有带有attr属性的标签

hello world

你好呀~

p[title] {

color: red;

}

复制代码[attr=xxx]表示用来选择有attr属性且属性值等于xxx的元素，注意属性值必须完全相等

input[type=text] {

color: red;

}

// or

input[class="input text"]{

color: red;

}

复制代码[attr~=xxx] 表示包含某个类的元素，多个类中的其中一个类名必须和xxx相等

input[class~=input] {

color: red;

}

复制代码[attr|=xxx] 表示选择属性值为xxx(这里必须是相等的)或者 以xxx-属性开头的元素

box

box

box

div[class|=box] {

color: red;

}

复制代码[attr^=xxx]表示选择以xxx属性开头的元素

box

box

box

div[class^=box] {

color: red;

}

复制代码[attr$=xxx]表示选择以xxx属性结尾的元素

box

box

box

div[class$=red] {

color: red;

}

复制代码[attr*=xxx]表示选择属性值中包含xxx的所有元素

box

box

box

div[class*=sm]{

color: red;

}

复制代码

通配符选择器

通配符顾名思义，就是所有标签全部适用，把样式应用到所有元素上影响浏览器渲染效率，实际开发中不建议使用。

* {

margin: 0;

padding: 0;

}

复制代码

后代选择器

又称派生选择器，派生选择器为css2的说法。

以seletorA空格selectorB形式，表示在selectorA内部向下查找所有所有符合selectorB的元素，无论层级有多深依然会被作用。举个栗子：

段落

这是一段内容呀~

.box .inner {

color: red;

}

复制代码

当然， 后代选择器可以叠加使用，如：

.box .outer .inner {

color: red;

}

复制代码

不过值得注意的是：CSS选择器是从右到左进行匹配的，嵌套的层级越深，css选择器查找的效率就越低，以及权重就过低可能会被其他的样式所覆盖，建议酌情使用。附css权重表：

选择器

用法

权重值

!important

放在属性值后， 如color: red !important;

10000

内联样式

style="xxx"

1000

ID选择器

#box

100

类、伪类、属性选择器

.box、:hover、div[class=box]

10

标签选择器和伪元素选择器

p、:before

1

通配符* 子选择器> 相邻选择器+ 同胞选择器~

略

0

子元素选择器

以selectorA>selectorB的形式，表示只查找指定元素的直接子元素，层级为一层。

段落

这是一段内容呀~

.box > p {

color: red; // 这里只会作用在段落上

}

复制代码

相邻兄弟选择器

以selectorA+selectorB的形式，表示选择紧接在指定元素后的元素，且二者有相同父元素。

注意他只有一个兄弟呀~

标题

段落

h1 + p {

color: red; // 段落字体变红色

}

复制代码

同胞选择器

以selectorA~selectorB形式，表示选择指定元素所有符合条件的所有兄弟元素， 他可能有多个兄弟

标题

段落1

段落2

h1 ~ p {

color: red; // 段落1、2字体都变红

}

复制代码

交集选择器

以selectorA.selectorB形式，表示既符合选择器A又符合选择器B的元素

• btn1
• btn2

.item.active {

color: red; // 表示有active类的，又有item类的。

}

复制代码

并集选择器

以seltorA,selectorB逗号分隔的形式，表示不同的选择器A和选择器B的元素都应用同一种样式。

段落1

段落2

.box1, .box2 {

color: red;

}

复制代码

伪类选择器

以selector加:的的形式，CSS 伪类用于向某些选择器添加特殊的效果，这里只列举常见的几种：

表示状态：

选择器

作用

栗子

x:link

未访问的链接

a:link

x:visited

已访问的链接

a:visited

x:hover

鼠标移动到链接上

a:hover

x:active

选定的链接

a:acitve

x:focus

选定元素聚焦时的样式

input:focus

表示结构:

选择器

作用

栗子

x:first-child

第一个子元素为x

ul li:first-child

x:last-child

最后一个子元素为x

ul li:last-child

x:nth-child(n)

第n个位置的子元素x，不分元素类型

ul li:nth-child(even)

x:nth-last-child(n)

同上，倒数第n个位置的子元素x

ul li:nth-last-child(2)

x:only-child

唯一子元素为x

a span:only-child

x:only-of-type

唯一子元素为x, 且x没有其他同类型的兄弟元素

a span:only-of-type

表单相关:

选择器

作用

栗子

x:empty

空标签(有空格也不行)

span:empty

x:checked

勾选input的状态(值为true或false)

input:checked

x:disabled

表单元素是否禁用(值为true或false)

input:disabled

x:required

表单元素是必填项时设置指定样式

input:required

伪元素选择器

CSS 伪元素用于将特殊的效果添加到某些选择器

选择器

作用

栗子

x::after

在元素x的内容前面插入新内容

a:after

x::before

在元素x的内容后面插入新内容

a:before

x::first-line

为某个元素的第一行文字使用样式

p:first-line

x::first-letter

为某个元素中的文字的首字母或第一个字使用样式

p:first-letter

x::selection

给光标选中的元素x添加样式

input:selection

关于找一找教程网

本站文章仅代表作者观点，不代表本站立场，所有文章非营利性免费分享。

本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章，希望广大程序员努力学习，让我们用科技改变世界。

[前端基础之CSS选择器，你真的都了解吗？]http://www.zyiz.net/tech/detail-124089.html