欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

CSS选择器【记录】

程序员文章站 2022-08-12 08:32:33
1、基本选择器 2、组合选择器 3、伪类选择器 4、伪元素选择器 CSS选择器规定了CSS规则会应用到哪些元素上 1、基本选择器 基本选择器:通配选择器、元素选择器、类选择器、ID选择器、属性选择器 2、组合选择器 组合选择器:后代选择器、子选择器、相邻兄弟选择器、兄弟选择器 3、伪类选择器 伪类允 ......

 

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{}