前端 - css - 选择器

来源：互联网发布：分水岭算法的用途编辑：程序博客网时间：2024/05/20 18:29

欢迎加入本人创建的js交流群 558052642

css选择器

css样式是由一条或多条以分隔号隔开的样式声明组成的；类似于javascript中的对象写法;

一 css样式表创建的3种方式:

元素内嵌样式元素的style属性

(2) 文档内嵌样式 style标签

<style>

color:blue;

font-size:40px;

}

</style>

(3) 外部引用样式 link标签

二 css选择器:

三大核心选择器: （1）元素选择器（2）id选择器 (3)class选择器

元素选择器 (直接使用元素名称作为选择器名,如img)、

1. 所有标签都能够当做选择器，比如 h1,dl,ul,div等

2. 不管这个标签隐藏多深，都能够被选上

3. 选择是所有的，而不是某一个，所以是共性；在项目中，用于设置某一类元素的通用样式;

比如 a {

text-decoration: none; //去掉下划线

}

（2） ID选择器 (#) (通过对元素设置id属性，然后使用#id来选择页面唯一元素)

1. id的命名规则: 以字母开头，可以有数字，下划线；大小写严格区分

2. 同一个页面只能有id，即使不一样的标签，也不能用相同的ID

3. id一般是给JS代码使用，css一般使用class

#abc {

font-size: 20px;

}

（3） .class选择器 (.) (通过对元素设置全局属性class，然后使用.class来选择一个或多个元素)

1. 一个元素可以属于多个类 class= "class1 class2 class3" 多个类名用空格隔开

2.一个类也可以有多个元素，即多个元素都有同一个class

3. 项目中的css，一般是class选择器

重点:

1). 不要试图用一个类名，把某个标签的所有样式写完，这个标签可以多携带几个类，共同形成这个标签的样式；

2）每个类要尽可能的小，有"公共的"概念，使css样式表能够复用

.abc {

border: 1px solid red;

}

前面的 id选择器和 class选择器本质上都是属性选择器，不过是两个比较特殊的属性;

下面来看普通的属性选择器:

(4) 属性选择器:

1. 只要具有该属性名，元素就会被选中

所需版本css2

a[href] { }

[href] { }

2. 具有该属性名，且属性值相等，则元素会被选中

所需版本css2

[href^="http"]{

}

a[href^="http"]{

}

3.属性值开头匹配的属性选择器，只要属性值开头部分的子串相等，元素会被选中 (子串相等)

所需版本css3

[href^="http"]{

}

4.属性值结尾匹配的选择器匹配属性值结尾的子串

所需版本css3

[href$=".com"]{

}

5.属性值任意子串匹配的选择器匹配属性值中任意的子串

所需版本css3

[href *= "hello"]{

}

关于 [~=] , [!=] 不常见，忽略掉

三复合选择器

1. 分组选择器: 也成并集选择器 (,) (只要满足一个匹配条件就会被选中)

p, div, #box div {

}

将多个选择器通过逗号分隔，同时设置一组样式。只要满足其中一个匹配条件的元素就会被匹配；

2.交集选择器 (需要所有的匹配条件都满足才会被选中，交集选择器没有空格，紧挨着写的)

交集选择器，一般以标签名开头；比如p.sepcial

任何多个选择器都可以相互组成交集选择器;比如:

div#box.main {

}

在伪类，伪元素中出现得比较多，其中a:hover, a[href="http"]等

3. * 通配符选择器 *表示匹配所有元素

效率不高，一般不使用

}

后代选择器，儿子选择器，相邻兄弟选择器，普通兄弟选择器:

这类选择器，是根据“节点树”来查找指定元素的；

（1）明显作为限定条件的元素只能在指定元素的前面

（2）根据被嵌套的关系，形成家族关系，被嵌套元素为子孙元素，同级为兄弟元素

2. 后代选择器 (空格)

空格表示后代，只被该元素嵌套的所有元素

p b {

}

<p>元素中的子孙元素中进行匹配，不在乎嵌套层次深度；

3. 子选择器 (>)

ul > li {

}

子选择器类似于后代选择器，但是子选择器只能是父元素向下一级的元素，不可以再往下选择.

4. 相邻兄弟选择器 (注意一定要相邻，且是下一个元素)

p+b {

}

指定元素的同级且后一个元素进行条件匹配；

5. 普通兄弟选择器

p ~ b {

}

指定元素的后面的所有元素进行条件匹配；

伪元素选择器和伪类选择器都属于过滤性的选择器；(限定元素)

也就是说，它们只是作为已经选定的一个集合，进行过滤，所以使用它们，几乎都是以交集选择器的形式出现;(可能你觉得当做单独的选择器也可行，但是别人几乎是按照上面的规则在使用)

四伪元素选择器 (:) -> 操作内容

首先明确: 了解就好，因为完全可以用基础选择器代替的；只不过这类选择器更具有模糊匹配性，不过标签，总是找内容的指定部分；

1. 块级首行 ::first-line

div::first-line{

}

2. 块级首字母 ::first-letter

p::first-letter{

}

3.文本前插入 ::before

a::before{

content:’点击-’;

}

4.文本后插入 ::after

a::after {

content:’-请进’

}

五伪类选择器 (看上去很复杂，其实这类选择器只是起到被匹配到的多个选择器进行过滤的作用，也几乎以交集选择器的形式出现)

(1) 结构性伪类

:first-child

:last-child

:only-child

