元素选择

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

关系选择器

包含选择器

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

子选择器 >

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

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

<p>元素</p>

.demo-a

<p>元素</p>

.demo-a1

相邻元素 +

选取同级的相邻元素

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

兄弟选择器 ~

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

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

属性选择器

[attribute]

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

a[target]{  
    background-color:yellow;
}
<a target="_blank">php</a>
<a target="_blank">html</a>
<a target="_top">css</a>

[attribute=value]

指定了属性和属性值

a[target=_blank]{  
    background-color:orange;				
}
<a>php</a>
<a target="_blank">html</a>
<a target="_top">css</a>

[attribute~=value]

属性包含某个单词

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

[attribute^=value]

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

a[class~=start-with]{  
    color:gray;
}
<a class="start-with-a">php</a>
<a class="start-with-b">html</a>
<a>css</a>

[attribute$=value]

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

a[class$=end-with]{  
    color:gray;
}
<a class="x-end-with">php</a>
<a class="5-end-with">html</a>
<a>css</a>

[attribute*=value]

包含指定值value的元素

a[class*=contain]{  
    color:gray;
}
<a class="x-contain-x">php</a>
<a class="5-contain">html</a>
<a>css</a>

[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;
}
<a class="start-with-a">php</a>
<a class="start-with-b">html</a>
<a>css</a>

伪类

名称 说明
: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;
}

<p lang="en">php</p>


<p lang="en-1">html</p>


<p lang="xxx">html</p>



: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;
} 

<p class='before-demo' >php</p>


<p class='before-demo2' >html</p>