CSS 知识整理(二) 选择器

CSS 知识整理(二)  选择器

目录

CSS 知识整理(二)  选择器

一、选择器的作用:

二、基本选择器

三、层次选择器

四、属性选择器(常用)

---

一、选择器的作用:

要使用CSS对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。

二、基本选择器

• 标签选择器

标签选择器就是对html中的标签进行选择,选择格式为：标签{ }。

    
    
    


这是一级标题
这还是一级标题
这是段落

效果如下：

• 类选择器

类选择器选择的对象是标签中的class属性值，选择格式为：.class{ }。

    
    


    



标题1
标题2
标题3
标题4

段落

效果如下：

• ID选择器

ID选择器选择的对象是标签中id属性，唯一使用（多次使用浏览器会执行，但是执行js代码时会发生错误）,选择格式为 #id{ }。

    
    
    



标题1
标题4

段落

效果如下：

三种基本选择器的优先级为：id选择器>class选择器>标签选择器

三、层次选择器

目前有这样的层次结构

    
    


p1
p2
p3


    

        
p4
    
    

        
p5
    
    

        
p6
    

• 后代选择器

/*后代选择器，选择所有代*/
.c p {
    color: red;
}

• 子选择器(一代子)

/*子选择器,只选择一代*/
body > p {
    color: yellowgreen;
}

• 相邻兄弟选择器(一个)

/*相邻兄弟选择器:只有一个（向下选择）*/
.p1 + p {
    color: orange;
}

• 通用兄弟选择器(选中所有兄弟标签)

.p1 ~ p {
    color: aquamarine;
}

这个选择器也可以多重使用

四、属性选择器(常用)

属性选择器是css中最灵活也最常用的选择器，是基本选择器的扩充，可以根据元素的属性和属性值进行选择，首先假设假设我们的html中的body部分如下(这里的每个超链接对应的数字用于后面选择器作用的标识)：

    
    2
    3
    4
    5
    6

属性选择器的语法为：

标签[属性] 用于选取带有指定属性的元素
标签[属性=属性值] 用于选取带有指定属性和值的元素
标签[属性~=属性值] 用于选取属性值中包含指定词汇的元素。
标签[属性|=属性值] 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。
标签[属性^=属性值] 匹配属性值以指定值开头的每个元素。
标签[属性$=属性值] 匹配属性值以指定值结尾的每个元素。
标签[属性*=属性值] 匹配属性值中包含指定值的每个元素。

几个例子如下：

a[id] {
    background: black;
}

选取结果为：123456

a[id=first] {
    background: orange;
}

选取结果为：1

a[class*=links] {
    background: greenyellow;
}

选取结果为：12356

a[href^=http] {
    background: blueviolet;
}

选取结果为：12

a[class$=em]{
    background:orange;
}

选取结果为：3456

 

还有一个就是伪类选择器，日后补充

---

文章内容根据遇见狂神说CSS部分自学整理，在此感谢该博主，b站链接点这。