CSS基础——选择器

CSS

  • CSS的基础

    • CSS定义

      ? CSS全称为Cascading Style Sheet,中文翻译为“层叠样式表”。

    • CSS的作用

      ? 简单地来讲,CSS 能对你制作的网页进行布局、颜色、背景、宽度、高度、字体进行控制,让网页按您的美工设计布局的更加美观漂亮。 样式是用来控制页面外观、设置元素对象属性的工具,使用样式可使页面产生各种特殊的效果。

    • CSS的语法

      • 基本格式:

        <head>
            <meta charset="UTF-8">
            <title>DOC</title>
            <style type="text/css">
              /*样式表内容*/
            </style>
        </head>
  • 样式代码存在的位置

    • 直接写在标签内

      <p style="color: red">
          你好....
      </p>
    • 在head标签内写在style标签内
      <head>
          <meta charset="UTF-8">
          <title>DOC</title>
          <style type="text/css">
              /*样式表内容*/
          </style>
      </head>
      <body>
          <!--body内容-->
      </body>
    • 写在独立的CSS文件中,通过link标签引入
      <head>
           <link rel="stylesheet" href="css文件路径">
      </head>
  • CSS选择器(定义如何在HTML中找标签)

    1. 基本选择器

    • ID选择器

      • 作用:通过标签id选择标签
      <style>
          #ID {属性名: 属性}
      </style>
      • 特点:

        1、一个 ID 选择器在一个页面只能使用一次。如果使用2次或者2次以上,不符合 w3c 规范,JS 调用会出问题。

        2、一个标签只能使用一个 ID 选择器。

        3.一个标签可以同时使用类选择器和 ID 选择器。

    • 元素选择器
      • 作用:通过标签类型选择标签
      <style>
          标签名 {属性名: 属性}
      </style>
    • 类选择器
      • 作用:通过定义class属性选择标签
      <style>
          .class {属性名:属性}
      </style>
      或者
      <style>
          标签类型.class {属性名:属性}
      </style>
      • PS:

        1、谁调用,谁生效。

        2、一个标签可以调用多个类选择器。多个标签可以调用同一个类选择器。

      • 类选择器命名规则
        • 不能用纯数字或者数字开头来定义类名;
        • 不能使用特殊符号或者特殊符号开头(_ 除外)来定义类名;
        • 不建议使用汉字来定义类名;
        • 不推荐使用属性或者属性的值来定义类名。
      • 类选择器常用的命名

    • 通配符选择器
      • 格式:× {属性名: 属性值}
      • 作用:匹配所以类型的元素

    2.组合选择器

    • 定义:两个或者两个以上的的基础选择器通过不同方式连接在一起
    • 交集选择器
      • 格式:标签类(ID)选择器 {属性: 属性值;}
      • 特点:既要满足使用某个标签,还要满足使用了类选择器或者ID选择器。
        例子:
        <head>
            <style>
                div.box{
                    color: red;
                }
                div#d1{
                    width: 400px;
                    height: 300px;
                    backgroud-color: red;
                }
            </style>
        </head>
    • 后代选择器
      • 格式:选择器 选择器 {属性: 属性值;}
      • 使用条件:
        1. 后代选择器首选选择器要满足包含(嵌套)关系;
        2. 父级元素在前面,子集元素在后面。
      • 特点:无限制隔代。(多层嵌套全部生效)
        <head>
            <style>
                div span{
                    font-size: 42px;
                }
                .box span{
                    color: red;
                }
            </style>
        </head>
        <body>
            <div>
                <p class="box">
                    <span>我是div标签的孙子级的标签</span>
                </p>
            </div>
            <div><span>我是div标签的子级标签</span></div>
        </body>

        PS:只要是标签选择器,ID选择器,类选择器就可以自由组合

    • 子代选择器
      • 格式:选择器>选择器 {属性: 属性值}
      • 原则:只会选中子集的元素,下下级的元素不会选中
        <head>
            <style>
                div>span{
                    font-size: 42px;
                }
            </style>
        </head>
        <body>
            <div>
                <span>选中我</span>
                <p>
                    <span>选不中我</span>
                </p>
            </div>
        </body>
    • 毗邻选择器
      • 格式:选择器1+选择器2{属性: 属性值}
      • 作用:选择所以紧接着选择器1之后的选择器2元素
        <head>
            <style>
                div+span{
                    font-size: 42px
                }
            </style>
        </head>
        <body>
            <div>
                <span>不能找到我</span>
            </div>
            <span>可以找到我</span>
            <span>不可以找到我</span>
        </body>
    • 后续选择器
      • 格式:选择器1~选择器2{属性: 属性值}
      • 作用:选中选择器1后的所有选择器2的元素
        <head>
            <style>
                div~span{
                    font-size: 42px
                }
            </style>
        </head>
        <body>
            <div>
                <span>不能找到我</span>
            </div>
            <span>可以找到我</span>
            <span>可以找到我</span>
        </body>
    • 并集选择器
      • 格式:选择器, 选择器, 选择器{属性: 属性值;}
      • 原则:并集选择器应用于多个选择器找到的标签应用相同的样式时,为了避免重复写到一起
        <head>
            <style>
                .a,#d1,div,h2{
                    font-size: 24px
                    color: #ffffff
                }
            </style>
        </head>
    • PS:×为通配符选择器,也就是可以选中所有元素

    3.属性选择器

    <!-- 通过属性或者属性值找到标签 -->
    <style>
        div[属性] {color: red} or
        div[属性=属性值] {color: red}
    </style>
    • PS:不常用的属性选择器:
    <head>
        <style>
            /*找到所有title属性以hello开头的元素*/
            [title^="hello"] {
              color: red;
            }
    
            /*找到所有title属性以hello结尾的元素*/
            [title$="hello"] {
              color: yellow;
            }
    
            /*找到所有title属性中包含(字符串包含)hello的元素*/
            [title*="hello"] {
              color: red;
            }
    
            /*找到所有title属性(有多个值或值以空格分割)中有一个值为hello的元素:*/
            [title~="hello"] {
              color: green;
            }
        </style>
    </head>

    4.伪类选择器

  • 状态:同一个标签在不同时刻会有不同状态
    /*未访问的链接*/
    a:link {
      color: red;
    }
    /*已经访问的链接*/
    a:visited {
        color: blue;
    }
    /*鼠标移动到链接上*/
    a:hover {
        color: #FF00FF;
    }
    /*选定的链接,就是在鼠标点击的时候*/
    a:active {
        color: pink;
    }
    /*input输入框获取焦点时的样式*/
    input:focus {
        outline: none
        backgroud-color: #eee
    }

    5.伪元素选择器

