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. Selenium之Android使用学习

    20140507 Selenium一般用在web自动化上,为什么Android上也能用呢? 如图,手机端和DB联动:手机端的客户端给server发数据流,进行增删改查操作,这种写数据用update更新 ...

  2. 【Shiro】五、Apache Shiro加密

    Shiro提供了更好封装,更好使用的加密算法API,可以作为平时使用的一个工具类的预选方案. Shiro的密码学 基本特性 接口驱动,基于POJO 对JCE(Java Cryptography Ext ...

  3. 国际C 语言乱码大赛(IOCCC )

    你也许听说过“国际C 语言乱码大赛(IOCCC )”,能获奖的人毫无疑问是世界顶级C 程序员.这是他们利用C 语言的特点极限挖掘的结果.下面这个例子就是网上广为流传的 一个经典作品:// 原始代码如下 ...

  4. 移动无线测试技能图谱skill-map

    # 移动无线测试技能图谱 ## 常用IDE- Android * ADT * Android Studio- iOS * Xcode- Common * Atom * Sublime Text * V ...

  5. java 京东登录

    package org.rx.service.media; import io.netty.channel.Channel; import io.netty.handler.codec.http.Ht ...

  6. JSHOP2

    JSHOP2是一个HTN(hierarchy task network)规划器,是SHOP2(simple hierarchy ordered planner )的java实现版本. SHOP2的官网 ...

  7. 推荐两款远程管理Linux工具(基于Windows系统)

    推荐两款远程管理Linux工具(基于Windows系统) 1.Xshell 百度百科:Xshell 是一个强大的安全终端模拟软件,它支持SSH1, SSH2, 以及Microsoft Windows ...

  8. how to catch error in make error message

    make 2>&1 | grep error -C 10 -n

  9. upc组队赛6 Greeting Card【打表】

    Greeting Card 题目描述 Quido plans to send a New Year greeting to his friend Hugo. He has recently acqui ...

  10. Python List列表的操作说明

    Python中List的N种操作,其简单程度令人叹为观止... C:\Users\rhys>python Python 2.7.14 (v2.7.14:84471935ed, Sep 16 20 ...