CSS选择器

目录

样式

选择器

元素选择器

id选择器

类选择器

选择器分组(并集选择器)

通配选择器

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

后代选择器

 子元素选择器

伪类选择器

伪元素选择器

属性选择器

兄弟选择器

否定伪类

---

 CSS的样式表由一个一个的样式构成，一个 样式又由选择器和声明块构成。

语法：

– 选择器 {样式名:样式值；样式名:样式值 ; }

– p {color:red ; font-size:12px;}

样式

• 行内样式：

可以直接将样式写到标签内部的style属性 中，这种样式不用填写选择器，直接编写 声明即可。这种方式编写简单，定位准确。但是由于 直接将css代码写到了html标签的内部，导 致结构与表现耦合，同时导致样式不能够 复用，所以这种方式我们不使用。

• 内部样式表：

可以将CSS样式编写到head中的style标签里，然后通过CSS选择器选中指定元素

然后可以同时为这些元素一起设置样式，这样可以使样式进一步的复用

将样式表编写到style标签中，也可以使表现和结构进一步分离它也是我们推荐的使用方式

•  外部样式表:

可以将样式表编写到外部的CSS文件中,然后通过link标签来将外部的CSS文件引入到当前页面中，这样外部文件中的css样式表将会应用到当前页面中。

<link rel="stylesheet" type="text/css" href="style.css" />

选择器

class属性和id属性类似，只不过class属性可以重复

拥有相同class属性值的元素，我们说他们是一组元素

可以同时为一个元素设置多个class属性值，多个值之间使用空格隔开

• 元素选择器

             *  作用：通过元素选择器可以选则页面中的所有指定元素

             *  语法：标签名 {}

• id选择器

             *  - 通过元素的id属性值选中唯一的一个元素

             *  - 语法：  #id属性值 {}

• 类选择器

             *  - 通过元素的class属性值选中一组元素

             *  - 语法：.class属性值{}

• 选择器分组(并集选择器)

             *  - 通过选择器分组可以同时选中多个选择器对应的元素

             *  - 语法：选择器1,选择器2,选择器N{}

• 通配选择器

             *  - 他可以用来选中页面中的所有的元素

             *  语法：*{}

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

             *  - 作用：   可以选中同时满足多个选择器的元素

             *  - 语法： 选择器1.选择器2.选择器N{}

• 后代选择器

        元素之间的关系

                父元素：直接包含子元素的元素

                子元素：直接被父元素包含的元素

                祖先元素：直接或间接包含后代元素的元素，父元素也是祖先元素

                后代元素：直接或间接被祖先元素包含的元素，子元素也是后代元素

                兄弟元素：拥有相同父元素的元素叫做兄弟元素    

           - 作用： - 选中指定元素的指定后代元素

             *  - 语法：  祖先元素 后代元素{}

•  子元素选择器

             *  - 作用：  - 选中指定父元素的指定子元素

             *  - 语法：  父元素 > 子元素{}

• :first-child – 选择第一个子标签

• :last-child – 选择最后一个子标签

• :only-child – 选择仅有的一个子标签

• :nth-child(even/odd) – 选择指定位置的子元素,奇偶数位子元素

• :first-of-type

• :last-of-type

• :nth-of-type – 选择指定类型的子元素

• :only-of-type – 选择仅有一个且同类型的子标签

• :empty – 选择无子标签的标签

• 伪类选择器

伪类专门用来表示元素的一种的特殊的状态，

             *  比如：访问过的超链接，比如普通的超链接，比如获取焦点的文本框

             * 当我们需要为处在这些特殊状态的元素设置样式时，就可以使用伪类

给链接定义样式

• 有四个伪类可以让你根据访问者与该链接的交 互方式，将链接设置成4种不同的状态。

• 正常链接 – a:link{}

• 访问过的链接 – a:visited{}（只能定义字体颜色）

• 鼠标滑过的链接 – a:hover{}

• 正在点击的链接 – a:active{}

• 伪元素选择器

使用伪元素来表示元素中的一些特殊的位置

• 获取焦点 – :focus{}

• 指定元素前 – :before{context:"你好"}

• 指定元素后 – :after{context:"你好"}

• 选中的元素 – ::selection{}

• 首字母 –  p:first-letter{}

• 首行 –     p:first-line{}

• 属性选择器

• 属性选择器可以挑选带有特殊属性的标签。

• 语法:p[title="abc"]{}

[属性名] [属性名="属性值"]

[属性名~="属性值"]

[属性名|="属性值"]

[属性名^="属性值"]

[属性名$="属性值"]

[属性名*="属性值"]

• 兄弟选择器

• 语法:

– 查找后边一个兄弟元素

  • 兄弟元素 + 兄弟元素{}

– 查找后边所有的兄弟元素

  • 兄弟元素 ~ 兄弟元素{}

• 否定伪类

• 否定伪类可以帮助我们选择不是其他东西 的某件东西。

• 语法：   :not(选择器)

• 比如p:not(.hello)表示选择所有的p元素但 是class为hello的除外。