使用CSS生成一个新的标签属性

  • 设置标签内容的首个字的形式firist-letter

    p:first-letter {
        font-size: 48px;
        color: red;
    }
  • 在标签内容的开头加入新的内容before
    p:before {
      content:"*";
      color:red;
    }
  • 在标签内容的结尾加入新的内容after
    p:after {
      content:"[?]";
      color:blue;
    } 

PS:before and after常用于清除浮动。

6.选择器的优先级

  • 原则一:选择器相同时,谁最后加载就变成什么样子。
  • 原则二:选择器不同的时候,按照权重选择。
  • PS1:各个选择器的权重:内联选择器权重最高>id选择器权重次之>类选择器权重第三>元素选择器最低

  • 原则三:权重选择器永不进位。
  • PS2:紧急情况样式的修改使用:样式!inportant;,不到最后不使用,因为破坏逻辑,使得这个样式始终显示。

原文地址:https://www.cnblogs.com/abner28/p/9794862.html

时间: 2024-10-11 00:06:04

CSS基础——选择器的相关文章

Css3之基础-2 Css 基础选择器

一.Css 基础选择器 通用选择器 通用选择器 - 通用选择器,显示为一个星号(*) - 可以与任何元素匹配 - 常用于设置一些默认样式,比如设置整个文档的文本的默认字体和大小 元素选择器 - html文档的元素就是选择器 - 比如<p>.<h1>等 类选择器 - 语法为: .className {color:read;} - 类名称不能以数字开头 - 所有能够附带class属性的元素都可以使用此样式声明 - 将元素的class属性的值设置为样式类名 - 可以将多个类选择器应用于同

