CSS选择器

标签：关系   部分   缺点   html标签   设置   html   提前   嵌套   代码量   

要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。选择器是选择要添加要是的HTML标签的一种方式、模式。

CSS2.1版本的七种选择器:

基础选择器: 标签选择器、id选择器、类选择器、通配符选择器

高级选择器: 后端选择器、交集选择器、并集选择器

基础选择器

标签选择器

通过标签名去选中标签元素。

书写方式: 标签名

选中范围: 选中的是HTML文件中所有的同名标签

p{
    color: red;
}
h2{
    color: blue;
}

标签选择器可以选择所有的同名标签，会忽略嵌套关系，不管嵌套多深，都能被选中。

    

        

            

                   
这是一个嵌套多层的段落
            
        
    
  

优点: 可以选中所有的同名标签，设置所有同名标签的公共样式

缺点: 只能实现全选，不能对局部的标签添加特殊样式

id选择器

通过标签上的id属性去选中标签。

书写方式: #id属性值

选择范围: 只能选中一个标签

id命名规则: 必须以字母开头、后面可以有字母、数字、下划线、横线。严格区分大小写。每个id属性值必须是唯一的。不能与其他的id同名。

#ps1{
    color: red;
}

如果希望多个标签设置相同的样式，使用id选择器的话，必须给这多个标签取不同的id名。分别选择设置

#ps1{
    color: red;
}
#hl1{
    color: red;
}

缺点: id选择器只能实现单选，不能帮我们完成多选的功能。

类选择器

通过标签的class属性去选择标签。

书写方式: .class属性值

选择范围: 是页面中所有class属性值相同的标签

class命名规则: 必须以字母开头、后面可以有字母、数字、下划线、横线。严格区分大小写。class属性可以与其他class相同。

特点1: 多个不同的标签，不区分标签类型，只要class属性值相同。都可以被同一个类选择器选中。

.demo{
    color: red;  
}

特点2: 一个标签的class属性可以有多个属性值, 值之间用空格分隔，这样的话可以通过多个属性组成的选择器，去选中同一个标签，每个选择器后面的样式都会添加给同一个标签

这是一个段落

.demo{
    color: red;
}
.para{
    font-size: 30px;
}

原子类: 在CSS中提前设置一些类名，每个类选择器后面只添加一条css样式属性，这些属性会在页面中常被使用，后期可以不需要多次书写属性，只要将对应的类名添加给需要的标签即可。

.fs12{
    font-size: 12px;
}
.fs20{
    font-size: 20px;
}
.red{
   color: red;
}
.green{
    color: green;
}

优点: 

1. 通过一个选择器进行多选，选中多个标签，添加公共样式。

2. 一个标签可以被多个类选择器选中，可以将所有的样式进行分离，分别提取公共样式和单独样式。节省代码量。

通配符选择器

通过一个特殊符号选择页面内所有的标签

书写方式: *

选择范围: 包含html标签在内的所有标签

* {
    color: red;
}

缺点: 通配符选择器效率低，要设置的部分公共样式不是所有标签都需要添加，如果使用通配符选择，会让不需要的标签页加载一次样式，导致浏览器多做无用的工作。

实际上显示的网站不允许使用*去清除默认内外边距，不过普通的案例，为了节省书写，可以使用通配符

CSS选择器

标签：关系   部分   缺点   html标签   设置   html   提前   嵌套   代码量   

原文地址：https://www.cnblogs.com/featherwit/p/12977572.html