CSS选择器

Posted 2023-02-23 Sgf227

CSS选择器

前置问题

1.css的全称是什么？ Cascading Style Sheets
2.样式表的组成 （1）样式表（2）规则（3）选择器+声明块（4）声明（5）css属性+css属性值组成的键值对
3.浏览器读取编译css的顺序？从右往左

基本选择器

优先级：!important > 行内样式 > id选择器 > 类选择器=伪类=属性选择器 > 标签和伪元素> 通配选择器>继承>浏览器默认属性

1.ID 选择器：使用 # 标识selector，语法格式：#S…（S为选择器名）

注意： ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

<style>
#red
  color:red;

</style>
<!--下面文字是红色的-->
<div id="red">red text</div>

2.类选择器：使用 . 标识selector，语法格式：.S…（S为选择器名）。

<style>
.red
  color:red;

</style>
<!--下面文字是红色的-->
<div class="red">red text</div>

3.元素选择器：又叫标签选择器，使用标签名作为selector名，语法格式：S…（S为选择器名）。

<style>
div
  color:red;

</style>
<!--下面文字是红色的-->
<div>red text</div>

4.属性选择器：语法格式如下

​ [attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。
​ [attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。
​ [attr~=val]：表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少一个值为val。

[attr|=val] : 选择attr属性的值是val（包括val）或以val-开头的元素。
[attr^=val] : 选择attr属性的值以val开头（包括val）的元素。
[attr$=val] : 选择attr属性的值以val结尾（包括val）的元素。
[attr*=val] : 选择attr属性的值中包含字符串val的元素。

5.伪类选择器 ：语法格式是只用一个冒号，如:link

四个伪类选择器的顺序必须是固定的，否则将不会产生期望中的变化。记忆窍门：love hate（爱恨）。

（1）:link向未被访问的链接添加样式（链接）
（2）:visited向已被访问过的链接添加样式（链接）
（3）:hover当鼠标悬浮在元素上方时，向元素添加样式（链接或任意元素）
（4）:active向被激活的元素添加样式（链接或任意元素）
（5）:focus向拥有键盘输入焦点的元素添加样式（如input输入框鼠标点击时产生背景颜色的变化）
（6）:first-child 用于匹配父元素中的第一个元素。例如E:first-child,找的是E元素，E元素必须是他的父元素的第一位元素。
（7）:lang向带有指定lang属性的元素添加样式

6.伪元素选择器：语法格式是CSS1/2时是单冒号，CSS3采用双冒号来作为和伪类的区别。

（1）:frist-letter用于向文本中的第一个字母添加样式
（2）:first-line向文本的首行添加样式
（3）:before在元素之前添加内容
（4）:after在元素之后添加内容

注：伪类和伪元素区别：

（1）伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档树以外的元素。
（2）css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。为了兼容性所以目前还是在使用一些常见的伪元素的时候采用单冒号较为稳妥。

层次选择器（后代、父子、兄弟、相邻）

1.后代选择器：语法格式：#A B…（A和B为选择器名）

后代选择器包含的是其后代的所有元素,所以子元素，子元素的子元素，子元素的…的子元素都被会选中。

<style>
.A p
  color:red;

</style>
<!--下面文字是红色的-->
<div class="A">
	<p>red text</p>
    <p>red text</p>
    <div>
    	<p>red text</p>
    	<p>red text</p>
    </div>
    <p>red text</p>
    <p>red text</p>
</div>

2.父子选择器：语法格式：#A>B…（A和B为选择器名）

父子选择器只选中其元素内部直接子元素，并且不包括其他的后代元素。

<style>
.A>p
  color:red;

</style>
<!--下面文字是红色的-->
<div class="A">
	<p>red text</p>
    <p>red text</p>
    <div>
    	<p>normal text</p>
    	<p>normal text</p>
    </div>
    <p>red text</p>
    <p>red text</p>
</div>

3.通用兄弟选择器：语法格式：#A~B…（A和B为选择器名）

兄弟选择符，位置无须紧邻，只须同层级，A~B 选择A元素“之后”所有同层级B元素。

<style>
.A~p
  color:red;

</style>
<!--下面文字是红色的-->
<div>
	<p>normal text</p>
    <p>normal text</p>
    <div class="A">
    	<p>normal text</p>
    	<p>normal text</p>
    </div>
    <p>red text</p>
    <p>red text</p>
</div>

4.相邻选择器：语法格式：#A+B…（A和B为选择器名）

相邻兄弟选择器可选择紧接在另一元素后的一个元素，且二者有相同父元素。

<style>
.A+p
  color:red;

</style>
<!--下面文字是红色的-->
<div>
	<p>normal text</p>
    <p>normal text</p>
    <div class="A">
    	<p>normal text</p>
    	<p>normal text</p>
    </div>
    <p>red text</p>
    <p>normal text</p>
</div>

​