CSS选择器

CSS选择器
界面中的 “ 超文本 “ 本质上就是通过一个一个矩形盒子包起来，然后进行排版组合，那么接下来要详细研究这个标签盒子的细节结构，以帮助学习如何使用它，但是在开始研究它之前，我们先来讲解一个概念，选择器的概念。

style = "width:100px;height:100px;backgorund-color:red" >

基本选择器

标签选择器

以标签名称作为选择器选中标签 “ 标签名 :{ 样式 }”

标签选择器特点 : 能够为一群具有相同名称的标签，同时设置相同的样式

Id 选择器，一般在一个页面中 id 值不允许重复

id 选择器是通过给标签设置 id 属性，在样式表中通过 #id{ 样式 } 对标签设置样式，相当于一个人的身份证号

id = "bb" > 主要标题

id = "box1" >

d选择器特点 :

有且只能有一个，不能重名，不能有多个

一般不使用 id 选择器设置样式

ps ：其他选择器都将是三大基本选择器的一个组合

class 类型选择器，可以选择一组标签，这组标签可以是不同类型的标签，例如 p h1 等。在标签内部通过class属性，给标签设置类型名在样式表中通过 . 类型名 { 样式 } 的方式给标签盒子设置样式

class = "bb" > 主要标题

class = "box" >

class = "box" >

class = "box box1" >

类型 class 选择器特点：

相当于给标签起了一个别名

不同盒子可以有相同的 class 属性名，因此类型选择器可以给多个标签同时设置相同样式

同一盒子可以有多个 class 属性名，在文档中以空格隔开，因此同一个盒子的样式是多个选择器叠加的结果

* 通用选择器，选择当前页面中的所有标签

段落

加粗

无

通用选择器会将所有元素匹配并配置样式，这是把双刃剑，好处就是非常方便，坏处就是将不必要的元素也配置了。目前为止，还不存在所有元素都必须配置的样式，所以，一般来说，不常用

伪类选择器：前面是标签选择器，后面类选择器 div.dd{}

典型的伪类选择器，例如链接标签的使用

a:link 链接的颜色

a:visited 已访问的链接颜色

a:hover 鼠标经过时的颜色

a:active 当访问时的颜色

注：已上顺序不可打乱

ID 选择器和类选择器

ID 选择器不可以重名，类选择器可以

ID 选择器在样式表里必须以 # 开头，类选择器在样式表里以 . 开头

选择器优先级

选择器优先级问题，是指当多个选择器选中一个标签，设置相同的样式时谁优先生效的问题

举个例：一般我们的家庭中，男人往往处于相较低的地位，这样一个家庭才能稳固，因此当家里出现这样一个场景

老婆：老公今晚吃米饭吧

孩子：爸爸今晚吃肯德基吧

旺财：主人今晚吃骨头吧

此时，三个家庭成员都选中了这个男人，干同样的事情，但提出不同的需求，此时这个男人的心中就自然而然做出了排序，就有了谁在他心中更优先的问题

我们的选择器，具有相同的特点，例如看如下代码

lang = "zh_CN" >

charset = "UTF-8" >

name = "viewport" content = "width=device-width, initial-scale=1.0" >

http-equiv = "X-UA-Compatible" content = "ie=edge" >

</span> <span style="color:#333333;">选择器优先级问题</span> <span style="color:#117700;">


style = "background-color: saddlebrown" class = "box" id = "box1" >

属性选择器

属性选择器，直接通过两个中括号里面包含属性名即可。当然，还有更多扩展的属性选择器。

基础语法：

[href] { 选中有 href 属性的方法，注意不一定只有 a 标签有 href 属性，可以给任何标签上添加 href 属性，只是不会进行跳转

                color: orange;

}

复合选择器

将不同的选择器进行组合形成新的特定匹配，我们称为复合选择器。

交集选择器

交集复合选择器由两个选择器直接连接构成，其结果是选中二者各自的元素的交集。其中第一个一般是标记选择器，第二个可以是类别选择器或者ID 选择器。这两个选择器之间不能有空格，必须连续书写

这种方式构成的选择器将选中同时满足前后两者定义的元素，也就是说前者所定义的标记类型，并且指定了后者的类别或者ID 的元素，因此叫做交集选择器

这是一个段落显示红色

这是一个标题

class = "one" > 这是标记选择器和类别选择器交叉显示绿色

class = "one" > 这个是类别选择器显示粉色

分组选择器

分组选择器也叫做并集选择器，结果是同时选中各个基本选择器所选择的范围之和

p,b,i,span { color: red ; }

解释：将多个选择器通过逗号分割，同时设置一组样式。当然，不但可以分组元素选择器，还可以使用ID 选择器、类选择器、属性选择器混合使用

h1,h2,h3,h4,h5,h6,p{

        color:red;

        font-size:20px;

}

h2.one,.one,#two{

        text-decoration:underline;

}

这是 h1 标记

class = "one" > 这是 h2 标记

这是 p 标记

class = "one" > 这是 p 标记 2

id = "two" > 这是 p 标记 3

后代选择器

p b { color: red ; }

解释：选择元素内部所有元素。不在乎的层次深度。当然，后代选择器也可以混合使用 ID 选择器、类选择器、属性选择器

这是最外层，这是最内层

这是嵌套外的 span 标记

子选择器

ul > li { border: 1px solid red ; }
ul > li {

border: 1px solid red;

}
我是儿子
我是孙子


我是孙子

我是儿子

id = "bb" > 主要标题

class = "bb" > 主要标题

这是一个标题

class = "one" > 这个是类别选择器显示粉色

这是 h1 标记

class = "one" > 这是 h2 标记