【15】CSS基础(2)——选择器①基础选择器

★文章内容学习来源:拉勾教育大前端就业集训营

【15】CSS基础(2)——选择器①基础选择器

【15】CSS基础(2)——选择器①基础选择器_第1张图片


一、选择器是什么?

在内嵌式和外联式CSS中,要想将 CSS 样式应用于特定的 HTML 元素,首先需要找到该目标元素,这时需要用CSS 中的选择器。
选择器:选择要添加样式的 HTML 标签的一种方法、模式
回顾一下CSS规则:
【15】CSS基础(2)——选择器①基础选择器_第2张图片
以上图中p标签就是选择器,具体属于哪一类选择器,后面会详细解释。


二、选择器有哪些?

• 首先学习 css2.1 版本的七种选择器:
基础选择器:标签选择器、id 选择器、类选择器、通配符选择器;
高级选择器:后代选择器、交集选择器、并集选择器。

-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --

基础选择器

(一)标签选择器

1.含义及示例:

(1)通过标签名去选择标签元素;
(2)书写方式:标签名
(3)选择范围:选中的是HTML文件中所有的同名标签
★注:标签选择器可以选择所有的同名标签,会忽视 HTML 元素的嵌套关系,不管嵌套多深,都能被选中。
示例1其中

都是标签名


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Documenttitle>
    <style type="text/css">
        table {
      
            width: 810px;
            height: 810px;
        }
        td {
      
            text-align: center;
        }
    style>
head>

示例2其中

是标签名

p { width: 300px; font-size: 14px; }

2.特点:

(1)优点:
以选中所有的同名标签,设置所有同名标签的公共样式。
(2) 缺点:
只能实现全选,不能对局部的标签添加特殊样式。
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --

(二)id 选择器

1.含义及示例:

(1)通过标签上的 id 属性去选择标签;
(2)书写方式:#id 属性值;
(3)选择范围:只能选中一个标签.
★id 命名规则:必须以字母开头,后面可以有字母、数字、下划线、横线,严格区分大小写。每个 id 属性值必须是唯一的,不能与其他的 id 同名。
注意:如果希望多个标签设置相同的样式,使用id选择器的话,必须给这多个标签取不同的 id 名,分别选中设置。
示例

<DOCTYPE html>
<html>
    <head>
       <title>id选择器示例title>
       <style>
           #name1{
      
                color: red;
                font-weight: bold;
                font-size: 24px;
            }
       style>
    head>
    <body>
       <p id="name1" >今天真开心p>
       <p>学习使我快乐p>
       <p>继续加油p>
    body>
html>
html>

【15】CSS基础(2)——选择器①基础选择器_第3张图片

2.特点:

(1)缺点
id 选择器只能实现单选,不能帮我们完成多选的功能。
所以实际应用中很少用。
-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --

(三)类选择器

1.含义及示例:

(1)通过标签的 class 属性去选择标签;
(2)书写方式:.class属性值
(3)选择范围:是页面中所有 class 属性值相同的标签; (id唯一,属性值却可以相同)
★ class 命名规则:必须以字母开头,后面可以有字母、数字、下划线、横线,严格 区分大小写;
★class 属性值可以与其他的class相同;
(4)多个不同的标签,不区分标签类型,只要 class 属性值相同,都可以被同 一个类选择器选中;即:一个选择器可以选中多个标签,只要这个class属性在多个标签中都有; (如示例1)
(5)一个标签的 class 属性可以有多个属性值,值之间用空格分隔,每个属性值组成的选择器,都可以选中这一个标签,每个选择器后面的样式都会添加给同个标签;即:多个选择器也可以选中一个标签,只要多个class属性都在这个标签里。(如示例2)
示例1


<DOCTYPE html>
<html>
    <head>
       <title>类选择器示例title>
       <style>
           .v1 {
      
               color: blueviolet;
           }
           .v2 {
      
               font-size: 26px;
           }
           .v3 {
      
               font-weight: bold;
           }
           
       style>
    head>
    <body>
       <p class="v1" >今天真开心p>
       <p class="v1 v2 v3">学习使我快乐p>
       <p class="v1" >继续加油p>
    body>
html>

【15】CSS基础(2)——选择器①基础选择器_第4张图片

示例2

<DOCTYPE html>
<html>
    <head>
       <title>类选择器示例title>
       <style>
           .v1 {
      
               color: blueviolet;
           }
           .v2 {
      
               font-size: 26px;
           }
           .v3 {
      
               font-weight: bold;
           }
       style>
    head>
    <body>
       <p>今天真开心p>
       <p class="v1 v2 v3">学习使我快乐p>
       <p>继续加油p>
    body>
html>

【15】CSS基础(2)——选择器①基础选择器_第5张图片

2.类选择器的特殊应用

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

3.特点:

优点
①通过一个类选择器进行多选,选中多个标签,添加公共样式;
②一个标签可以被多个类选择器选中,可以将所有样式进行分离,分别提取公共样 式和单独样式,节省代码量。

实际工作中,通常我们有一个使用规律“类上样式(CSS),id 上行为(JavaScript)”
(解释: 设置样式时,常用类选择器,设置交互行为的时用id选择器)

-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- --

(四)通配符选择器

1.含义及示例:

(1)通过一个特殊符号选择页面内所有的标签;
(2)书写方式:*
(3)选择范围:包含 标签在内的所有标签。

示例


<DOCTYPE html>
<html>
    <head>
       <title>通配符选择器示例title>
       <style>
           * {
      
               color: blueviolet;
           }
       style>
    head>
    <body>
       <p>今天真开心p>
       <p>学习使我快乐p>
       <p>继续加油p>
    body>
html>

【15】CSS基础(2)——选择器①基础选择器_第6张图片

2.特点:

(1)优点
可以实现全选,简化书写。
(2)缺点:
通配符选择效率低,设置的部分公共样式不是所有标签都需要添加,如果使用通配符选择,会让不需要的标签也加载一次样式,导致浏览器多做无用的工作。
注意:实际上线的网站不允许使用*去清除默认内外边距;
不过普通的案例,代码量较少时,为了节省书写,可以使用通配符。


★下篇继续:CSS基础(2)——选择器②高级选择器…

你可能感兴趣的:(前端学习中,css,css3)