CSS选择器【记录】

changfeng1050 发布于2019-04-23 11:55 / 2647人阅读

摘要：基本选择器组合选择器伪类选择器伪元素选择器选择器规定了规则会应用到哪些元素上基本选择器基本选择器通配选择器元素选择器类选择器选择器属性选择器通配选择器性能最低的一个选择器元素选择器类选择器选择器属性选择器属性值为属性值有多个，其中一个值为

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">#demoa>
<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{}

云服务器 GPU云服务器 css选择器基础选择器css css选择 js css 加载器

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1363.html

前端基础知识学习记录（一）

摘要：前端基础知识学习记录一属性通过使用属性，可以选择四种不同类型的定位，会影响元素框生成的方式。相对于元素的原始位置进行定位。举例相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。前端基础知识学习记录（一） 1、CSS position 属性通过使用 position 属性，可以选择四种不同类型的定位，会影响元素框生成的方式。position 属性值的含义： static...

liuchengxu 2019-08-29 12:21 评论0 收藏0
前端学习记录（CSS篇）

摘要：，层叠样式表，将网页内容和显示样式分离，提高程序性能。它是一种专门描述结构文档的表现方式的文档，主要用于网页风格设计，包括字体大小颜色以及元素的精确定位。用于控制与之间的距离。 CSS Cascading Style Sheet，层叠样式表，将网页内容和显示样式分离，提高程序性能。它是一种专门描述结构文档的表现方式的文档，主要用于网页风格设计，包括字体大小、颜色、以及元素的精确定位。...

skinner 2019-08-29 15:33 评论0 收藏0
sass的学习记录

摘要：核心团队不懈努力，一直使其保持领先地位。自身选择器编译成自身选择器属性嵌套编译为占位符从以后就可以定义占位选择器。将局部变量转换为全局变量可以添加声明编译为默认变量的默认变量仅需要在值后面加上即可。 sass简介 SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。世界上最成熟、最稳定、最强大的专业级CSS扩展语言！兼容C...

xuweijian 2019-08-29 14:21 评论0 收藏0
CSS选择器引起的一些思考

摘要：随着这个思路，我自己尝试了一下构造选择器去匹配用户的输入，选择器语法参考另外在的帮助下也找到了用来获取按键输入的脚本，其实想法都差不多，脚本传送门搜到的版本。今天在看技术博客的时候发现这个帖子，感觉挺有趣的，于是就去挖了一下，问题已经是老问题，但是还是有很多值得注意和学习的地方。 showImg(https://segmentfault.com/img/bVbgudI?w=685&h...

wudengzan 2019-08-29 16:39 评论0 收藏0
CSS选择器引起的一些思考

摘要：随着这个思路，我自己尝试了一下构造选择器去匹配用户的输入，选择器语法参考另外在的帮助下也找到了用来获取按键输入的脚本，其实想法都差不多，脚本传送门搜到的版本。今天在看技术博客的时候发现这个帖子，感觉挺有趣的，于是就去挖了一下，问题已经是老问题，但是还是有很多值得注意和学习的地方。 showImg(https://segmentfault.com/img/bVbgudI?w=685&h...

NervosNetwork 2019-08-23 11:46 评论0 收藏0