css的选择器细讲

最新推荐文章于 2024-11-04 08:38:26 发布

原创最新推荐文章于 2024-11-04 08:38:26 发布 · 931 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端

web前端专栏收录该内容

21 篇文章

订阅专栏

前言：

选择器的作用

选择器（选择符）就是根据不同需求把不同的标签选出来这就是选择器的作用。简单来说就是选择标签用的

选择器分为基础选择器和复合选择器

一，基础选择器

基础选择器是由单个选择器组成的
基础选择器又包括：标签选择器，类选择器，id选择器，通配符选择器和属性选择器

1.标签选择器

标签选择器是指用HTML标签的名称作为选择器，按标签名称分类，为了当前页面中某一类标签同一css样式

语法：

标签名：{

属性1：属性值；

属性2：属性值；

.......

}

效果展示：（注：css中color属性为文本颜色）

2.类选择器（常用）

如果想要差异化选择不同的标签，单独选择一个几个标签，可以使用类选择器

语法：

. 类名

属性1：属性值；

属性2：属性值；

}

引用类选择器要用class属性来调用

例如：

<head>
  <style>
      .nav {
             color: red;
           }
  </style>
<head>
<body>
  <div calss="nav">class引用</div>
</body>

效果展示：

类选择器口诀：样式点定义，结构class调用，一个或多个，开发开发最常用。

*注意点：

类选择器使用“.”(英文符号点)进行标识，后面紧跟类名（自定义，我们自己命名）不能用标签
长名字或词组可以用中横线来表示例如： shang-hai
不能用纯数字，中文等命名，尽量使用英文字母表示
命名尽量要有意义，做到一眼知意

3.类选择器 ——多类名

我们可以给一个标签指定多个类名，从而达到更多选择的目的，这些类名都可以选出这个标签

语法：例如

注意点：

在标签中class属性写多个类名
多个类名中间必须用空格分开
这个标签具有所有类名的特点

4.id选择器

id选择器可以规定含有id属性HTML元素的样式，HTML中以id属性来设置id选择器，css中以“#”定义

语法：

#id名 {

属性1：属性值；

属性2：属性值；

.......

}

效果展示：

id选择器口诀：样式#定义，结构id调用。只能用一，其他切勿用。

注意：

id选择器每个HTML文件只能使用一次
id选择器之只能调用一次

5.通配符选择器

css中通配符选择器使用“ * ”定义，他表示页面中所有的元素

语法：

* {

属性1：属性值；

属性2：属性值；

.......

}

效果展示：

注意点：

通配符选择器不需要调用，自动给所有元素使用样式
特殊情况下才用，后面讲场景时常用（以下是清除所有元素的内外边距后期将）

6.属性选择器

css中还可以通过HTML中的属性的不同来添加样式，在css中用 [ ] 英文的中括号定义属性选择器

语法：

[属性] {

属性1：属性值；

属性2：属性值；

.......

}

或

[属性="属性值"] {

属性1：属性值；

属性2：属性值；

.......

}

效果展示：

7.基础选择器的总结

基础选择器	作用	特点	情况	语法
标签选择器	可以选出所有相同的标签	不能差异选择	较多	p { }
类选择器	可以选出你想选出的标签	可根据需求选择	非常多	.nav { }
id选择器	一次只能选择一个标签	HTML中只能出现一次	js常用	#nav { }
通配符选择器	选择所有标签	不需要调用，整个网页起作用	特殊情况用	* { }
属性选择器	选出含有该属性的元素	可以根据不同的属性或属性值选出想要的元素	较多	[name] { }

每个选择器都有使用场景都与要掌握
如果是写改样式类选择器使用最多

二，复合选择器

复合选择器是建立在基础选择器上，对基本选择器进行组合形成的

复合选择器可以更精准，更高效的选择标签
复合选择器由两个或多个基础选择器通过不同的方式组合形成的
常用的复合选择器：后代选择器子代选择器并集选择器伪类选择器

1.后代选择器

后代选择器又被称为包含选择器，可以选择父元素中的子元素

其写法就是把外层标签写在前面内层标签写在后面，当发生嵌套时，内层标签就成为了外层标签的后代（子元素父元素定义）

语法：

元素1 元素2 ..... 元素n {

属性1：属性值 ;

属性2：属性值；

.......

}

案例：

仅使乔治佩奇变色

上述语法表示：div 包含了 p

注意：

元素之间必须用空格分开
前面的标签是后面元素的父元素，最终选中的是最后面的元素
后面的元素可以做父级也可是子级如：div ol li a ；ol是div的子级但是li的父级
其中的子父级可以是任意选择器如：.nav #mang [name] a
书写顺序一定是由外到内

2.子元素选择器

子元素选择器只能选择作为某一元素最近一级子元素简单来说就是选择亲儿子

<div>
  <h1> </h1>
  <ol>
    <li>
      <p> </p>
    </li>
  </ol>
</div>

如上div 最近的一级子元素就是h1 ol 即亲儿子就是h1 ol 而 li 是div 的孙级

语法：

元素1>元素2 >...>元素n {

属性1：属性值 ;

属性2：属性值；

.......

}

案例：

只让光头强变色

上述语法表示：div 中所有的直接后代（最近一级子元素）p

注意：

元素与元素之间用大于符号隔开
前面的标签是后面元素的父元素，最终选中的是最后面的元素
最终选择的元素必须是上一级元素的亲儿子

3.并集选择器

并集选择器可以同时选择多组标签，同时为他们定义相同的样式。通常用于集体声明

并集选择器是各选择器通过英文的逗号（,）连接而成，任何选择器都能成为并集选择器的一部分。 例如：.anv ol li ,#cin>a, p

语法：

元素1，元素2 ，...，元素n {

属性1：属性值 ;

属性2：属性值；

.......

}

案例：

注意：

元素与元素之间用逗号隔开
逗号理解为“和”的意思
并集选择器通常用于集体声明

4.伪类选择器

伪类选择器用于向某些选择器添加特殊效果

伪类选择器最大的特点是用英文的冒号（:）表示

伪类选择器器常用的选择器

选择器	说明
：link	选中未被访问过的元素
：visited	选中被访问过的元素
：hover	选中鼠标指针于元素上的元素
：active	选中鼠标按下未弹起的元素
：focus	用于获得焦点的元素被点击的元素

*注：为确保生效必须按照 link visited hover active 的顺序书写

语法：

选择器伪类选择器 {

属性1：属性值 ;

属性2：属性值；

.......

}

5.复合选择器总结

选择器	作用	特征	使用情况	分隔符及用法
后代选择器	用来选择后代元素	所有后代	较多	空格 .nav a
子代选择器	选择最近一级	选择亲儿子	较少	> .nav>a
并集选择器	设置相同的样式	用于集体声明	较多	; .nav;a
伪类选择器	设置特殊效果		较多	: a:link input:focus

谢谢观看！！！！