首页 > > 网页制作 > css >

CSS选择器【记录】

2019-01-08 08:22:33来源：博客园阅读 ()

1、基本选择器

2、组合选择器

3、伪类选择器

4、伪元素选择器

CSS选择器规定了CSS规则会应用到哪些元素上

1、基本选择器

基本选择器：通配选择器、元素选择器、类选择器、ID选择器、属性选择器

/* 通配选择器、性能最低的一个CSS选择器 */ *{}
/* 元素选择器 */ element{}
/* 类选择器 */ .class{}
/* ID选择器 */ id{}
/* 属性选择器 */ element[attribute]{}

element[attribute="value"]{} /* 属性值为value */
element[attribute~="value"]{} /* 属性值有多个，其中一个值为value */
element[attribute|="value"]{} /* 属性值为value或是以value-开头 */

/* 属性值以value开头 */ element[attribute^="value"]{} /* IE7+ */
/* 属性值以value结尾 */ element[attribute$="value"]{} /* IE7+ */
/* 属性值包含value */ element[attribute*="value"]{} /* IE7+ */

2、组合选择器

组合选择器：后代选择器、子选择器、相邻兄弟选择器、兄弟选择器

/* 后代选择器 */ element element{}
/* 子选择器 */ element > element{}
/* 相邻兄弟选择器 */ element + element{}
/* 兄弟选择器 */ element ~ element{} /* IE7+ */

3、伪类选择器

伪类允许基于未包含在文档树中的状态信息来选择元素

/* 未访问 */ element:link{}
/* 已访问 */ element:visited{} /* 出于隐私原因，可以使用此选择器修改的样式非常有限，允许使用的CSS属性为color、background-color、border-color、outline-color */
/* 悬停 */ element:hover{}
/* 点击 */ element:active{}
/* 输入焦点 */ element:focus{}

/* 基于元素语言来匹配页面元素 */ element:lang(f){}
/* 匹配不符合参数选择器描述的元素 */ element:not(s){} /* IE9+ */
/* 匹配文档树的根元素 */ element:root{} /* IE9+ */

element:first-child{}
element:last-child{} /* IE9+ */
element:only-child{} /* IE9+ */
element:nth-child(n){} /* IE9+ */
element:nth-last-child(n){} /* IE9+ */

element:first-of-type{} /* IE9+ */
element:last-of-type{} /* IE9+ */
element:only-of-type{} /* IE9+ */
element:nth-of-type(n){} /* IE9+ */
element:nth-last-of-type(n){} /* IE9+ */

/* 空元素 */ element:empty{} /* IE9+ */
/* 选中状态 */ element:checked{} /* IE9+ */
/* 可用状态 */ element:enabled{} /* IE9+ */
/* 禁用状态 */ element:disabled{} /* IE9+ */
/* 锚点指向的元素为目标元素，:target伪类用于选取当前激活的目标元素 */ element:target{} /* IE9+ */

<style>
    #demo:target{ color:#f00; }
</style>

<a href="#demo">#demo</a>
<div id="demo">:target伪类使用方法</div>

<a href="https://madmurphy.github.io/takefive.css/">一个基于:target伪类的更为完善的纯-CSS加亮框</a>

4、伪元素选择器

伪元素表示所有未被包含在HTML的实体

CSS3将伪元素选择器前面的单冒号（:）改为双冒号（::）用以区分伪类选择器，但以前的写法仍然有效

/* 用于块级元素第一行的第一个字符 */ element:first-letter{}
/* 用于块级元素第一行的第一个字符 */ element::first-letter{} /* IE9+ */

/* 用于块级元素第一行 */element:first-line{}
/* 用于块级元素第一行 */element::first-line{} /* IE9+ */

element:before{}
element::before{} /* IE9+ */
element:after{}
element::after{} /* IE9+ */

element::-moz-selection{}
element::selection{} /* IE9+ */
/* 用于文档中被用户高亮的部分，只有一小部分CSS属性可以用于::selection选择器：background-color、color、text-decoration、text-shadow、outline、cursor */

element::-webkit-input-placeholder{}
element::-moz-placeholder{}
element:-ms-input-placeholder{} /* IE10+ */
element::placeholder{}