[黑马程序员]css选择器总结

最新推荐文章于 2025-08-06 16:35:17 发布

niujingliang

最新推荐文章于 2025-08-06 16:35:17 发布

阅读量355

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： css class input windows phone .net 手机

本文链接：https://blog.youkuaiyun.com/niujingliang/article/details/7605286

CSS 专栏收录该内容

0 篇文章

订阅专栏

本文详细介绍了CSS中三种基本的选择器：标签选择器、class选择器和id选择器的使用方法，并展示了如何将它们组合使用以实现更复杂的样式设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

---------------------- Windows Phone 7手机开发、.Net培训、期待与您交流！ ----------------------

1.对于非元素内联的样式需要定义样式选择器，通俗的话就是这个样式适合于哪些元素，有三种:标签选择器、class选择器和id选择器。
2.标签选择器，input{border-color:red;color:green;},是对于指定的标签采用统一的样式。
3.class选择器，以定义一个命名的样式，然后在用到它的时候设定元素的class属性为样式的名称，还可同时设定多个class，名称之间加空格，样式名称开头加‘.’,举个例子:
.warning{background-color:Red;}
.highlight{font-size:xx-large;cursor:help;}
---------------------------------------------------
<div class="warning">hello</div>
    <div class="highlight">world</div>
    <div class="highlight warning">boys</div>
4.class选择器可以和标签选择器结合来使用
<style type="text/css">
        .warning{background-color:Red;}
     .highlight{font-size:xx-large;cursor:help;}

     input.accountno{text-align:right;color:Green}
     label.accountno{font-style:italic;}
   </style>
------------------------------------------------------
<input class="accountno" type="text" value="123456" />
    <label class="accountno" >123456</label>
5.id选择器，是为指定的id设定样式，id前加#
<style type="text/css">
            .warning{background-color:Red;}
     .highlight{font-size:xx-large;cursor:help;}

     input.accountno{text-align:right;color:Green}
     label.accountno{font-style:italic;}

     #username
     {
         font-size:xx-large;
     }
   </style>
----------------------------------------------------
<input id="username" type="text" value="wwwwww" />
6.以上三种可以结合使用
<input id="username" type="text" class="accountno" style="display:block" value="kkkkk"/>
7.其他选择器
7-1 关联选择器
p strong{background-color:Yellow;}
-------------------------------------------------
<p><strong>ljfjljs</strong></p>
7-2 组合选择器
h1,h2,input{background-color:Purple;}
-------------------------------------------------
<h1>hello</h1>
    <input type="text" value="lljlskk"/>
7-3 伪选择器，为标签的不同状态设定不同的样式
A:visited超链接点击过的样式，A:active选中超链接的样式，A:link超链接未被访问的状态， A:hover鼠标移到超链接时的状态。
A:visited{TEXT-DECORATION:none}
    A:active{TEXT-DECORATION:none}
    A:link{TEXT-DECORATION:none}
    A:hover{TEXT-DECORATION:underline}