CSS选择器

最新推荐文章于 2021-10-15 22:54:32 发布

吴士龙

最新推荐文章于 2021-10-15 22:54:32 发布

阅读量2.8k

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/wsl211511/article/details/51427189

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

简介

关于CSS初识介绍，不做累述，参照博客。

分类

元素选择器

HTML元素是最典型的选择器类型，任何一个HTML元素都可以做为选择器。元素选择器的有效范围为页面中所有的、名称相同的HTML元素。

格式：元素 { 属性: 值; }

Demo

h1 { color: red; } h2 { color: #FF0000; } 或者：h1, h2 { color:#ff0000; }

类选择器

如果想要把某一个样式应用到不同的HTML元素上，可以采用类选择器来定义，然后在不同标签中应用它们。

格式1： .类名 { 属性: 值; }

格式2：元素.类名 { 属性: 值; }

Demo

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=gb2312" />
 <title>类选择器示例1</title>
<style type="text/css">
.tt{ font-size:10pt; font-family:黑体; color:#800080;font-weight:bold; }
</style>
</head>
<body>
<p class="tt">示例一</p>/*p标签应用名字为tt的类层叠样式表*/
<h1 class="tt">示例二</h1>/*h1标签也应用名字为tt的类层叠样式表*/
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=gb2312" />
 <title>类选择器示例2</title>
<style type="text/css">
 h1.left { color:blue; }
 h1.right { color:red; }
</style>
</head>
<body>
<h1 class="left">第一行</h1>/*h1应用名为h1.left的类样式规则/
<h1 class="right">第二行</h1>/*h1也应用名为h1.right 的类样式规则*/
</body>
</html>

ID选择器

除了使用类选择器的方式定义一个样式以外，还可以使用ID定义样式。ID与类选择器的概念相似，只是ID选择器只能被引用一次，而类选择器可以被多次引用。

格式：#id名 { 属性: 值; }

示例：#red { color: red;}

<p id="red">欢迎使用id选择器</p>

包含选择器

如果需要为位于某个标记符内的元素设置特定的样式规则，则应将选择器指定为具有上下文关系的HTML标记

h1 b{ color:blue; } /*注意h1和b之间以空格分隔*/

<html>
         <head>
                   <title>css选择器</title>
                   <meta  charset="utf-8"/>
                   <styletype="text/css">

Demo

/*标签选择器*/
                            div{
                                     border:solid 2px;
                                     height:200px;
                            }
                            /*id选择器*/
                            #div01{
                                     background-color:gold;
                                     color:red;
                            }
                            /*类选择器*/
                            .common{
                                     background-color:gray;
                            }
                           
                            /*包含选择器*/
                            divh3{
                                     color:green;
                            }
                           
                            /*子选择器*/
                            div>h3{
                                     color:red;
                            }
                            /*组选择器*/
                            div,h3{
                                    
                                     color:indigo;
                            }
                            /*伪类*/
                            input:focus{
                                     font-size:50;
                            }
                   </style>
         </head>
         <body>
                   <div  id="div01">
                            我是div01
                   </div><br/>
                   <divclass="common" id="div02">
                            <h3>今天柳絮好少</h3>
                            <table>
                                     <tr>
                                               <td>
                                                        <h3>今天柳絮好少</h3>
                                               </td>
                                     </tr>
                            </table>
                            我是div02
                   </div>
                   <h3>今天柳絮好少</h3>
                   <br/>
                   <inputtype="text" name="uanme" id="uanme"value="liling" />
         </body>
</html>