CSS选择器

1. CSS选择器作用

选择器的作用

找到特定的HTML页面元素

CSS选择器干啥的？ 选择标签用的， 把我们想要的标签选择出来

css 就是 分两件事， 选对人， 做对事。

h3 { 
    color: red;
}

这段代码就是2件事， 把 h3选出来， 然后 把它变成了 红色。  

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

2. CSS基础选择器

2.1 标签选择器

概念：

标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

语法：

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

  • 作用：

    标签选择器 可以把某一类标签全部选择出来 比如所有的div标签 和 所有的 span标签

  • 优点：

    是能快速为页面中同类型的标签统一样式

  • 缺点：

    不能设计差异化样式。

2.2 类选择器

类选择器使用 “.”（英文点号）进行标识，后面紧跟类名.

语法： 

.类名 { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

标签

<p class='类名'></p>

  • 优点：

    • 可以为元素对象定义单独或相同的样式。 可以选择一个或者多个标签

  • 注意

    • 类选择器使用“.”（英文点号）进行标识，后面紧跟类名(自定义，我们自己命名的)

    • 长名称或词组可以使用中横线来为选择器命名。

    • 不要纯数字、中文等命名， 尽量使用英文字母来表示。

案例：

 

<head>
        <meta charset="utf-8">
        <style>
    
        .blue {
            color: blue;
            font-size: 100px;
        }
        .red {
            color: red;
            font-size: 100px;
        }
        .orange {
            color: orange;
            font-size: 100px;
        }
        .green {
            color: green;
            font-size: 100px;
        }
        </style>
    </head>
    <body>
        <span class="blue">G</span>
        <span class="red">o</span>
        <span class="orange">o</span>
        <span class="blue">g</span>
        <span class="green">l</span>
        <span class="red">e</span>
    </body>

2.3 类选择器特殊用法

注意：

  • 各个类名中间用空格隔开。

  • 多类名选择器在后期布局比较复杂的情况下，还是较多使用的。

<div class="pink fontWeight font20">亚瑟</div>
<div class="font20">刘备</div>
<div class="font14 pink">安其拉</div>
<div class="font14">貂蝉</div>

2.4 id选择器

id选择器使用#进行标识，后面紧跟id名

  • 其基本语法格式如下：

    • id选择器

      #id名 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

    • 标签

      <p id="id名"></p>

  • 元素的id值是唯一的，只能对应于文档中某一个具体的元素。

  • 用法基本和类选择器相同。

  • 只能调用一次（一次性的）。

2.5 id选择器和类选择器区别

  • W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。

    • 类选择器（class） 好比人的名字， 是可以多次重复使用的， 比如 张伟 王伟 李伟 李娜

    • id选择器 好比人的身份证号码， 全中国是唯一的， 不得重复。 只能使用一次。

id选择器和类选择器最大的不同在于 使用次数上。

2.6 通配符选择器

  • 概念

    通配符选择器用*号表示， * 就是 选择所有的标签 他是所有选择器中作用范围最广的，能匹配页面中所有的元素。

  • 其基本语法格式如下：

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

例如下面的代码，使用通配符选择器定义CSS样式，清除所有HTML标记的默认边距。

* {
  margin: 0;                    /* 定义外边距*/
  padding: 0;                   /* 定义内边距*/
}

  • 注意：会匹配页面所有的元素，降低页面响应速度，不建议随便使用

2.7 基础选择器总结

选择器作用缺点使用情况用法
标签选择器 可以选出所有相同的标签，比如p 不能差异化选择 较多 p { color：red;}
类选择器 可以选出1个或者多个标签 可以根据需求选择 非常多 .nav { color: red; }
id选择器 一次只能选择器1个标签 只能使用一次 不推荐使用 #nav {color: red;}
通配符选择器 选择所有的标签 选择的太多，有部分不需要 不推荐使用 * {color: red;}

基础选择器我们一共学了4个， 每个都有自己的价值， 可能再某个地方都能用到。但是如果说，一定要找个最常用的，那么，肯定是类选择器。

2.8 团队约定

选择器

  • 尽量少用通用选择器 *

  • 尽量少用 ID 选择器

  • 不使用无具体语义定义的标签选择器 div span 

/* 推荐 */
.jdc {}
li {}
p{}

/* 不推荐 */
*{}
#jdc {}
div{}   因为div 没有语义，我们尽量少用

3. CSS复合选择器

3.1 后代选择器

  • 概念：

    后代选择器又称为包含选择器

  • 作用：

    用来选择元素或元素组的子孙后代

  • 其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，再写儿子孙子。

父级 子级{属性:属性值;属性:属性值;}

语法：

.class h3{color:red;font-size:16px;}

  • 当标签发生嵌套时，内层标签就成为外层标签的后代。

  • 子孙后代都可以这么选择。 或者说，它能选择任何包含在内 的标签。

3.2 子元素选择器

  • 作用：

    子元素选择器只能选择作为某元素子元素(亲儿子)的元素。

  • 其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接

  • 语法：

.class>h3{color:red;font-size:14px;}

 

 

  比如：  .demo > h3 {color: red;}   说明  h3 一定是demo 亲儿子。  demo 元素包含着h3。

3.3 交集选择器

条件

交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。

 

 

 语法：

 

 其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。

交集选择器 是 并且的意思。 即...又...的意思

比如：   p.one   选择的是： 类名为 .one  的 段落标签。

用的相对来说比较少，不太建议使用。

3.4 并集选择器

  • 应用：

    • 如果某些选择器定义的相同样式，就可以利用并集选择器，可以让代码更简洁。

  • 并集选择器（CSS选择器分组）是各个选择器通过,连接而成的，通常用于集体声明。

  • 语法：

 

  • 任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。

  • 记忆技巧：

    并集选择器通常用于集体声明 ，逗号隔开的，所有选择器都会执行后面样式，逗号可以理解为 和的意思。

比如 .one, p , #test {color: #F00;}
表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色。
通常用于集体声明。

3.5 链接伪类选择器

伪类选择器：

为了和我们刚才学的类选择器相区别 类选择器是一个点 比如 .demo {} 而我们的伪类 用 2个点 就是 冒号 比如 :link{} 伪娘

作用：

用于向某些选择器添加特殊的效果。比如给链接添加特殊效果， 比如可以选择 第1个，第n个元素。

因为伪类选择器很多，比如链接伪类，结构伪类等等。我们这里先给大家讲解链接伪类选择器。

  • a:link /* 未访问的链接 */

  • a:visited /* 已访问的链接 */

  • a:hover /* 鼠标移动到链接上 */

  • a:active /* 选定的链接 */

写的时候，他们的顺序尽量不要颠倒 按照 lvha 的顺序。否则可能引起错误。

因为叫链接伪类，所以都是 利用交集选择器 a:link a:hover

因为a链接浏览器具有默认样式，所以我们实际工作中都需要给链接单独指定样式。

实际工作开发中，我们很少写全四个状态，一般我们写法如下：

a {   /* a是标签选择器  所有的链接 */
            font-weight: 700;
            font-size: 16px;
            color: gray;
}
a:hover {   /* :hover 是链接伪类选择器 鼠标经过 */
            color: red; /*  鼠标经过的时候，由原来的 灰色 变成了红色 */
}

3.6   :focus 伪类选择器

定义：

:focus 伪类选择器用于选取获得焦点的表单元素。

焦点就是光标，一般情况 <input> 类表单元素才能获取

例子：

input:focus {
    background-color:yellow;
    }
 

3.7 复合选择器总结

选择器作用特征使用情况隔开符号及用法
后代选择器 用来选择元素后代 是选择所有的子孙后代 较多 符号是空格 .nav a
子代选择器 选择 最近一级元素 只选亲儿子 较少 符号是> .nav>p
交集选择器 选择两个标签交集的部分 既是 又是 较少 没有符号 p.one
并集选择器 选择某些相同样式的选择器 可以用于集体声明 较多 符号是逗号 .nav, .header
链接伪类选择器 给链接更改状态   较多 重点记住 a{} 和 a:hover 实际开发的写法
:focus 选择器 选择获得光标的表单 跟表单相关 较少 
input:focus 记住这个写法
posted @ 2021-05-15 17:29  屠魔的少年  阅读(3)  评论(0)    收藏  举报