CSS入门(css简介与样式汇总、CSS的使用方式、CSS样式表的特征、CSS基础选择器和复杂选择器、边框阴影)

一.CSS的作用 1.以统一的方式实现样式的定义 2.提高页面样式的可重用性和可维护性 3.实现了内容(HTML)和表示(CSS)的分离 HTML和CSS之间有什么关系? HTML:构建网页的结构 CSS :构建HTML元素的样式 样式汇总: color:red 字体颜色 font-size:字体大小 font-family:字体样式 background-color 背景颜色 width:宽度 height:高度 字体使用实例(样式) font-family:字体的种类 font-size:字

0009 CSS基础选择器( 标签、类、id、通配符)

typora-copy-images-to: media 第01阶段.前端基础.CSS基础选择器 CSS选择器(重点) 学习目标: 理解 能说出选择器的作用 id选择器和类选择器的区别 应用 能够使用基础选择器给页面元素添加样式 1. CSS选择器作用(重点) 如上图所以,要把里面的小黄人分为2组,最快的方法怎办? 很多, 比如 一只眼睛的一组,剩下的一组 选择器的作用 ? 找到特定的HTML页面元素 一句话说出他们: ※※※※ CSS选择器干啥的? 选择标签用的, 把我们想要的标签选择出来 必

CSS基础-选择器

CSS CCS是层叠样式表(Cascading Style Sheets)的缩写 2.1 CSS引入方式 内联样式表:卸载标签的开始标记中,其作用范围仅限当前元素 <h1 style="color:red">红色标题</h1> 2.内部样式表:写在网页的<head>标签内,,写在<title>标签后,用<style>标签包含,其作用范围仅限当前网页 <style> h1{ colo:red } </style

CSS【03】:CSS 基础选择器与三种引入方式

基础选择器 选择器:css 选择 html 标签的一个工具,是将 css 与 html 建立起联系,那么 css 就可以控制 html 样式 选择器其实就是给 html 标签起名字 标签选择器 作用:根据指定的标签名称,在当前界面中找到所有该名称的标签,然后设置属性 格式: 标签名称 { 属性: 值; } 注意点: 标签选择器选中的是当前界面中所有的标签,而不能单独选中某一个标签 标签选择器无论标签藏得多深都能选中 id选择器 作用:根据指定的 id 名称找到对应的标签,然后设置属性 格式: #

CSS基础选择器

1.html负责结构,css负责样式,js负责行为. css是写在head标签里面,容器style标签里面, <style type="text/css"> body{ background-color:pink; } </style> 2.标签选择器:就是使用html中的标签对来当做选择器 (1)所有的标签都能当做选择器,比如说body,h1,ul,span等等. (2)不管当前的标签藏得多深,都能被选上. (3)选择的是所有,而不是某个. 3.类选择器 写法

CSS 基础-选择器-边框和背景-文本样式

CSS3 选择器 本文内容部分来自于https://developer.mozilla.org/zh-CN/docs/Learn/CSS 选择器可以被分为以下类别: 简单选择器(Simple selectors):通过元素类型.class 或 id 匹配一个或多个元素. 属性选择器(Attribute selectors):通过 属性 / 属性值 匹配一个或多个元素. 伪类(Pseudo-classes):匹配处于确定状态的一个或多个元素,比如被鼠标指针悬停的元素,或当前被选中或未选中的复选框,

css基础 选择器-通配符* 给所有的标记设置属性(兼容性不好)

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

css基础 选择器 id 设置样式 简单示例

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"