ylbtech-CSS:CSS 属性 选择器
1.返回顶部
1、

CSS 属性 选择器


具有特定属性的HTML元素样式

具有特定属性的HTML元素样式不仅仅是class和id

注意:IE7和IE8需声明!DOCTYPE才支持属性选择器!IE6和更低的版本不支持属性选择器。


属性选择器

下面的例子是把包含标题(title)的所有元素变为蓝色:

实例

[title] { color:blue; }

尝试一下 »


属性和值选择器

下面的实例改变了标题title='runoob'元素的边框样式:

实例

[title=runoob]
{
border:5px solid green;
}

尝试一下 »


属性和值的选择器 - 多值

下面是包含指定值的title属性的元素样式的例子,使用(~)分隔属性和值:

实例

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

尝试一下 »

下面是包含指定值的lang属性的元素样式的例子,使用(|)分隔属性和值:

实例

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

尝试一下 »


表单样式

属性选择器样式无需使用class或id的形式:

实例

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

尝试一下 »

2、
2.返回顶部
 
3.返回顶部
 
4.返回顶部
 
5.返回顶部
1、
2、
 
6.返回顶部
 
作者:ylbtech
出处:http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

CSS:CSS 属性 选择器的更多相关文章

  1. HTML&CSS基础-属性选择器

    HTML&CSS基础-属性选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> & ...

  2. 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

    01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline   ...

  3. CSS笔记——属性选择器

    1.存在和值(Presence and value)属性选择器这些属性选择器尝试匹配精确的属性值:[attr]:该选择器选择包含 attr 属性的所有元素,不论 attr 的值为何.[attr=val ...

  4. CSS基础--属性选择器、伪类选择器

    属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  5. css的属性选择器

    语法说明: 属性选择器需要将对应属性放入到 方括号中  [ ] ,其中包含属性名,标识符(* $ ~ ^ |) 使用说明: [attribute] 例如  [target] 表示 选择带有 targe ...

  6. Css 分类 属性 选择器

    Css 层叠样式表 美化页面的小工具 分类: 内联 (行内)在标签内部以属性的形式呈现,属性名style 内嵌 head标签内以标签形式呈现,标签名style 外部 head标签内 加link标签 引 ...

  7. IE6不支持CSS的属性选择器

    input[type="text"] { width: 50px; } 测试IE6不生效,而IE7以上浏览器则没问题

  8. CSS 选择器之基本选择器 属性选择器 伪类选择器

    CSS 选择器 常见的选择器列表图 CSS选择器笔记 基本选择器 通配符选择器(*) 元素选择器(E) 类选择器(.className)    所有浏览器都支持类选择器,但多类选择器(.classNa ...

  9. css的各种选择器

    一.基本选择器 1. * 通用元素选择器,匹配任何元素 2. E 标签选择器,匹配所有使用E标签的元素 3. .info class选择器,匹配所有class属性中包含info的元素 4. #foot ...

  10. CSS属性选择器温故-4

    1.属性选择器就是通过元素属性来找到元素 2.属性选择器语法 CSS3遵循了惯用的编码规则,通配符的使用提高了样式表的书写效率,也使CSS3的属性选择器更符合编码习惯 3.浏览器兼容性 CSS选择器总 ...

随机推荐

  1. AcWing 241. 楼兰图腾 (树状数组)打卡

    题目:https://www.acwing.com/problem/content/description/243/ 题意:给你n个点,问你 V 和  ^的图腾有多少个 思路:比如V 其实就是找当前点 ...

  2. VMware Hyper-V不兼容

    VMware Workstation Windows系統的Hyper-V不相容 禁用Device Guard或Credential Guard 1. 以管理員身份運行Windows Powershel ...

  3. Node.js 开发技能图谱

    # Node.js 开发技能图谱 ## Node.js 语言环境搭建 - Node.js 安装(3m大法:nvm.npm.nrm)- Node.js 命令- Node.js开发工具(推荐vscode) ...

  4. 前端工程师技能图谱skill-map

    # 前端工程师技能图谱 ## 浏览器 - IE6/7/8/9/10/11 (Trident) - Firefox (Gecko) - Chrome/Chromium (Blink) - Safari ...

  5. HTML5: HTML5 Geolocation(地理定位)

    ylbtech-HTML5: HTML5 Geolocation(地理定位) 1.返回顶部 1. HTML5 Geolocation(地理定位) HTML5 Geolocation(地理定位)用于定位 ...

  6. Java面试题一览

    Java面试题一览

  7. IO Processing

    Types of IO IRP Buffer Management 首先区分一下page的内存与nonpaged的内存,内存如果用页管理,就难免面对被swap out的命运:但是如果用nonpaged ...

  8. Java语言基础及java核心

    一.Java语言特点 1. 简单 2. 面向对象 3. 分布式 4. 健壮 5. 安全 6. 中性架构跨平台 7. 超强的可移植性 8. 高性能 9. 多线程 二.java的环境变量 JAVA_HOM ...

  9. Javascript连续赋值

    Javascript对象属于引用类型,将对象赋值给变量相当于将对象地址赋值给变量 let a = {n: 1}; let b = a; a.x = a = {n: 2}; //运算符的优先级 cons ...

  10. ACM_ICPC_Team

    题目: There are a number of people who will be attending ACM-ICPC World Finals. Each of them may be we ...