menu

CSS 选择器详细介绍


文章出自个人博客https://knightyun.github.io/2018/05/02/css-selector,转载请申明


目录


基础

CSS(层叠样式表Cascading Style Sheets),用于修饰HTML网页内容,根据使用位置不同可分为三种样式:内联式,嵌入式,外部式。

  • 内联式:标签 <>内部使用,例如:

<p style = "color: red; font-size: 20px"></p>

  • 嵌入式:写在 <style></style> 之中,并放在 <head></head> 内,例如:
<head>
<!--这里放其它标签,例如 meta,link,script之类-->
<style>
p {
	color: red;
	font-size: 20px;
}
</style>
</head>
  • 外部式:写在外部 .css 文件中,使用如下方式引用:

<link rel = "stylesheet" type="text/css" href="css/index.css"> href.css 文件路径,可以是绝对路径或相对路径,相对路径类似于:../../css/index.css,绝对路径类似于:/css/index.css

选择器(Selector)

三种样式中,嵌入式外部式需要使用到选择器,也是组成 css 样式的主体例如上例中的 p { },主要分为: 元素选择器、类选择器、ID选择器、子选择器、后代选择器、通用选择器、属性选择器、伪元素选择器、组选择器、相邻同级选择器。

元素选择器(Type selector)

也叫类型选择器,可以理解为标签选择器,最基本的选择器,就是使用常见的HTML元素,例如:body { }, h { }, p { }, div { }, span { }, a { } 等。

类选择器(Class selector)

前提需要在标签内使用标记某处文档,类似:class = "myClass",然后它的选择器的格式就为:.myClass { },就是在类名前面加个小数点。

ID选择器(ID selecctor)

和类选择器类似,前提需要在标签内使用ID标记某处文档,类似:id = "myId",格式为:#myId { },就是在 ID 前加个符号 #

ID选择器与类选择器的区别: 类选择器可以使用多次,ID选择器只能使用一次,例如: <p class = "one">This is a test content, </p> <p class = "one">hello world !</p>,但是ID不能这样。 并且能同时使用多个类分别标记不同样式,例如:<p class = "one two"></p>,ID也不能这样。

子选择器(Child selector)

用于指定标签元素的子元素,使用符号 > 隔开父元素与子元素,例如: HTML:

<p1>
Hello World !!!
<p2>This is a test content</p2>
</p1>

CSS:

p1>p2 {
color: green;
font-size: 20px;
}

这里就指定了父元素 p1 的子元素 p2 的样式,但是只作用于子元素,不作用于父元素

后代选择器(Descendant selector)

用于指定标签元素的后代元素,使用空格符号隔开,例如: html:

<p1>
Hello world !!!
<p2>
This is a <a>test</a> content
</p2>
</p1>

css:

p1 a {
color: green;
font-size: 20px;
}

这里指定了元素 p1 的后代元素 a 的样式,注意这里不是子代元素 p2,就是作用于所有指明的后代元素

子代选择器与后代选择器的区别: 顾名思义的理解,后代就是包含子代在内的所有下代的元素,可以跨越子代直接作用于孙代;而子代只包含父级的第一代子代元素。 子代选择器使用符号 > 隔开,后代选择器使用空格 隔开。

通用选择器

顾名思义,使用通配符 * 设置 html 中所有标签的样式,例如:

* {
color: red;
font-size: 20px;
}

这样就设置了HTML中所有的标签的样式了。

属性选择器(Attribute selector)

具有指定的属性(attribute)设置样式,使用方括号符号 [ ]

简单属性选择器

不用管属性值,例如:

[href] {color: red}
a [href] {color: red}
a [href] [title] {color: red}

以上格式都能实现相同效果,即具有该属性的 a 标签。

属性和值选择器

具有指定属性与其指定值的标签,格式为:

a [title = "link"] {color: red}

伪元素选择器

HTML中存在一类与元素控制内容相同的抽象元素,但是并不实际存在于HTML文档,给标签的某种状态设置样式,例如单击某内容或鼠标滑过某内容,然后设置改变的样式。伪元素种类较多,只列举几个常用例子。

:active

激活的元素设置样式,就是用户单击该标签时的样式,例如:

a:active {color: red}

则用户点击这个链接文本时颜色变为红色。

:hover

悬停状态伪元素,为用户鼠标所停靠的标签设置样式,例如:

p:hover {color: red}

则鼠标停留在该段落时,段落内容变为红色。

:focus

用于具有焦点的元素,常用就是输入框,用户点击输入框准备输入时则该输入框就具有了焦点,例如:

input:focus {background-color: green} 则点击输入框时背景颜色变为绿色。

::selection

为选中的元素设置样式,例如:

::selection {color: red}

为文档中鼠标选定的内容设置为红色字体。注意可以追加应用范围:p::selection 表示段落中选中的字体才应用该样式,不追加直接使用 ::selection 表示应用于所有内容。 火狐浏览器支持需要使用 -moz-selection

:first-child

为元素的第一子代应用样式,例如:

p:first-child {color: red}

这个比较好理解。

:nth-child()

为元素的父元素的第 n 个子代设置样式,只是括号内需要输入数字表示第几代,例如:

p:nth-child(2) {color: red}

假如p标签父元素是body,就表示为body的第二个子元素设置样式。

组选择器

为多个元素设置相同样式时,可以使用逗号分隔元素,达到同时设置的效果。例如:

p1,p1 {color: red}

表示为p1和p2 同时设置相同的样式。

相邻同级选择器

选择与指定元素同级的相邻的第一个某元素,设置样式,例如:

div+p {color: red}

表示为 p 设置样式,并且这个 p 与 div 同级,并且是与 div 相邻的第一个 p,div 内部的 p 并不包含在内。


返回顶部


技术文章推送

手机、电脑实用软件分享

微信搜索公众号: 程序骑士
wechat 微信公众号:程序骑士