• CSS基础参考笔记


    目录

    CSS选择器:

    一.标签选择器:

    二.通配符选择器:

    三.类选择器

    四.id选择器

    五.属性选择器

     六.并集选择器

     七.后代选择器

    八.子代选择器

    九.伪类选择器

    十.兄弟选择器 


     CSS选择器

    一.标签选择器:

            标签选择器也称为类型选择器,她直接使用元素的标签名当做选择器,将选择页面上所有该种标签。

            语法:

            标签名{

                    属性:属性值;

                    .......

        作用:标签选择器可以吧某一种标签全部选择出来,比如所以的

    标签和所有的标签

        优点:能快速为页面中同类型的标签统一设置样式

        缺点:不能设计差异化样式,只能选择全部的当前标签

    二.通配符选择器:

    在CSS中,通配符选择器使用“ * ”定义,它表示选取页面中所有元素

            语法:

            *   {

                    属性:属性值

    三.类选择器

    类名为HTML元素的class属性值,大多数HTML元素都可以定义class属性

            语法:

            .  类名  {

                    属性: 属性值

     优点:可以为元素对象定义单独或相同的样式,而且多个标记可以使用同一个类名,

                可以实现为不同类型的标记指定相同的样式

    四.id选择器

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

            语法: 

            # id名{

                    属性:属性值

     id名即为HTML元素的id属性值,大多数HTML元素都可以定义id属性,元素的id值是唯一的,只能对应于文档中某一个具体的元素

    五.属性选择器

    属性选择器可以为拥有指定属性的HTML元素设置样式,而不仅限于class和id属性

            语法:

            [标签名称]{

                    属性:属性值

     六.并集选择器

    并集选择器是同时匹配多个选择器,取多个选择器的并集,选择器之间用逗号隔开

            语法:

            标签名称1,标签名称2 {

                    属性:属性值

     七.后代选择器

    后代选择器也叫包含选择器,用来选择特定元素的后代

            语法:

    div p { color: red; }
    

    八.子代选择器

    子代选择器使用“  >  ”表示,表示匹配第二个选择器,且为第一个选择器的元素的后代

            语法:

            标签名称1>标签名称2 {

                    属性:属性值

     注意:

    1.只会查找子代

    2.子元素选择器可以用其他的id和class选择器来进行查找

    3.子元素选择器也可以通过“  >  ”符号一直延续下去

    九.伪类选择器

     CSS提供了五种基本伪类选择器,分别对应HTML标记的五种状态。

    伪类选择器作用应用对象
    :hover定义标记在鼠标悬停(划过)时的样式所有显示标记
    :link定义标记在超链接状态下的样式a标签
    :focus定义标记在获取焦点时的样式a标签(IE浏览器不支持)
    :visited定义标记被访问过后的样式a标签
    :active定义标记在选定时刻下的样式a标签

    十.兄弟选择器 

     如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器。

    相邻兄弟选择器使用+号表示,如p+a{ },表示匹配紧跟第一个选择器并匹配第二个选择器的元素,如紧跟p元素后的a的元素。

  • 相关阅读:
    提升服务器性能相关
    Pikachu漏洞练习平台之XXE(XML外部实体注入)
    【SpringMVC】JSON数据传输与异常处理的使用
    一步步掌握Java IO的奥秘:深入学习BIO、NIO,实现客户端与服务器通信
    localForage封装代码
    Godot 学习笔记(1):环境配置
    XShell远程连接Ubuntu
    【计算机组成原理】数据的存储和排列
    Unity的OnOpenAsset:深入解析与实用案例
    OpenShift 4 - 用 Operator 部署 Redis 集群
  • 原文地址:https://blog.csdn.net/Dshuai7191/article/details/126491952