css3样式选择器{后面有思维结构图}

71 阅读 0 评论 47 点赞

我是靠谱客的博主幸福冬瓜，最近开发中收集的这篇文章主要介绍css3样式选择器{后面有思维结构图}，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

基本选择器
1.*{} 通配符选择器表示：*{}
2.class选择器 class="名" 表示：.名{}
3.id选择器 id="id名" 表示：#id名{}
4.群组选择器表示：名，名{}
1.各个选择器之间的权重：标签（001） class (0010) id (0100)
2.当选择器的权重一致时，他会按顺序执行，后面的样式会覆盖前面的样式
3.!important最高的：可以提高权重/优先。
-----------------------------------------------------------------------------------------------------------
通配符
^ 功能描述：匹配起始符
示例：span[class^=span] 表示选择以类名以“span”开头的所有span元素
$ 功能描述：匹配终止符
示例：a[href$=pdf] 表示选择以“pdf”结尾的href属性的所有a元素
* 功能描述：匹配任意字符
示例：a[title*=site] 匹配a元素，而且a元素的title属性值中任意位置有“site”字符的任何字符串
-----------------------------------------------------------------------------------------------------------
层次选择器
1.包含选择器（后代选择器）
标签标签：选择后面的标签匹配，且匹配的标签包含在前面的标签内
2.子选择器
标签>标签：选择后面的标签，且匹配的后面的标签是所匹配的前面的子元素
3.相邻兄弟选择器
标签+标签：相邻着紧挨着的后一个元素例：p:hover+a
4.通用选择器
标签~标签：后面所有的元素例：p：hover~a
--------------------------------------------------------------------------------------------------------------
链接伪类选择器
a:link：未访问链接时的状态
a:visitteds：链接已经访问过的状态
a:hover：改变超链接鼠标移动上去的颜色
a:active:鼠标点击一瞬间的颜色【必须在hover之后使用】
注：【hover】可以用在p标签上如果全要用到，顺序如下：link visitteds hover active
-------------------------------------------------------------------------------------------------------------
伪对象选择器【伪元素选择器】
1.:after或者::after
语法：div:after{content:”文字”} div:after{content:url();}
说明：与content属性一起使用，定义在对象后的内容。
2.:before或者::before
语法：div:before{content:”文字”} div:before{content:url();}
说明：与content属性一起使用，定义在对象前的内容。
3.:first-letter或者::first-letter
语法：div:first-letter
说明：定义对象内第一个字符的样式，注：该伪元素只能用于块元素
4.:first-line或者::first-line
语法：div:first-line
说明：定义对象内第一行的样式，注：该伪元素只能用于块元素
5.::selection
语法：div::selection
说明：选中之后的样式只支持这background color属性和color属性 0
------------------------------------------------------------------------------------------------------------
表单常用选择器
focus焦点
语法：选择器：focus{ outline: none; border: 1px solid green;}
作用：input框获取焦点之后的样式操作
outline轮廓
定义：是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
作用：清除input框获取焦点之后的样式。
语法：outline：none
checked选中
定义：元素选中之后的样式操作
作用：美化单选框与复选框选中之后的样式
语法：选择器：checked{}
appearance清除
语法：appearance：none
作用：清除单选框、复选框、下单菜单的样式
注：浏览器不支持清除样式时，可这样表示【-webkit-appearance：none】
------------------------------------------------------------------------------------------------------------
属性选择器
语法：[标签属性]{} 属性选择器无法识别： // . 这些带特殊符号的属性需要加""
1.E[attr]
希望选择有某个属性的元素，而不论属性值是什么
例如：a[href]{color:red;}
2.E[attr=”value”]
除了选择拥有某些属性的元素，还可以进一步缩小选择范围，
只选择有特定属性值的元素
例如: a[href=”www.baidu.com”]{color:red;}
3.E[attr^=”value”]
指定了属性，并且指定了属性值，属性值是以value开头的
例如：a[title^="text"] {color: red;}
4.E[attr$=”value”]
指定了属性，并且指定了属性值，属性值是以value结尾的
例如：a[title$="text"] {color: red;}
-----------------------------------------------------------------------------------------------------------
结构伪类选择器
1.：first-child{选择第一个元素}
2.：last-child{选择最后一个元素}
3.：nth-child（）{第几个元素或者是odd奇数和even偶数}
4.：nth-last-child（）{选择某个元素的一个或多个特定的子元素，最后一个子元素开始算}
5.：first-of-type{选择一个上级元素下的第一个同类子元素}
6.：last-of-type{选择一个上级元素的最后一个同类子元素}
7.：nth-of-type（）选择指定的元素只计算选择器指定的那个元素
8.：nth-last-of-type（）选择指定的元素，从元素的最后一个开始计算
9.：only-of-type 选择一个元素是它的上级元素的唯一一个相同类型的子元素
10.：empty 选择的元素里面没有任何内容
11.：root 选择文档的根元素
12.：only-child 选择的元素是它的父元素的唯一一个子元素；
---------------------------------------------------------------------------------------------------------------
状态伪类选择器
常用处：表单控件
1.disabled 禁用表单的样式
2.enabled 正常使用的表单的样式
3.checked 选中之后的样式
4.focus 获取焦点后的样式
------------------------------------------------------------------------------------------------------------
否定伪类选择器
语法：属性:not()
除了什么什么可以让你定位不匹配该选择器的元素
------------------------------------------------------------------------------------------------------------
目标伪类选择器
:target
选择器可用于选取当前活动的目标元素。
定义：使用该选择器来对页面中的某个target元素
（该元素的id当做页面中的超链接来使用）指定样式，
该样式只在用户点击了页面中的超链接，并且跳转到target元素后起作用。