- A+
CSS选择器是一种用于选择HTML或XML文档中特定元素的模式。允许你根据元素的标签名、类名、ID、属性等来选择元素，并将样式应用于这些选中的元素
基本选择器
通配配选择器
-
通配选择器:可以选中所有的HTML元素
-
通配选择器使用 符号
*,命中页面所有的元素 -
语法
-
* { 属性名:属性值; }
-
-
通配选择器在实际设置样式应用较少，在对应场景清除样式使用较多
元素选择器
-
元素选择器:使用标签选中所有的对应标签统一设置样式
-
语法
-
标签名: { 属性名:属性值; } /* 示例 使用span标签 选中页面所有的span，设置字体大小为34px */ span { font-size:34px; } -
元素选择器无法实现差异化设置,所有的元素都是统一设置
-
类选择器
-
类选择器: 根据元素的class值，来选中某些元素
-
步骤
- 在标签内设置class属性
- 使用.class属性值选中所有该属性值的标签
-
语法
-
<!-- html --> <!-- 给标签设置同类名 归属于一类 --> <p class="city">北京</p> <p class="city">山西</p> <p class="city">上海</p> <!-- 如果要给标签设置多类，则多个值中间用空格隔开--> <span class="city name">天津</span> -
/* css */ /* 使用类选择器的时候, 使用 .类名 的方式选中*/ /* 给所有的city类 设置颜色为红色 */ .city { corlor:red; } /* 给所有的name类 设置字体大小*/ .name { font-size:33px; }
-
元素的class值属于不需要带 符号
., 但是CSS的类选择器要带 符号., class的值是我们自定义的，不能使用纯数字、中文或者以及数字开头,尽量使用英文和数字的组合，若多个单词组成使用-做连接,例如left-menu
ID选择器
-
ID选择器:根据标签的ID属性值，精准的选中某个元素
-
语法
-
<!-- 给该P标签 设置一个ID值 --> <p id="on-city"> 北京 </p> -
/* 使用符号#和ID值 来命中元素 */ #on-city { font-size:33px; }
-
id 属性值尽量由字母、数字、下划线或者短杠组成，不能以数字开头，最好以字母开头，不能包含空格,区分大小写
一个元素只能拥有一个ID属性，多个元素的ID属性值不能相同
一个元素可以同时拥有id和class属性
复合选择器
交集选择器
-
选中同时符合多个条件的元素,且的关系
-
语法
选择器1选择器2选择器3...{} -
示例
-
<h3 class="city">北京市</h3> <h3 class="city">天津市</h3> <p class="city on" id='home'>东城区</p> <p class="city">滨河区</p> -
/* 所有的city设置为红色*/ .city { color: red; } /* 所有p标签里面且为city类的标签设置为绿色*/ p.city { color: green; ; } /* P标签里面归属为city类 并且ID为home的标签设置为蓝色 */ p.city#home { color:blue; } /* 即是city类 又是on类的属性 设置为黄色*/ .city.on { color:yellow; }
-
-
注意事项
-
有标签名情况下，表前面必须写在前面
-
id选择器可以作为交集的条件，但是实际应用中几乎不用，因为id本身就是唯一选择，可以直接命中元素
-
交集选择器不能出现两个元素选择器，因为一个元素不可能即是
p又是span -
用的最多的交集选择器是元素选择器配合类名选择器,例如
p.city
-
并集选择器
-
并集选择器选中多个选择器对应的元素，或者的关系，又称分组选择器
-
语法
选择器1,选择器2,...{},多个选择器通过,连接 -
示例：
-
/* city类、id值为home、name类 的背景颜色设置为粉色 */ .city, #home, .name { background-color: pink; }
-
-
注意事项：
- 并集选择器多个选择器可以横在一行，也可以竖着写，一般竖着写，语法清晰
- 任何形式的选择器，都可以作为并集选择器的一部分
- 并集选择器通常用于集体声明,可以缩小样式表体积
关系选择器
HTML的元素关系
父元素
-
直接包裹某个元素的元素，就是该元素的父元素
-
<div> <h1 页面标题 </h1> <ul> <li>导航</li> li>导航</li> </ul> </div> <!-- 上述标签,div包裹着h1和ul，那么div就是ul和h1的父元素 ul包裹着li，ul就是li的子元素 -->
子元素
- 被父元素直接包含的元素
- 上述代码,h1和ul就是div的子元素,li就是ul的子元素
祖先元素
- 父元素的父元素.....,一直往外层找,都是祖先元素
- 代码中,div就是li的祖先元素,如果外面还有其他标签，也是祖先元素
- 父元素也算是祖先元素的一种
后代元素
- 子元素的子元素......,一直往里找，都是后代元素
- 子元素也是后代元素的一种
兄弟元素
- 具有相同父元素的元素，互为兄弟元素
- 代码中
h1和ul就互为兄弟元素
后代选择器
-
选中指定元素中，符合要求的所有后代元素
-
语法：`选择器1 选择器2 .. {} ，多个选择器用空格隔开，先写祖先，再写后代
-
示例：
-
<!-- html --> <div class="city"> <ul> <li class="beijing">北京</li> <li>上海</li> <li><a href="#">地图</a></li> </ul> </div> -
/* css */ /* 选中div中的ul中的所有li */ div ul li { color: #000; } /* 选中div中的所有a，跳过ul和li，a也是div的后代元素 */ div a { color: #000; } /* 选中类名city中的所有li元素 */ .city li { color: #000; } /* 选中类名city中的 所有类名为beijing里的所有li */ .city .beijing li{ color: #000; } -
注意事项:
-
后代选择器最终选择的都是后代，不选中祖先
-
一层、多层嵌套的后代，都是后代
-
使用后代选择器时，不需要从代码最外层的结构开始，只要符合关系要求即可
-
-
子代选择器
-
选中指定元素中,符合要求的子元素，先写父，再写子
-
子代选择器又称子元素选择器、子选择器
-
语法:选择器1>选择器2>...{} 多个选择器用>隔开
-
示例
-
<div> <a href="#">张三</a> <a href="#">李四</a> <a href="#">王五</a> <p> <a href="#">赵六</a> <div class="last"> <a href="#">爱丽丝</a> </div> </p> </div> -
/* 选中div的子元素中的a标签 ，其中p标签中的a标签不会选中，因为和div的关系属于后代元素*/ div>a { color: #000; } /* 选中p标签中的a标签 */ p>a{ color: blue; } /* 选中div的子元素中的p标签的子元素a标签 */ div>p>a{ color: #000; } /* last类中的子元素中a标签 */ .last>a{ color: #000; } -
注意事项:
- 子代选择器最终选择的是子代，不是其中的父级
-
兄弟选择器
相邻兄弟选择器
-
选中指定元素后,符合条件的相邻兄弟元素
-
相邻的概念是紧挨着他的下一个，仅一个，不会向上相邻，如果中间有间隔其他元素，也不会选择
-
语法: 选择器1+选择器2
-
示例:
-
<body> <div>title</div> <a href="#">阿里巴巴</a> <a href="#">字节跳动</a> <p>京东</p> </body> -
/* 选中div下面的第一个a标签，阿里巴巴 */ div+a{ color: #000; } /* 选中除了第一个li外的所有li,因为第二个li是第一个的相邻兄弟,第三个是第二个的项链兄弟 */ li+li{ color: #000; }
-
通用兄弟选择器
-
选中指定元素后,符合条件的所有兄弟元素,不会选中向上的元素，如果元素中间间隔了其他元素，则不会选中
-
语法:选择器1~选择器2{}
-
示例
-
/* div后的两个a标签都选中，不包含div */ div~a { color: #000; }
-
属性选择器
-
选中属性值符合要求的元素
-
语法，一共有五种:
- [属性名]，选中具体某个属性的元素
- [属性名="属性值"]，选中包含某个属性，且属性值等于指定值的元素
- [属性值^="值"]，选中包含某个属性，且属性值以指定的值开头的元素
- [属性值$="值"]，选中包含某个属性，且属性值以指定的值结尾的元素
- [属性值*="值"]，选中包含某个属性，且属性值包含指定的值的元素
-
示例
-
<div title="beijing">北京</div> <div title="shanghai">上海</div> -
/* 选中具有title属性的所有元素，前两个div，不管属性的值是什么，只要有该属性就选中 */ [title]{ color: #000; } /* 选中属性为title，并且属性值会shanghai的元素，即第二个div */ [title="shanghai"] { color: #000; } /* 选中有title属性，且title属性值是以字母b开头的元素 */ [title^='b'] { color: #000; } /* 选中有title属性，且title属性值是以字母i结尾的元素 */ [title$='b'] { color: #000; } /* 选中有title属性，且属性值包含字母b的元素 */ [title*='b'] { color: #000; }
-
伪类选择器
伪类选择器概念
-
什么是伪类
-
很像类，但不是类，是元素特殊状态、位置或者条特定条件，一种用于选择元素的特殊选择器。允许根据元素的状态、位置或其他特定条件来选择元素，并为其应用样式
-
伪类选择器以冒号:开头，紧跟着伪类的名称。它们可以与元素选择器、类选择器、ID选择器等其他选择器结合使用，以更精确地选择元素
-
-
概念示例
-
假设有两个超链接，点击过的超链接需要变成红色，没有点击过的超链接变成蓝色，对于这两种状态进行样式设置
-
动态伪类
动态伪类选择器根据元素的状态或用户的交互来选择元素
-
a:link:超链接未被访问的状态，只有超链接可以使用 -
a:visited:超链接访问过的状态，只有超链接可以使用 -
元素:hover：鼠标悬停在元素上的状态，所有元素都可以使用 -
元素:active:元素激活(鼠标点击下未松开)的状态，所有元素都可以使用 -
元素:focus:获取焦点的元素，点击、快捷键、触摸等方式选择元素时，就是获取焦点，只有表单类元素才能使用 -
注意事项:
- 前四个选择器同时使用的时候注意编写优先级,从上到下依次是
link、visited、hover、active - 因为同一个操作可能会有多个行为状态,顺序不对会出现覆盖样式的情况
- 前四个选择器同时使用的时候注意编写优先级,从上到下依次是
-
使用示例:
-
/* 选中没有访问过的a元素 */ a:link { color: blue; } /* 选中访问过的a元素 */ a:visited { color: red ; } /* 选中鼠标悬浮状态的a元素 */ a:hover { color: yellow; } /* 选中激活状态(鼠标点击后没有放开)的a元素 */ a:active { color: peru; } /* 选中获取焦点的input元素 */ input:focus { background-color:burlywood; }
-
结构伪类
结构伪类选择器根据元素在文档结构中的位置来选择元素,和其他选择器配合使用
-
:first-child:所有子元素中的第一个 -
:last-child:所有子元素中的最后一个 -
:nth-child(n):所有子元素的第n个 -
:first-of-type:所有同类型子元素的第一个 -
:last-of-type:所有同类型子元素的最后一个 -
:nth-of-type(n):所有同类型子元素的第n个 -
:nth-last-child(n)：所有子元素的倒数第n个，与序号3是反序 -
:nth-last-of-type(n):所有同类型子元素的倒数第n个，与序号6是反序 -
:only-child:选择没有兄弟的元素，即该父类只有他一个子元素 -
:only-of-type:选择没有同类型兄弟元素的元素 -
:root:选中页面根元素 -
:empty:选中内容为空的元素(空格也算内容) -
常用(前6)结构伪类使用示例:
-
作用域是全部子元素
-
/* 选中div的子元素中的P元素的第一个,如果div的第一个子元素不是P，则无法选中，作用域是div的直系所有子元素，不管是不是P标签 */ div>p:first-child { color: #000; } /* 选中div的后代p元素，p的父元素是谁无所谓，但是p必须是其父元素的第一个子元素 */ div p:first-child { color: #000; } /* 父元素的第一个子元素，且为P元素，就被选中 如果第一个元素不是p则不会有选中*/ p:first-child { color: antiquewhite; } /* 选中的是div所有的子元素的最后一个,且必须最后一个子元素是P */ div>p:last-child { color: aqua; } /* 选中的是div所有子元素的第一个且为P元素，1是下标，下标从1开始而不是0，如果第一个元素是是a,那么1则选不中，用2可以选中 */ div>p:nth-child(1) { color: yellowgreen; } /* 也可以写表达式，表达式格式用n计数，n是正无穷整数,从0开始，比如2n (0*2=0,1*2=2,2*2=4),选中偶数，2n+1选中奇数(2*0+1=1,2*1+1=3),用内置表示 even是选中偶数,odd选中奇数,选中前五的话就是-n+5 （-0+5=5，—1+5=4类推），表达式根据场景编写，要注意格式必须为某n + 值，或者某n，不能值+某n 如果对应的元素不是对应的子类标签，则不会选中，根据规则把符合要求且为对应元素的标签选中 */ div>p:nth-child(2n) { color: yellowgreen; }
-
-
作用域是同类型子元素
-
/* 选中div的P标签子元素中第一个，作用域是所有同类型子元素，而不是所有子元素，如果子类依次是a、span、p、p，则选中第一个p */ div>p:first-of-type { color: aqua; } /* 选中div同类型子元素的最后一个，即所有P标签的最后一个P标签，作用域是所有同类型子元素，而不是所有子元素 */ div>p:last-of-type { color: aqua; } /* 选中div同类型子元素的第三个，即第三个P标签，作用域是所有同类型子元素，而不是所有子元素 表达式逻辑与nth-child一致 */ div>p:nth-of-type(3) { color: #000; }
-
-
否定伪类
用于选择不符合指定条件的元素,以
:not()的形式表示，后面跟着一个选择器参数，用于指定不希望选择的元素
/* 选中div的子元素中的p元素，但是排除类名是fail的 */ div>p:not(.fail) { color: rebeccapurple; } /* 选中div的子元素的p元素，但是排除title属性值是beijing的 */ div>p:not([title="beijing"]) { color: #000; } /* 选中div的子元素的p元素，排除第一个p元素 */ div>p:not(:first-child){ color: #000; } /* 否则伪类可以使用任意选择器进行排除，语法正确即可 */ UI伪类
UI状态伪类选择器，用于选择处于某种状态下的UI元素，主要用于HTML表单上，根据表单元素的不同状态，定义不同的样式，来增强用户体验
UI状态伪类选择器的特征：指定的样式只有在某种状态下才起作用
表单元素的状态包括获得焦点、失去焦点、选中、未选中、可用、不可用、有效、无效、必填、选填、只读等等
-
常用的UI伪类
-
:checked:被选中的复选框或者单选按钮 -
:enable:可用的表单元素，没有设置disabled禁用属性 -
:disabled:不可用的表单元素,设置了disabled禁用属性
-
<input type="checkbox"> <input type="radio"> /* 单选或者复选框被选中的时候 */ input:checked { width: 100px; height: 30px; } /* 选中被禁用的Input元素 */ input:disabled{ background-color: gray; } 目标伪类
:target:选中锚点所指向的元素
<!-- 设置跳转锚点 --> <a href="#first">第一个</a> <a href="#last">第二个</a> <div id="first">first</div> <div id="last">last</div> /* 当使用锚点跳转对对应元素的时候，将颜色设置为红色 */ div:target{ color:red; } 语言伪类
:lang(),根据指定的语言选择元素，如果元素没有单独设置lang,默认是hmlt标签的默认值<html lang="zh">
<!--设置语言为英文 --> <div lang="en">BeiJing</div> <div lang="en">北京</div> /* 选中div并且lang属性设置的是en */ div:lang(en){ color: red; } /* 选中所有设置lang属性是en的元素 ，如果html默认语言设置为en，则选中没有单独设置lang的所有元素*/ :lang(en){ color: red; } 伪元素选择器
伪元素:很像元素，但是不是元素，是元素的一些特殊位置
常用伪元素:
::first-letter:选中元素中的第一个文字::first-line：选中元素中第一行文字::selection：选中被鼠标选中的内容::placholder：选中输入框的提示文字::before：在元素最开始的位置,创建一个子元素，用content指定内容，也可以设置其他样式::after：在元素最好的位置，创建一个子元素，用content指定内容，也可以设置其他样式
<div>Lorem, ipsum dolor.</div> <input type="text" placeholder="默认值"> <p>999</p> <p>888</p> /* 选中的是div中的第一个文字 */ div::first-letter { color: red; font-size: 30px; } /* 选中的div中的第一行 */ div::first-line { color: yellow; } /* 选中div中被鼠辈选择的文字 */ div::selection { background-color: gold; } /* 选中input中的提示文字 */ input::placeholder { color: #000; } /* 在p标签的内容之前 创建一个子元素，*/ p::before { content: "$"; } /* 在p标签的内容之后 创建一个子元素 */ p::after { cursor: ".00"; color: yellow; } 选择器优先级
简单选择器从高到低优先级:
-
!important，在属性值后面设置，标明该样式优先级为最高-
.slogan { color: pink !important; } /* 给哪个样式加 !important 只是代表该样式优先级最高，而不是选择器优先级最高 */
-
-
行内样式
-
ID选择器
-
类选择器
-
元素选择器
-
通配选择器
-
继承的样式
复杂组合选择器通过计算权重决定优先级：
- 计算条件格式(a,b,c)依次对应下面1、2、3
- ID选择器的个数
- 类、伪类、属性选择器的个数
- 元素、伪元素选择器的个数
- 权重比较规则:
- 比如两个选择器权重格式为 (1,0,0) 和 (0,2,2)
- 从左向右依次比较，当前位胜出之后，不会比较后面，则(1,0,0) > (0,2,2)
- 注意点:并集选择器中每一个部分是分开计算的
如果两个CSS选择器的权重一样，那么后面出现的选择器将具有更高的优先级。这意味着后面的选择器将覆盖先前的选择器的样式
CSS三大特性
层叠性
如果发生了样式冲突，那么就会根据一定的规则(选择器优先级)，进行样式的层叠(覆盖)
继承性
-
元素会自动拥有其父元素、或者祖先元素上设置的某些样式
-
继承规则是优先继承距离近的样式
- 常见的可继承样式有
color、font-xxx、line-xxx等等，比如div设置了颜色为红色，其中有个p标签，默认颜色也会是红色
- 常见的可继承样式有
-
可以参考mdn网站，查看Properties中的具体属性可继承描述是否为可继承属性
优先级
- 选择器的优先级，用来确定在多个选择器应用于同一个元素时，哪个选择器的样式将被应用的规则。CSS的优先级是根据选择器的特定性和来源来计算
