CSS的属性选择器使用详解(css入门教程)

CSS的属性选择器使用详解(css入门教程)

对带有指定属性的 HTML 元素设置样式。        ( 推荐学习:CSS入门教程 )

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

注:只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中,不支持属性选择。

属性选择器

立即学习“前端免费学习笔记(深入)”;

下面的例子为带有 title 属性的所有元素设置样式:

[title]{color:red;}

属性和值选择器

下面的例子为 title=”W3School” 的所有元素设置样式:

[title=hello]{border:5px solid blue;}

属性和值选择器 – 多个值

下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值:

[title~=hello] { color:red; }

下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值:

[lang|=en] { color:red; }

设置表单的样式

属性选择器在为不带有 class 或 id 的表单设置样式时特别有用:

input[type="text"]{  width:150px;  display:block;  margin-bottom:10px;  background-color:yellow;  font-family: Verdana, Arial;}input[type="button"]{  width:120px;  margin-left:35px;  display:block;  font-family: Verdana, Arial;}

以上就是CSS的属性选择器使用详解(css入门教程)的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1614793.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 04:34:16
下一篇 2025年12月24日 04:34:26

相关推荐

  • css如何插入样式表

    如何插入样式表 当读到一个样式表时,浏览器会根据它来格式化 HTML 文档。插入样式表的方法有三种: 外部样式表          ( 推荐学习:CSS入门教程 ) 当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使…

    2025年12月24日
    000
  • CSS背景怎么设置

    CSS允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果。 CSS在这方面的能力远远在 HTML 之上。        ( 推荐学习:CSS基础教程 ) 背景色 可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。 立即学习“前端免费学习笔记(深入…

    2025年12月24日
    000
  • CSS怎样缩进文本?

    CSS 文本属性可定义文本的外观。 缩进文本 把 Web 页面上的段落的第一行缩进,这是一种最常用的文本格式化效果。        ( 推荐学习:CSS入门教程 ) CSS 提供了 text-indent 属性,该属性可以方便地实现文本缩进。 立即学习“前端免费学习笔记(深入)”; 通过使用 tex…

    2025年12月24日
    000
  • 在CSS中字体加粗要怎么做?

    字体加粗 font-weight 属性设置文本的粗细。 使用 bold 关键字可以将文本设置为粗体。        ( 推荐学习:CSS基础教程 ) 关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别,那么这些数字就直接映射到预定义的级别,100 对应最细的字体变…

    2025年12月24日
    000
  • CSS的表格边框使用什么属性设置

    表格边框 如需在 CSS 中设置表格边框,请使用 border 属性。    ( 推荐学习:CSS入门教程 ) 下面的例子为 table、th 以及 td 设置了蓝色边框: table,th,td{border:1px solid blue;}FirstnameLastnameBillGatesSt…

    2025年12月24日
    000
  • CSS框模型概念介绍

    CSS框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。 CSS 框模型概述             ( 推荐学习:CSS基础教程 ) 元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距…

    2025年12月24日
    000
  • 清除浮动的css写法有哪些

    本文通过图文并茂的形式给大家介绍了CSS浮动与清除浮动的实例代码,非常不错,具有一定的参考借鉴价值,,需要的朋友可以参考下  一、float(浮动)是什么 float 属性定义元素在哪个方向浮动。 float:left 元素向左浮动。 float:right 元素向右浮动。 立即学习“前端免费学习笔…

    2025年12月24日 好文分享
    000
  • sass系统是什么

    sass2007年诞生,最早也是最成熟的css预处理器,拥有ruby社区的支持和compass这一最强大的css框架,目前受less影响,已经进化到了全面兼容css的scss。 Sass(英文全称:Syntactically Awesome Stylesheets)是一个最初由Hampton Cat…

    2025年12月24日
    000
  • css全称

    css层叠样式表(英文全称:cascading style sheets)是一种用来表现html(标准通用标记语言的一个应用)或xml(标准通用标记语言的一个子集)等文件样式的计算机语言。 CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。(推荐学习:CSS3视频教程…

    2025年12月24日
    000
  • css如何实现表格实线

    利用在css设置表格实线: 代码如下: table{border-collapse:collapse; /*表示将单元格中各小格之间的空隙进行合并*/border:1px #00F solid; /*定义边框样式*/} 示例: 无标题页table { border-collapse: collaps…

    2025年12月24日
    000
  • css样式属性是什么

    推荐教程:CSS教程 简介   层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。  …

    2025年12月24日
    000
  • CSS滤镜和混合模式处理的图片如何上传下载?

    一、使用CSS滤镜和混合模式在线PS(推荐学习:CSS视频教程) 使用CSS滤镜和混合模式可以实现各种各样的图像处理效果,例如CSSgram项目,内置众多图像处理效果,部分效果示意如下缩略图: 进入demo页面你也可以点击这里的按钮,更换你本地的素材,查看对应的图像效果: 立即学习“前端免费学习笔记…

    2025年12月24日 好文分享
    000
  • css隐藏元素的几种方法中可以触发点击事件的是?

    css隐藏元素的几种方法中可以触发点击事件的是 是opacity设置为0的方法。 css隐藏元素的方式: 1、display:none; .box{ display: none;} 最简单也最粗暴的方法就是设置元素的display属性为none。 立即学习“前端免费学习笔记(深入)”; 设置为dis…

    2025年12月24日
    000
  • 为什么把css放到顶部

    原因: CSS文件放在顶部一方面是因为放置顺序决定了下载的优先级,更关键的是浏览器的渲染机制。 最理想的情况,我们希望浏览器逐渐的渲染下载好的CSS,将页面逐渐的展现给用户。但是浏览器为了避免样式变化时重新渲染绘制页面元素,会阻塞内容逐步呈现,浏览器等待所有样式加载完成之后才一次性渲染呈现页面。 如…

    2025年12月24日
    000
  • css相对定位什么意思

    相对定位(relative)意思:对象不可层叠,依据left,right,top,bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。 扩展知识: 绝对定位(absolute)意思是:将被赋予此定位方法的对象从文档流中拖出,使用left,right,top, bottom…

    2025年12月24日
    000
  • css单位是什么

    css是一种样式表语言,用于为html文档定义布局。而刚刚接触css的朋友可能不是很清楚,css的单位是什么?下面我们来详细了解一下css的单位吧。 CSS单位是一种量度单位,包括尺寸单位和颜色单位。 尺寸单位: 颜色单位: 立即学习“前端免费学习笔记(深入)”; 以上就是css单位是什么的详细内容…

    2025年12月24日
    000
  • 什么是css盒子模型?

    CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。它又称为框模型 (Box Model) ,是由元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素组成的(如下图所示)。 这些属性我们可以把它转移到我们日常生活中的盒子(箱子…

    2025年12月24日
    000
  • 什么是css的行内式?

    行内样式,就是将css样式代码写在具体网页中的一个html标签元素内;行内样式要在特定的html标记内使用,使用style属性来设置特定html标记的样式。比如: 特点: 1)、行内样式放在代码中的HTML元素中。 2)、使用行内样式时,样式只会影响你选择的元素。 3)、行内样式没有选择器 立即学习…

    2025年12月24日
    000
  • css左浮动怎么写?

    在css中可以通过float属性来定义元素在哪个方向浮动;想要左浮动则只需将元素的float属性的值设置为left(float:left)即可。下面就来给大家介绍一下float属性,希望对你们有所帮助。 css float属性 float 属性指定一个盒子(元素)是否应该浮动,在哪个方向浮动。浮动元…

    2025年12月24日
    000
  • 怎么在css中改变光标样式

    在css中cursor属性是用来定义了鼠标指针放在一个元素边界范围内时所用的光标形状;我们可以通cursor属性来设置鼠标光标(指针)样式。 cursor属性的语法: cursor: auto|crosshair|default|hand|move|help|wait|text|w-resize|s…

    好文分享 2025年12月24日
    000

发表回复

登录后才能评论
关注微信