php学习之css选择器(二)

1.标准选择器:通配符选择器、标记选择器、类选择器、id选择器

  • 通配符选择器
    • 语法:*{color:red;}
    • 注意:通配符是选择上所有的标记,。通配符包括body里的样式,但是少用,IE6不支持
    • 案例:
  • 标记选择器:
    • 说明:直接写标记名当成选择器来使用,选择器哪个标记当前这个页面中所有这个标记都会发生改变
    • 语法:标记名{color:red}
    • 案例:
  • 类选择器:又称“class选择器”
    • 说明:每个html标记都有一个公共属性,class属性配合css使用的,这个class属性就是给某个或某些标记加一类样式
    • 语法:class属性的值{color:red;}
    • 注意:类名可以给不同的标记加上,这个时候这些标记统称一类
      • 在写class选择器时必须加点(.)
      • 建议不管是某个还是某些标记都使用类的方法
    • 案例:
  • id选择器
    • 说明:每个html标记都有一个公共的属性id,每个id必须时唯一的
    • 语法:#id 的值{color:red;}
    • 注意:id选择器只是给一个标记加样式,一般用js的动态效果使用,id和class时分开使用的,id给js使用,class给css使用
    • 案例:

2.复杂选择器:多元素选择器、后代选择器、子类选择器、伪类选择器

  • 多元素选择器:
    • 说明:把css的基本选择器进行组合,组合成多种选择器方式
    • 语法:div,ul,li,.class,#id,{color:red;}
    • 注意:大型网站一般都用多元素来替代通配符,每个选择器用英文逗号隔开
    • 案例:
  • 后代选择器:
    • 说明:在制作网站时会出现嵌套的形式,有可能时多级嵌套,而且每个多级里面标记还相同,这个时候就可以用某个标记中的某个内容
    • 语法:第一层  第二层   第三层。。。。{color:red}
    • 注意:如果某一层有相同的标记都会选择,需要每层都写清楚                p标记中不能嵌套一些块元素
    • 案例
  • 子类选择器:
    • 说明:就是选择一代(子孙)不能隔代
    • 语法:父类(选择器)>子类(选择器){color:red;}
    • 案例:
  • 伪类选择器:
    • 说明:给超链接加样式的方法:<a href=”#”></a>
    • link:默认状态
    • hover:放上状态
    • active:当点击时的状态(不放手)
    • visited:访问过的状态
    • 语法:选择器状态{color:fed}
    • 注意:一般是默认状态和访问过状态设置成一样的效果           所有的标记都可以加伪类选择器
    • 案例:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java帮帮-微信公众号-技术文章全总结

03.HTML头部/CSS/图像/表格/列表

03.HTML头部/CSS/图像/表格/列表 HTML <head> 查看在线实例 <title> - 定义了HTML文档的标题 使用 <title> 标签定义...

1.1K9
来自专栏九彩拼盘的叨叨叨

CSS 核心技能点

1002
来自专栏十月梦想

bootstrap表格

条纹表格.table-striped(作用在table的class类名),实现隔行换色

882
来自专栏自动化测试实战

HTML第三课——css盒子【2】

29614
来自专栏每日一篇技术文章

weex-21-animation模块

我们在开发应用的时候,常常需要增加一些动画效果,来提高用户体验,经常用到的一些动画效果如下

2191
来自专栏腾讯NEXT学位

CSS布局解决方案(下)

2557
来自专栏企鹅号快讯

css层叠样式表

CSS概述 CSS(Cascading Style Sheets的缩写),翻译为“层叠样式表”或者“级联样式表”,简称样式表 主要作用 为了让网页元素的样式更加...

41111
来自专栏流柯技术学院

selenium截取具体元素图片(python版)

element = driver.find_element_by_id("xx")

1091
来自专栏青玉伏案

web前端基础知识总结

上个寒假总结的web前端的一些知识点给大家分享一下 1、<html>和</html> 标签限定了文档的开始和结束点。 属性: (1)  dir: 文本的显示方向...

2525
来自专栏性能与架构

浏览器如何完成网页渲染?

image.png 渲染流程 (1)把HTML代码形成文档对象模型DOM (2)加载并解析样式文件,形成CSS对象模型 (3)在DOM和CSS对象模型基础上,把...

2766

扫码关注云+社区

领取腾讯云代金券