CSS属性选择符

时间：2022-07-06 05:14:38

属性选择符：

E[att]　　　　　　选择具有att属性的E元素。

<style type="text/css">

a[class]{ background-color: red;}

</style>

<body>

<a href="" class="a">链接a</a>

<a href="" id="b">链接b</a>

</body>

E[att="val"] 　　　选择具有att属性且属性值等于valu的E元素。

<style type="text/css">

a[class="1"]{ background-color: red;}

</style>

<body>

<a href=""  class="1">链接a</a>

<a href=""  class="2">链接b</a>

</body>

E[att~="val"]　　　　选择具有att属性且属性值为一用空格分隔的字词列表，其中一个等于val的E元素。

<style>

a[class~="id"]{color: red;}

</style>

<body>

<ul>

<li><a href="" class="id 1">链接a</a></li>

<li><a href="" class="1">链接b</a></li>

<li><a href="" class="1">链接b</a></li>

</body>

E[att^="val"]　　　　选择具有att属性且属性值为以val开头的字符串的E元素。

<style>

a[title~=""]

{color:red;}

</style>

<body>

<a href="http://www.163.com/" title="www 163 com">红色</a>

<a href="http://www.baidu.com/" title="www baidu com">红色</a>

</body>

E[att$="val"]　　　　选择具有att属性且属性值为以val结尾的字符串的E元素。

<style>

