• 中文
    • English
  • 注册
  • 赞助本站

    • 支付宝
    • 微信
    • QQ

    感谢一直支持本站的所有人!

    • 查看作者
    • 2:CSS选择器

      一.  标签选择器

      根据标签名选择元素。语法:标签名{}

      p{
      color:red;
      }
      /*将该样式应用到所有的p标签*/

      二.  类选择器

      根据class属性选择元素。语法:.className{}

      注意,class属性的值可重复

      .jia{
      color:red;
      }
      /*将该样式应用到所有class名为jia的元素*/

      三.  ID选择器

      根据id属性的值选择元素。语法:#idName{}

      注意,id属性的值不可重复

      #jia{
      color:red;
      }
      /*将该样式应用到id名为jia的元素*/

      四.  通用选择器

      通用选择器,可以同时选中页面中的所有元素。语法:*{}

      *{
      color:red;
      }
      /*将该样式所有元素*/

      五.  复合选择器

      复合选择器(交集),可以同时使用多个选择器,这样可以选择同时满足多个选择器的元素

      语法:选择器1选择器2{}  ,注意两个选择器是紧挨着的,下面的p.zj是因为class的选择器是.zj

      选择器一必须是标签选择器,第二个必须是类选择器或者ID选择器;这两个选择器之间不能有空格。

      <!DOCTYPE html>
      <html>
      	<head>
      		<title> 标题 </title>
      		<meta charset='UTF-8'/>
      		<style>
      			p.zj{
      				color:red;
      			}
      		</style>	
      	</head>
      	<body>
      		<p class = "zj">
      		段落一
      		</p>
      		<p>
      		段落二
      		</p>
      	</body>
      </html>

      2:CSS选择器

      六.  群组选择器

      群组选择器(并集),可以同时使用多个选择器,多个选择器将被同时应用指定的样式。

      语法:选择器1,选择器2,选择器3{}

      <!DOCTYPE html>
      <html>
      	<head>
      		<title> 标题 </title>
      		<meta charset='UTF-8'/>
      		<style >
      			p,.zj,#jia{
      				color:red;
      			}
      		</style>	
      	</head>
      	<body>
      		<p class = "zj">
      		段落一
      		</p>
      		<p id ="jia">
      		段落二
      		</p>
      		<p >
      		段落三
      		</p>
      		<div>
      		段落四
      		</div>
      	</body>
      </html>

         2:CSS选择器

      七.  标签之间的关系

      • 祖先元素:直接或间接包含后代元素的元素

      • 后代元素:直接或间接被祖先元素包含的元素

      • 父元素:直接包含子元素的元素

      • 子元素:直接被父元素包含的元素

      • 兄弟元素:拥有相同父元素的元素

      <!DOCTYPE html>
      <html>
      	<head>
      		<title> 标题 </title>
      		<meta charset='UTF-8'/>
      			
      			
      	</head>
      	<body>
      		<div>
      			<span>
      				<p>
      				</p>
      			</span>
      		</div>
      		
      		<hr />
      	</body>
      </html>

      body标签是div、span、p、hr 标签的祖先元素
      div、span、p、hr 标签是body的后代元素
      body是div的父元素,div是span的父元素,span是p的父元素
      div是body的子元素,span是div的子元素,p是span是子元素
      head 和 body 标签是兄弟元素,hr和div也是兄弟元素

      八.  后代选择器

      后代选择器可以根据标签之间的关系,为处在元素内部的后代元素设置样式

      语法:祖先元素 后代元素 后代元素{}

      <!DOCTYPE html>
      <html>
      	<head>
      		<title> 标题 </title>
      		<meta charset='UTF-8'/>
      		<style >
      			div span{
      				color:blue;
      			}
      		</style>	
      	</head>
      	<body>
      		<div>
      			<span>
      			张甲博客
      			</span>
      		</div>
      		<br />
      	    <span>
      			张甲博客
      		</span>
      	</body>
      </html>

      2:CSS选择器

      九.  子元素选择器

      子元素选择器可以给一个元素的子元素设置样式

      语法:父元素>子元素{}

      <!DOCTYPE html>
      <html>
      	<head>
      		<title> 标题 </title>
      		<meta charset='UTF-8'/>
      		<style >
      			div>p{
      				color:blue;
      			}
      		</style>	
      	</head>
      	<body>
      		<div>
      			<p>
      				张甲博客
      			</p>
      		</div>
      	   	<div>
      			<span>
      				<p>
      					张甲博客
      				</p>
      			</span>
      		</div>
      		
      		<p>
      			张甲博客
      		</p>
      	</body>
      </html>

      2:CSS选择器

      十.  兄弟选择器

      除了根据祖先父子关系,还可以根据兄弟关系查找元素

      语法:

      查找后面一个兄弟元素 :兄弟元素+兄弟元素{}

      <!DOCTYPE html>
      <html>
      	<head>
      		<title> 标题 </title>
      		<meta charset='UTF-8'/>
      		<style >
      			div+p{
      				color:blue;
      			}
      		</style>	
      	</head>
      	<body>
      		<div>
      			张甲博客
      		</div>
      	
      		<p>
      			张甲博客
      		</p>
      	
      		<p>
      			张甲博客
      		</p>
      	</body>
      </html>

      2:CSS选择器

      查找后边所有的兄弟元素 : 兄弟元素~兄弟元素{}

      <!DOCTYPE html>
      <html>
      	<head>
      		<title> 标题 </title>
      		<meta charset='UTF-8'/>
      		<style >
      			div~p{
      				color:blue;
      			}
      		</style>	
      	</head>
      	<body>
      		<div>
      			张甲博客
      		</div>
      	
      		<p>
      			张甲博客
      		</p>
      	
      		<p>
      			张甲博客
      		</p>
      	</body>
      </html>

      2:CSS选择器

      十一.  伪类和伪元素

      有时候,需要选择本身没有标签,但是仍然易于识别的网页部位,比如段落首行或鼠标滑过的连接。CSS为他们提供一些选择器:伪类和伪元素

      1.  链接

      正常链接(未访问过的)

      a:link {
          color:red;
      }

      访问过的链接(历史记录里存在的,且只能定义字体颜色)

      a:visited {
          color:green;
      }

      鼠标悬浮的链接

      a:hover {
         color:yellow;
      }

      正在点击的链接

      a:active {
       color:pink;
      }

      2.  其他伪类

      <!DOCTYPE html>
      <html>
      	<head>
      		<title> 标题 </title>
      		<meta charset='UTF-8'/>
      		<style type="text/css">
      		/* 获取获取焦点:focus */
      		input:focus {
      			background-color:red;
      		}
      		
      		/* 选中的元素::selection */
      		p::selection {
      			color:yellow;
      			background-color:blue;
      		}
      
      		</style>	
      	</head>
      	<body>
      		<input type="text" />
      		<p>哈哈哈哈<p>
      	</body>
      </html>

      山东省·济宁市
    • 1
    • 0
    • 0
    • 595
    • 十二

      请登录之后再进行评论

      登录
    • 做任务
    • 实时动态
    • 偏好设置
    • 返回顶部
    • 单栏布局 侧栏位置: