css选择器超全笔记_css同级class筛选-CSDN博客

本文链接：https://blog.csdn.net/qq_39840183/article/details/110467055

一、css常用的选择器

id选择器
1. 通过元素的ID属性选中唯一的一个元素，
2. 语法为：#id属性值{}
类选择器
1. 通过元素class属性值选中一组元素，
2. 语法为：.class属性值{}
3. 拥有相同class属性值的元素，我们可以称他们是一组元素
4. 可以同时为一个元素设置多个class属性值，多个值之间使用空格隔开
通配选择器
1. 可以用来选中页面中的所有元素，
2. 语法：*{ }
3. 选择div里面所有的元素：div *

二、css复合选择器

1）复合选择器（交集选择器）

可以选中同时满足多个选择器的元素，
语法：选择器1选择器2，一般是针对class选择器，ID选择器一般不选择

<head>
     <style>
         .red{
             color:red;
         }
         p.red{
             font-size:40px;
         }
     </style>
 </head>
 <body>
     <div class="red">熊大</div>
     <p class="red">小强</p>
 </body>

2）选择器分组（并集选择器）

通过选择器分组可以同时选中多个选择器对应的元素，
语法：选择器1，选择器2，选择器n{}

3）后代元素选择器：

1. 父元素：直接包含子元素的元素
2. 子元素：直接被父元素包含的元素
3. 祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素
4. 后代元素：(包含儿子、孙子、重孙子等）直接或间接被祖先元素包含的元素，子元素也是后代元素
5. 兄弟元素：拥有相同父元素的元素

作用选中指定元素的指定后代元素
语法：祖先元素后代元素{ }

4）子元素选择器：

为div的子元素span设置一个背景颜色
作用：选中指定父元素的指定子元素
语法：父元素>子元素
说明：IE6以下的浏览器不支持子元素选择器

5）兄弟元素选择器

（1）后一个兄弟元素选择器
1. 作用：可以选中一个元素后紧挨着的指定的兄弟元素
2. 语法：
3. A + B------前一个+后一个

/*为span后的一个p元素设置一个背景元素*/ span + p{ background-color:red; }

（2）选中后边的所有兄弟元素
1. 语法：A ~ B
2. ---------前一个~后边所有，即选中A元素后边含B的所有元素

6）属性选择器

作用：可以根据元素的属性或属性值来选取指定元素
语法：
1. [属性名]--------选取含有指定属性的元素；
2. [属性名=“属性值”]------表示选取含有指定属性值的元素
3. [属性名^=“属性值”]-------表示选取属性值以……开头的元素
4. [属性名$=“属性值”]--------表示选取属性值以……结尾的元素
5. [属性名*=“属性值”]---------表示选取属性值包含指定内容的元素
title属性，可以给任何标签指定，当鼠标移动到元素上时，元素中的title属性值将会作为提示文字显示
1. 比如<p title="hello">我是一个段落</p>,为所有具有title属性的p元素，设置一个背景颜色为黄色

p[title] {
 background-color:red; 
}

为title属性值是hello的元素设置一个背景颜色

p[title=“hello”] {
 background-color:red;
 }

三、伪类选择器（css3)

1. 伪类专门用来表示元素的一种的特殊状态。常常带有冒号----：
2. 比如：访问过的超链接，普通的超链接，获取焦点的文本框
3. 当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类

（1）根据访问者与该链接的交互方式，将链接设置成4种不同状态

1. 正常链接(没访问过的链接)：---a:link{ }
2. 访问过的链接：----a:visited{ }
3. （浏览器是通过历史记录来判断一个链接是否访问过。由于涉及到用户的隐私问题，所以使用visited伪类只能设置字体颜色）
4. 鼠标滑过的链接：-----a:hover{ }
5. （也可给除了a以外的标签元素进行，IE6中不支持对超链接以外的元素设置）
6. 正在点击的链接：------a:active{ }
7. （也可给除了a以外的标签元素进行设置，IE6中不支持对超链接以外的元素设置）
  1. ----如果同时写了hover和active，则hover样式得写在：active前面
  2. 写样式时需要注意顺序，最好按“lvha"顺序

