CSS选择器

原创
2015/07/09 16:55
阅读数 53

选择符号:E { sRules }  类型,直接选择器。E是元素的表示

[]里面的是属性选择器:

  1. E [ attr ] { sRules } 一个元素,有attr属性的

  2. E [ attr = value ] { sRules }

·E1 E2 { sRules } 包含, E1的子元素和E2都使用这个样式,

<style type="text/css">

 div button所有div里面的button都变颜色
  background:red;
 }
</style>
</head>
<body>
 <div id="div1">
  hello
  <button>
   大家好
  </button>
  <p>
   <button>哥们</button>
  </p>
 </div>

·E1 > E2 { sRules } 只选择e1的子元素:

<style type="text/css">
 div>button{
  background:red;
 }
</style>
</head>
<body>
 <div id="div1">
  hello
  <button>
   大家好
  </button>

·E.className { sRules }

  1: .calssName {...} 所有的元素,都可以使用这个样式表。

  2: E.className{...} 只有E这个元素,使用这个样式 表才有效。

 div.abc{  div下的class="abc"的可以使用

 background:red;
 }

·E1 , E2 , E3 { sRules }  对E1,E2,E3,都使用同一个样式表,逗号间隔,平级的

 div.abc,button,p,hr,#div1{       都是平级的,都使用这个样式表
  background:red;
 }

 

div下的样式表使用abc的button使用 

 div.abc button{
  background:red;
 }

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部