CSS 选择器内容

元素选择器

为某个元素设置样式

h1 {color:blue;}

类选择器

在 CSS 中,类选择器以一个点号显示:

.center {text-align: center}

id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

id 选择器以 "#" 来定义。

#firsrt {color:red;}

属性选择器

对带有指定属性的 HTML 元素设置样式。

属性选择器

为带有title属性的所有元素设置样式

[title]{color:red;}
属性和值选择器

为所有属性title的值为abc的元素设置样式

[title=abc]{color:red};
属性和值选择器 多个值

所有属性值包含制定词汇abc的元素(abc与其他单词用空格隔开)设置样式

[title~=abc] { color:red;}
属性和值选择器 多个值

为所有title属性值包含abc的元素设置样式

[title*="abc"]{color:red;}
属性和值选择器 以某个值开头

为所有title属性值以abc开头的元素设置样式

[title^="abc"]{color:red;}
属性和值选择器 以某个值结尾

为所有title属性值以abc结尾的元素设置样式

[title$="abc"]{color:red;}

后代选择器

后代选择器可以选择作为某元素后代的元素

后代选择器在父元素与子元素之间用空格隔开

div h1{color:red;}

子代选择器

子元素选择器(Child selectors)只能选择作为某元素的直接子元素

div>span{color:red;}

相邻兄弟选择器

可选择紧接在另一元素后的元素,且二者有相同父元素。

div元素后面紧挨着的p元素(且div、p元素必须是兄弟关系)

div+p{color:red;}

全体兄弟选择器

可选择在另一元素后的所有元素,且这些元素有相同父元素。

div元素后面的p元素(且div、p元素必须是兄弟关系)

div~p{color:red;}

选择器组 交集选择器

同时符合所有条件的元素

同时符合2个条件的元素:div元素、class值有one

div.one{color:red;}

所有同时符合3个条件的元素:div元素、class值有one、title属性值等于test

div.one[title="test"]{color:red;}

选择器组 并集选择器

至少符合一个条件的元素,不同条件之间用逗号隔开

所有的div元素 + 所有class值有one的元素 + 所有title属性值等于test的元素

满足这三个条件中的一个就可以

div, .one ,[title="test"]{color:red;}

伪类 动态伪类

链接常用伪类

a:link 未访问的链接
a:visited 已访问的链接
a:hover 鼠标挪动到链接上
a:active 激活的链接(鼠标在链接上长按住未松开)

a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}

使用注意
:hover必须放在:link和:visited后面才能完全生效
:active必须放在:hover后面才能完全生效
除了a元素,:hover、:active也能用在其他元素上

:focus

:focus指当前拥有输入焦点的元素(能接收键盘输入)

因为链接a元素可以被键盘的Tab键选中聚焦,所以:focus也适用于a元素

文本输入框一聚焦后,背景变红

input:focus{background:red;}

伪类 结构伪类

:nth-child(n)

父元素中的第n个子元素

父元素下第n个元素,若为p元素则有效

p:nth-child(n){color:red}
:nth-last-child

:nth-last-child()的语法跟:nth-child()类似,不同点是:nth-last-child()从最后一个子元素开始往前计数

倒数第一个子元素

:nth-last-child(1),
:nth-of-type( )、:nth-last-of-type( )

:nth-of-type()用法跟:nth-child()类似,不同点是:nth-of-type()计数时只计算同种类型的元素

父元素下第n个类型为p的元素

p:nth-of-type(n){color:red;}
否定伪类 :not

:not()的格式是:not(x)

x是一个简单选择器
元素选择器、通用选择器、属性选择器、类选择器、id选择器、伪类(除否定伪类)
:not(x)表示除x以外的元素

除了p元素以外的元素

:not(p){color:red}

伪元素

为了区分伪元素和伪类,建议伪元素使用2个冒号,比如::first-line

伪元素 ::first-line、::first-letter

::first-line可以针对首行文本设置属性

div::first-line{color:red;}

::first-letter可以针对首字母设置属性

div::first-letter{color:red;}
伪元素::before和::after

::before和::after用来在一个元素的内容之前或之后插入其他内容(可以是文字、图片)

content属性为必须有的

div前插入一张图片

div::before{content:url("./abc.png")};

div后插入一句话

div::after{content:"ymz";};
02-14 04:23