li[class$="a"] {color: #f00;}

</style>

</head>

<body>

<ul>

<li class="abc">列表项目</li>

<li class="acb">列表项目</li>

</ul>

</body>

E[att*="val"]　　　　选择具有att属性且属性值为包含val的字符串的E元素。

<style type="text/css">

a[href*=".html"]{color:red;}

a[href*=".php"]{color:green;}

a[href*=".jsp"]{color:blue;}

</style>

<body>

<a href="http://www.dreamdu.com/css.html?id=1&name=www">梦之都红色字体</a>

<a href="http://www.dreamdu.com/css.php?id=2&name=dreamdu">梦之都绿色字体</a>

<a href="http://www.dreamdu.com/css.jsp?id=3&name=com">梦之都蓝色字体</a>

</body>

E[att|="val"]　　　　选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。

<style type="text/css">

a[title~="dreamdu"]{color:red;}

</style>

<body>

<a href="http://www.dreamdu.com/" title="www dreamdu com">红色</a>

</body>

font-family，font-size，font-weight，font-style

<style type="text/css">

p { font-family: "宋体";}

h1 { font-size:14px ;}

h2 { font-weight: normal ;}

h3 {font-style: italic;}

</style>

</head>

<body>

<p>这是一个标签</p>

<h1>这是一个标签</h1>

<h2>这是一个标签</h2>

<h3>这是一个标签</h3>

</body>

font(字体样式缩写)

<style type="text/css">

/*p{font-style:italic;

font-weight:bold;

font-size:14px;

line-height:22px;

font-family:宋体;}*/

p {font:italic bold 14px/22px 宋体}

</style>

</head>

<body>

<p>这是一个标签</p>

</body>

</html>

text-decoration(文本装饰线条)，text-shadow(文字阴影)

<style type="text/css">

p { text-decoration: underline;

text-shadow: 2px 2px #ff0000; }

</style>

</head>

<body>

<p>这是一个标签</p>

</body>

width，height

<style type="text/css">

p { width:300px;}

div { height:100px; padding: 1px; border:1px solid;}

</style>

</head>

<body>

<p>这是一个标签这是一个标签这是一个标签这是一个标签</p>

<div>这是一个标签</div>

</body>

CSS属性选择符

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

  1. 强大的CSS 属性选择符 配合 stylish 屏蔽新浪微博信息流广告

    新建一条微博域名下的规则: @-moz-document domain("weibo.com") { #v6_pl_rightmod_rank,#v6_pl_rightmod_ad ...

  2. &num;8&period;10&period;16总结&num; 属性选择符 伪对象选择符 CSS的常用样式

    属性选择符 E[att] E[att="val"] E[att~="val"] E[att^="val"] E[att$="val ...

  3. css关系选择符

    <!Doctype html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. CSS3初学篇章&lowbar;3（属性选择符&sol;字体样式&sol;元素样式）

    属性选择符  选择符  说明  E[att]  选择具有att属性的E元素.  E[att="val"]  选择具有att属性且属性值等于val的E元素.  E[att~=&quo ...

  5. CSS 组合选择符

    CSS 组合选择符 组合选择符说明了两个选择器直接的关系. CSS组合选择符包括各种简单选择符的组合方式. 在 CSS3 中包含了四种组合方式: 后代选取器(以空格分隔) 子元素选择器(以大于号分隔) ...

  6. CSS：CSS 组合选择符

    ylbtech-CSS:CSS 组合选择符 1.返回顶部 1. CSS 组合选择符 CSS 组合选择符 组合选择符说明了两个选择器直接的关系. CSS组合选择符包括各种简单选择符的组合方式. 在 CS ...

  7. CSS高级选择符

    2016-11-07 <css入门经典>第八章 1.属性选择器 选择器 描述 [attribute] 用于选取带有指定属性的元素. [attribute=value] 用于选取带有指定属性 ...

  8. CSS 的选择符

    CSS是什么? 如果说元素是标记代码的构建块料,那么CSS就是约束这些构建块料样式的规则. CSS规则的组成 CSS的规则由 选择符 和属性,值组成. Css选择符:选择符是规则中用于确定样式所涵盖的 ...

  9. CSS之选择符、链接、盒子模型、显示隐藏元素

    <html> <head> <meta charset="utf-8"> <title>选择符.链接.盒子模型.显示隐藏元素< ...

随机推荐

  1. 关于2016&period;12&period;12——T1的反思：凸包的意义与应用

    2016.12.12 T1 给n个圆,保证圆圆相离,求将圆围起来的最小周长.n<=100 就像上图.考场上,我就想用切线的角度来做凸包.以圆心x,y排序,像点凸包一样,不过用两圆之间的下切线角度 ...

  2. OpenCASCADE Conic to BSpline Curves-Circle

    OpenCASCADE Conic to BSpline Curves-Circle eryar@163.com Abstract. The conic sections and circles pl ...

  3. C&num; 6&period;0新特性（转载）

    简介 VS 2015中已经包含C# 6.0. C#在发布不同版本时,C#总是会有新特性,比如C#3.0中出现LINQ,C#4.0中的动态特性,c#5.0中的异步操作等.. C# 6.0中与增加了不少新 ...

  4. 抓取Bing每日图片作为网站首页背景

    把Bing搜索的背景图片设置为自己网站的背景,实现背景及资讯的每日更新 效果图如下: 理一下思路,首先我们要抓取Bing的每日图片及最新资讯,然后保存图片及信息到本地,最后显示图片及资讯到网站首页. ...

  5. 转：完善eclipse&plus;pdt作php开发中的代码提示能力

    在eclipse开发中 ,可能由于各种原因导致项目文件(eclipse内置)丢失或错乱, 因而, 失去一些能力.. 以下是经过被痛苦折磨后查阅总结的一点东西 设置完下面内容, 支持以下特性 PHP: ...

  6. apache访问日志分析&lbrack;转&rsqb;

    当前WEB服务器中联接次数最多的ip地址 #netstat -ntu |awk '{print $5}' |sort | uniq -c| sort -nr 查看日志中访问次数最多的前10个IP #c ...

  7. 宝塔Linux面板命令大全

    安装宝塔 Centos安装脚本 yum install -y wget && wget -O install.sh http://download.bt.cn/install/inst ...

  8. ●BOZJ 1927 &lbrack;Sdoi2010&rsqb;星际竞速

    题链: http://www.lydsy.com/JudgeOnline/problem.php?id=1927 题解: 显然是个DAG 建图和有向图最小路径覆盖的建图有些相似. 都是拆点为 u u' ...

  9. SVN服务器&plus;客户端安装和配置

    先安装客户端.然后安装语言包,然后去小乌龟svn里设置语言为中文. svnServer推荐 subversion和 VisualSVN 网盘下载 TortoiseSVN客户端         汉化包网 ...

  10. s21day17 python笔记

    s21day17 python笔记 一.内容回顾及补充 回顾 补充 第三方模块补充 需要下载安装后才能导入使用 安装方式: pip包管理工具 # 把pip.exe 所在的目录添加到环境变量中. pip ...

相关文章