css选择器效果一览

April 29, 2019

web

元素选择

* 通配全部元素
element 选择指定元素名称的所有元素,如p{}
#id id选择器
.class class选择器

关系选择器

包含选择器

空格分割,如A B。表示选择A中全部的B元素。

子选择器 `>`

A>B,选择特定父元素的元素

//举例
.demo-a > p {
    color:red;
}

元素

.demo-a

元素

.demo-a1

相邻元素 `+`

选取同级的相邻元素

.demo-b+.demo-b{
    margin-left: 40px
}

demo-b

兄弟选择器 `~`

A~B 匹配出现在 A 后面的 B。二者具有相同的父级,但不需要相邻

.demo-c1~.demo-c3{
   color:red;
}

demo-c1

demo-c2

demo-c3

属性选择器

[attribute]

选取带有指定属性的元素。

a[target]{  
    background-color:yellow;
}

[attribute=value]

指定了属性和属性值

a[target=_blank]{  
    background-color:orange;                
}

[attribute~=value]

属性包含某个单词

a[title~=great]{  
    color:gray;
}

[attribute^=value]

匹配属性值由value开始的元素。

a[class~=start-with]{  
    color:gray;
}

[attribute$=value]

匹配属性值由value结束的元素。

a[class$=end-with]{  
    color:gray;
}

[attribute*=value]

包含指定值value的元素

a[class*=contain]{  
    color:gray;
}

[attribute|=value]

表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀（"-"为连字符，Unicode编码为U+002D）开头。

典型的应用场景是用来来匹配语言简写代码（如zh-CN，zh-TW可以用zh作为value）。

与 ^= 的区别 https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

|= 匹配的值必须是单词

a[class|=start-with]{  
    color:gray;
}

伪类

:link/:visited/:active/:hover/

名称	说明
:link	未访问的链接
visited	向访问过的链接
hover	鼠标悬浮时添加的样式,不限于链接
active	点击时的高亮颜色,不限于链接

为了产生预期的效果，在CSS定义中，:active必须位于:hover之后。否则active不生效

:focus/:lang/:not

focus 输入时生效

input:focus{
    background-color:#99ffff; 
}

:lang 选择lang 属性

该lang 属性值必须是整个单词，即可是单独的，比如 lang="en"，也可后跟连接符，比如 lang="en-us"。
相当于是|=的语法糖。
默认语言与header中的申明有关。

p:lang(en){
    background-color:#66cdcc;
    color:red;
}

php

html

html

:not 反选

p {
    color:pink;
}
:not(p) {
    color:skyblue;
}

:root/:xx-child/

名称	说明
:root	文档根节点,在HTML中根元素始终是HTML元素
:first-child	用于选取属于其父元素的首个子元素
:last-child	用于选取属于其父元素的最后一个子元素
:only-child	匹配属于父元素中唯一子元素的元素
:nth-child(n)	:nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制
:nth-last-child(n)	选择器匹配同类型中的倒数第n个同级兄弟元素

xxx-of-type

名称	说明
first-of-type
last-of-type
only-of-type
:nth-of-type(n)
:nth-last-of-type(n)

:empty

选择器选择每个没有任何子级的元素（包括文本节点）

其他

名称	说明
:checked
:enabled
:disabled
:target
~~@page :first~~
~~@page :left~~
~~@page :right~~

伪对象选择符

名称	说明
:first-letter	指定元素第一个字母的样式
:first-line	指定选择器第一行的样式
::before	向选定的元素前插入内容。需要和content 属性一起使用，使用content 属性来指定要插入的内容。
::after	向选定的元素之后插入内容。需要和content 属性一起使用，使用content 属性来指定要插入的内容。
::placeholder	设置对象文字占位符的样式可能有兼容性问题
::selection	匹配元素中被用户选中或处于高亮状态的部分

其中::before和::after比较常用。

::before和:before的区别: 双冒号是css3规范的写法,如果兼容IE浏览器，使用单冒号好些
常通过 content 属性来为一个元素添加修饰性的内容
元素默认为行内元素
几乎可以用任何方法定义 content 中的文字和图片样式

p{
    color:black;
    padding:0;
    margin:3px;
    display:inline-block;
    border: 1px solid black;
}    

p.before-demo::before {
  content: "♥";
  color: red;
}

p.before-demo2::before {
  content: url(http://www.mozilla.org/favicon.ico) " MOZILLA: ";
  font: x-small Arial,freeSans,sans-serif;
  color: gray;
}

) " MOZILLA: "; font: x-small Arial,freeSans,sans-serif; color: gray; }

php

html