（2）子元素选择器(结构/位置伪类选择器）

child元素，是指在所有的子元素中的排列
1. ：first-child{ }可以选中第一个子元素
  1. 比如：
  2. p:first-child{ }---------- 如果p不是第一个子元素则无法选中
2. ：last-child{ }可以选中最后一个子元素
3. ：nth-child(){ }可以选中任意位置的子元素，该选择器后边可以指定一个参数，指定要选中第几个元素
  1. even表示偶数位置的子元素-----：nth-child( even ){ }
  2. odd表示奇数位置的子元素-----：nth-child(odd ){ }
  3. ：nth-chid(1)表示第1个子元素的位置
type元素，是指在当前类型的子元素中排列
1. ：first-of-type{ }-----
  1. p:first-of-type{}：表示的是显示p标签中的第一个元素
2. ：last-of-type{ }
3. ：nth-of-type{ }

（3）其他

1. 获取焦点---：focus{ }
  1. <input type="text" />(鼠标在文本框内表示获取焦点

（4）目标伪类选择器

：target{ } 目标伪类选择器，可用于选取当前活动的目标元素

（5）否定伪类

作用：可以从以选中的元素中剔除出某些元素
语法：------：not（选择器）{ }

/*所有的p元素设置一个背景颜色，除了class值为hello的元素*/ p:not(.hello){ background-color:pink; }

四、伪元素选择器

伪元素选择器一般是带有双冒号-------即：：

（1）给段落定义样式

1. 首字母--：：first-letter

/*为p中第一个字符来设置一个特殊的样式*/
 p::first-letter {
     font-size:50px;
 }

1. 首行----：：first-line

/*为p中的第一行设置一个样式*/
 p::first-line {
     background-color:red;
 }

1. 选中的元素------：：selection{ }
  1. 注意：该状态在火狐中需要采用另一种方式编写----
  2. ：：-moz-selection{ }
  3. 即当我们选中文字的时候，可以变化的样式

（2）E：：before和E：：after

在E元素内部的开始位置和结束位置创建一个元素，该元素为行内元素，且必须要结合content属性使用。且添加的内容鼠标无法进行选中。
指定元素前----：：before{ }

p:before{ content:"我会出现在段落的最前边"; }

指定元素后-----：：after{ }

五、样式的继承

1. 像儿子可以继承父亲的遗产一样，在CSS中，祖先元素上的样式，也会被他的后代元素有继承。
2. 作用：利用继承，可以将一些基本的样式设置给祖先元素，这样所有的后代元素将自动继承这些样式
3. 并不是所有的样式都会被子元素所继承，比如：背景相关的样式，边框，定位等都不会被继承

六、选择器的优先级

1. 当使用不同的选择器，选中同一个元素并且设置相同的样式时，这时样式之间产生了冲突，最宠采用哪个选择器定义的样式，有选择器的优先级（权重）决定
2. 优先级规则：
  1. 内联样式，优先级1000
  2. id选择器，优先级100
  3. 类和伪类，优先级10
  4. 元素选择器，优先级1
  5. 通配*，优先级0
  6. 继承的样式没有优先级
3. 当选择器中包含多种选择器，需将多种选择器的优先级相加然后再比较，注意的是选择器的优先级计算不会超过他的最大的数量级
4. 如果选择器的优先级一样，则选择靠后的的样式
5. 并集选择器的优先级是单独计算的-----div，p,#p1,.hello{ }
6. 可以在样式的最后，添加一个！important，则此时该样式会获得一个最高的优先级，将会优先于所有的样式显示甚至超过内联样式,但在开发中尽量避免使用

p {
    background-color:pink !important;
}