zoukankan      html  css  js  c++  java
  • CSS基础2——选择器

    前面说过样式规则。也知道了样式规则语法形式为:选择器+声明块

    如:div{ color:black;padding:10px; }   div即表示选择器(此处是元素选择器),花括号里的内容就是声明块。

    选择器用于指定样式规则可作用于HTML文档中的哪个或者哪些元素。

    常见的选择器类型有下面几种:

    1、元素选择器(类型选择器):匹配选择器的网页上的不论什么HTML元素,不考虑这些元素在文档树中的位置。

    如:p{ background:aqua; color:pink; }   匹配网页上的不论什么p元素,不考虑p元素在文档树中的位置

    2、类选择器:被用于选择有某个class属性的不论什么HTML元素,语法形式:.类名{属性:值;}

    <head>
    <style type="text/css">
    	.hello{
    		100px;
    		height: 100px;
    		background: #eee;
    		color: blue;
    		font-weight: bold;
    	}
    	</style>
    </head>
    <body>
    <span style="white-space:pre">	</span><div class="hello">类选择器</div>
    </body>

    同一class属性值能够再同一页面出现多次

    3、ID选择器:被用于选择有某个ID属性的不论什么HTML元素,语法形式: #id名{ 属性:值;}
    <head>
    <style type="text/css">
    	#hello{
    		100px;
    		height: 100px;
    		background: #eee;
    		color: blue;
    		font-weight: bold;
    	}
    </style>
    </head>
    <body>
    <span style="white-space:pre">	</span><div id="hello">ID选择器</div>
    </body>
    同一ID属性值在同一页面上仅仅能出现一次

    4、通配符选择器:用于选择全部元素,语法*{ 属性:值}
    5、包括选择器:用于选择文档的一个元素的后代元素

    第一种方法:

    <head>
    <style type="text/css">
    	p span{
    		font-weight: bold;
    		color:red;
    	}
    	</style>
    </head>
    <body>
    <p>how <span> are</span> you?</p>
    </body>
    另外一种方法
    <head>
    <style type="text/css">
    	p>.sp{
    		font-weight: bold;
    		color:red;
    	}
    	</style>
    </head>
    <body>
    <span style="white-space:pre">	</span><p>how <span class="sp"> are</span> you?</p>
    </body>

    6、伪类选择器以不同方式格式化超链接<a>元素的四种不同状态
    a:link{} 用在未訪问的链接的选择器

    a:visited{} 用在已訪问的链接的选择器

    a:hover{} 用在鼠标光标放在其上的链接的选择器。当中hover还能够用在别的元素中用于制作在鼠标光标放在目标上的样式的编辑

    a:active{} 用在获得焦点(比方:被点击)的链接上的选择器

    <head>
    <style type="text/css">
    	.a:link{color: #000;}
    	.a:visited{color: #ff0;}
    	.a:hover{color:red;}
    	.a:active{color:black;}
    </style>
    </head>
    <body>
    	<a href="#" class="a">点点点</a>	
    </body>
    7、伪元素选择器:

    (1) :first-line  用于一个元素的第一行的选择器

    如段落的第一行

    <head>
    <style type="text/css">
    	p:first-line{
    		color:red;
    	}
    </style>
    </head>
    <body>
    <p>hello<br/>world</p>
    </body>
    仅仅有hello是红色的

    (2) :first-letter  用于一个元素的第一个字符的选择器

    如段落的第一个字符

    <head>
    <style type="text/css">
    	p:first-letter{
    		color:red;
    	}
    </style>
    </head>
    <body>
    <p>蓦然回首</p>
    </body>
    仅仅有字是红色的。

    (3) :first-child  用于<body>中第一个是( :first-child)前面的元素的全部内容的选择器

    <head>
    <style type="text/css">
    	p:first-child{
    		color:red;
    	}
    </style>
    </head>
    <body>
    <p>蓦然回首</p>
    <p>然后呢?</p>
    </body>
    蓦然回首是红色的

    <head>
    <style type="text/css">
    	p:first-child{
    		color:red;
    	}
    	</style>
    </head>
    <body>
    <div>歌声里</div>
    <p>蓦然回首</p>
    <p>然后呢?</p>
    </body>
    没有字体内容的颜色是红色的。由于<body>中第一个元素是div,而不是p

    选择器的优先级
    :ID选择器 > 类选择器 > 伪类选择器 > 元素/伪元素选择器 > 通配符选择器




  • 相关阅读:
    不用找了,比较全的signalR例子已经为你准备好了(2)---JqGrid 服务端刷新方式-注释详细-DEMO源码下载
    不用找了,比较全的signalR例子已经为你准备好了.
    26之前,26之后
    SSIS从理论到实战,再到应用(7)----常用的数据类型转换操作
    SSIS从理论到实战,再到应用(6)----SSIS的自带日志功能
    SSIS从理论到实战,再到应用(5)----流程控制之Foreach循环
    SSIS从理论到实战,再到应用(4)----流程控制之For循环
    SSIS从理论到实战,再到应用(3)----SSIS包的变量,约束,常用容器
    SSIS从理论到实战,再到应用(2)----SSIS包的控制流
    Android学习笔记(十二)BroadcastReceiver的有序广播和优先级
  • 原文地址:https://www.cnblogs.com/slgkaifa/p/6814268.html
Copyright © 2011-2022 走看看