您现在的位置是：网站首页> 编程资料编程资料

举例讲解CSS的子元素选择器用法CSS选择器的权重与优先规则分享CSS 选择器演示全面了解css 属性选择器CSS的相邻兄弟选择器用法简单讲解CSS选择器实现字段解析

2021-09-04 960人已围观

简介 相比后代选择器,子元素选择器只能向下一步步寻找最临近的子元素,局限性更大些,这里我们就来举例讲解CSS的子元素选择器用法,需要的朋友可以参考下

基础 子元素选择器只能一级一级向下寻找，不能跨越

 HTML代码：

XML/HTML Code复制内容到剪贴板
  1. <p>  
  2.     this is my <strong><i>wi>ebstrong> page.   
  3. p>  

CSS代码：

CSS Code复制内容到剪贴板
  1. p>strong { color: purple; } p>strong>i { font-size: 50px; }   

1、与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素。

2、子元素选择器使用大于号">"做为连接符。

示例1：

XML/HTML Code复制内容到剪贴板
  1. <html>  
  2.   
  3. <head>  
  4.     <style type="text/css">  
  5.         h1 > strong {   
  6.             color: red;   
  7.         }   
  8.     style>  
  9. head>  
  10.   
  11. <body>  
  12.     <h1>This is <strong>verystrong> <strong>verystrong> important.h1>  
  13.     <h1>This is <em>really <strong>verystrong>em> important.h1>  
  14. body>  
  15.   
  16. html>  

2016712114001445.png (527×143)

示例2 

XML/HTML Code复制内容到剪贴板
  1. <html>  
  2.   
  3. <head>  
  4.     <style type="text/css">  
  5.         table.company td > p {   
  6.             color: red;   
  7.         }   
  8.     style>  
  9. head>  
  10.   
  11. <body>  
  12.     <table class='company'>  
  13.         <tr>  
  14.             <td>  
  15.                 <p>hellop>  
  16.             td>  
  17.         tr>  
  18.     table>  
  19.     <table>  
  20.         <tr>  
  21.             <td>  
  22.                 <p>worldp>  
  23.             td>  
  24.         tr>  
  25.     table>  
  26. body>  
  27.   
  28. html>  

2016712114047005.png (255×156)

上一篇：全面了解link与import方式的区别link和@import的区别深入探讨引入CSS的方式有哪些?link和@import的有何区别应如何选择CSS @import与link的具体区别import link的具体区别CSS技巧：IE6用import导入CSS的问题探讨：网页外部引用CSS的两种方式CSS两种方式link和@import-CSS教程-网页制作-网页教学网css用import还是link的区别-CSS教程-网页制作-网页教学网CSS中link和@import的区别说明

下一篇：对行内元素和块级元素的一些认识浅谈CSS块级元素与行内元素(内联元素)的区别和联系 进一步理解CSS编程中的块级元素和行内元素CSS行内元素和块级元素的居中实例分析全面了解行内元素与块级元素的区别

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网