css选择符专题

选择符样式：

1.id选择符

为特定id的html元素指定特定的样式，id选择器以#来定义，网页中每个id只能使用一次，不得重复使用。

<style type="text/css"> /*id选择符 不推荐使用两个id*/
            #myh2{
                color: red;
                font-family: "微软雅黑";
                font-size: 23px;
            }
</style>

2.calss选择符 以.xx来定义，与id不同class允许重复使用。

<style type="text/css">
            .myh2{
                color: red;
                font-family: "微软雅黑";
                font-size: 32px;
            }
</style>

3.伪类选择符

E:link 设置超链接a在未被访问前的样式

E:visited 已被访问过时的样式

E:hover 鼠标悬停时的样式

E:active 被用户激活时的样式

<style type="text/css">
            #kkk{
                text-align: center;
                margin-top: 200px;
            }
            a:link{
                text-decoration: none;
                color: black;    
                font-family: "微软雅黑";
                font-size: 50px;
                
                
            }
            a:visited{
                color: #ccc;
            }
            a:hover{
                color: red;
            }
            a:active{
                color: blue;
            }
        </style>

4.E:focus 设置元素在成为输入焦点时的样式

<style>
h1 {
    font-size: 16px;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
input:focus {
    background: #f6f6f6;
    color: #f60;
    border: 1px solid #f60;
    outline: none;
}
</style>

5.E：lang 匹配使用特殊语言的E元素，很少用

<style>
p:lang(zh-cmn-Hans) {
    color: #f00;
}
p:lang(en) {
    color: #090;
}
</style>
</head>
<body>
<p lang="zh-cmn-Hans">大段测试文字</p>
<p lang="en">english</p>

6.E：firstchild 匹配父元素的第一个子元素e

<style type="text/css">
            .kkk li:first-child{
                font-weight: bold;
            }
        </style>

 

7.E：lastchild 匹配父元素的最后一个子元素e

<style type="text/css">
        #list li{
            border-bottom: 1px solid #ccc;            
        }
        #list li:last-child{
            border-bottom: none;
        }
    </style>

 

8.E：nthtchild 匹配父元素的第n个子元素e

<style type="text/css">
            p:nth-child(3){
                color: red;
            }
            p:{
                font-size: 20px;
                font-family: "微软雅黑";
            }
            p:first-of-type{
                color: blue;
            }
        </style>

8.target 匹配相关URL指向的e元素

<style type="text/css">
            a{
                font-size: 18px;
                text-decoration: ;
                color: black;
            }
            a:target{
                color: red;
            }

9.checked 匹配用户界面上选中的元素e

<style type="text/css">
            input:checked{
                width: 30px;
                height: 30px;
            }
        </style>

10.enable 匹配用户界面上处于可用状态的元素e

11.disable 匹配用户界面上处于禁用状态的元素e

<style>
li {
    padding: 3px;
}
input[type="text"]:enabled {
    border: 1px solid #090;
    background: #fff;
    color: red;
}
input[type="text"]:disabled {
    border: 1px solid #ccc;
    background: #eee;
    color: gold;
}

 

posted on 2016-08-10 09:20  宁缺John  阅读(174)  评论(0)  编辑  收藏  举报

导航