CSS属性选择符

属性选择符：

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属性选择符

最新文章

热门文章