only-of-type

nth-child(n)

上面的伪类选择器有一个共性: 就是把所有的子元素当做一个数组集合，通过index进行匹配选择;

其使用环境：一般是子元素都是同一个元素，比如<li>

1. :first-child 选择第一个子元素

ul > li:first-child{

}

:first-child 仅仅作为 <li>的过滤条件，即第一个<li>

解释为: ul下的第一个元素，且元素名为li 的元素;

注意:而不是ul下的第一个li

2. :last-child 选择最后一个元素

ul>li:last-child{

}

:last-child 仅仅作为<li>的过滤条件，选择<ul>子元素集合中的最后一个<li>

解释为: ul下的最后一个元素，且为<li>的元素

注意: 不是ul下的最后一个li

3. :only-child 明显判断了子元素集合的个数

ul>li:only-child { 当只有一个li

}

ul :only-child{

}

解释为： ul下子元素只有唯一一个，且元素名为li的元素

注意：而不是ul下唯一的li，

4. :nth-child(n) 系列下标从1开始的, 下标可以为负数

ul > li:nth-child(2){

}

解释为: ul下子元素中的第二个元素，且元素名字为<li>

5. :nth-last-child(n)系列

ul > li:nth-last-child(2){

}

解释为: ul下子元素中的倒数第二个元素,且元素名字为<li>

6. :nth-of-type(index)

解释为ul下子元素中的第二个li元素，不过第二个li所在的index

:nth-last-of-type(index)

解释为ul下子元素中的倒数第二个li元素，不过第二个li所在的index

:first-of-type 子集合中的第一个指定元素

:last-of-type 子集合中的最后一个指定元素

:only-of-type 子元素中某个元素只有一个时选中

关于 :nth-child(n) 与：nth-of-type(n)的区别

例一

<ul>

</ul>

选择器为:

ul > li:nth-child(2) {

color:red;

}

ul > li :nth-of-type(2){

color:red;

}

上面两个选择器实现的效果一样，都是第二个<li>变红;

但是解释不同：

ul > li:nth-child(2) 解释为: ul中子元素集合的第二个，且为li的元素；

ul > li:nth-of-type(2) 解释为: ul中的 li元素的第二个；

例二

<div>

</ul>

选择器为:

ul > p:nth-child(2) {

color:red;

}

ul > p :nth-of-type(2){

color:red;

}

结果为第一个选择器没有选中的元素，而第二个选择器把最下面的<p>选中

(2) UI伪类（作用于表单元素）依然是起过滤作用，交集形式出现

UI伪类选择器是根据元素的状态匹配元素 ->表单元素

:enabled

选择启用状态的元素，一般是input

:disabled

选择禁用状态的元素

:checked

选择勾选状态的input元素

:default

选择被默认的元素， input被勾选即默认状态

:valid :invalid

输入验证合法与不合法显示时选择的元素 (input)

:required

必填项

:optional

可选项

(3) 动态伪类针对<a>标签

:link

:link表示未访问过的超链接

:visired

:visited表示已经访问过的超链接

:hover

鼠标悬停状态选中

:active

表示鼠标按下激活超链接时

:focus

获得焦点时

(4) 其他伪类

:not()

否定选择器：对某类符合条件的选择器进行反转

a:not([href*="baidu"]){

color: red;

}

满足()内条件的不被选中，不满足条件内的被选中

:empty

匹配空标签元素，即标签内不包含文本

:lang

含有lang属性，且属性值前缀为en的元素

:target

定位到锚点时，选择此元素

::section

伪元素选择器，当选中文字时触发选择；

兼容性:

css1 :

::first-line IE6不支持

::fist-letter IE6不支持

.classname.classname 交集选择器写法 IE6不支持

css2:

后代选择器： p > b IE6不支持

相邻兄弟选择器: div + p IE6不支持

属性选择器:

E[attr] IE6不支持

E[attr="name"] IE6不支持

E[attr^="name"] IE6不支持

E[attr*="name"] IE6不支持

E[attr~="name"] IE6不支持

E[attr"|=name"] IE6不支持

伪元素选择器:

E:before, E:after IE6,IE7不支持

伪类选择器: first-child IE6不支持

last-child IE6,7,8 不支持

only-child IE6,7,8 不支持 safari3.0不支持

nth-child IE6,7,8 不支持 safari3.0不支持 firefox3不支持

nth-last-child IE6,7,8 不支持 safari3.0不支持 firefox3不支持

only-of-type

first-of-type IE6,7,8 不支持 safari3.0不支持 firefox3不支持

last-of-type IE6,7,8 不支持 safari3.0不支持 firefox3不支持

nth-of-type IE6,7,8 不支持 safari3.0不支持 firefox3不支持

nth-last-of-type IE6,7,8 不支持 safari3.0不支持 firefox3不支持

聚焦： E:focus IE6,IE7不支持

E:enabled IE6,IE7,IE8不支持

E:disabled IE6,IE7,IE8不支持

E:checked IE6,IE7,IE8不支持

E:not() IE6,IE7,IE8不支持

E:empty IE6,IE7,IE8不支持

E:target IE6,IE7,IE8不支持

E::section IE6,IE7,IE8不支持 FF3.5 需要前缀 MOZ-

window xp -> IE6 4.11%

window vista -> IE7 4.79%

windows 7 -> IE8 21.19%

windows 8 -> IE9

windows 10 -> IE edge

一般兼容到 IE8及以上

0 0