日期:2014-05-17  浏览次数:20611 次

CSS如何以标签的name属性定位?
css中 id可以以

#id{

}
class以
.class{
}

那么name怎么定位?

可以实现吗?

------解决方案--------------------
upup,有没有人会实现?
------------------
可以用CSS2中的属性选择符,即
HTML code
语法:
E [ attr ] { sRules } 
E [ attr = value ] { sRules } 
E [ attr ~= value ] { sRules } 
E [ attr |= value ] { sRules } 

说明:
属性选择符。 
选择具有 attr 属性的 E 
选择具有 attr 属性且属性值等于 value 的 E 
选择具有 attr 属性且属性值为一用空格分隔的字词列表,其中一个等于 value 的 E 。这里的 value 不能包含空格 
选择具有 attr 属性且属性值为一用连字符分隔的字词列表,由 value 开始的 E

------解决方案--------------------
写个小例子!

L@_@K
HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>dhtml.css.applyStyleByName.html</title>
    <meta name="generator" content="editplus" />
    <meta name="author" content="Gao YiXiang" />
    <meta name="email" content="yixianggao@126.com" />
    <meta name="keywords" content="javascript dhtml dom" />
    <meta name="description" content="I love web development." />
    <style type="text/css">
/* for IE */
/* 自定义命名规则 */
.div_name_hideList
{ 
    display: none; 
}

/* for FF */
div[name="hideList"]
{ 
    display:none; 
}

div
{
    width: 100px;
    height: 100px;
    background-color: red;
}
.blue
{
    background-color: blue;
}
    </style>
</head>
<body>
    <h3>根据name属性设置样式!IE6sp1, FF2 测试可用!</h3>
    <div name="hideList"></div>
    <div class="blue"></div>    
</body>
<script type="text/javascript">
<!--
// For IE.
function applyStyleByName(sClassName)
{
    var a = sClassName.split("_");
    var c = document.getElementsByTagName(a[0]);

    for (var i=0; i<c.length; i++)
    {
        if (c[i][a[1]]==a[2])
        {
            c[i].className = sClassName;
        }
    }
}

applyStyleByName("div_name_hideList");
//-->
</script>
</html>