CSS的元素样式来源及选择器的使用学习 -

首页 > 博客列表 > CSS的元素样式来源及选择器的使用学习

博主信息

博文 14

粉丝 0

访问量 12207

专题推荐

更多>

CSS的元素样式来源

用户代理样式
- 不为html设置任何样式时,浏览器默认样式表

用户自定义样式

自定义样式	演示
行内样式	<div style="" ></div>
内部嵌入式	<style>div{}<style>
引用链接样式	<link href="style.css" >

基本选择器

css的五大选择器

通配选择器
标签选择器
类选择器
ID选择器
属性选择器

1.通配选择器

匹配任何元素的通配符

   <body>
        <div>
            <h2>Christmas tree</h2>
        </div>
    </body>

    body *{backgroud-color: gray;}

2.标签选择器

元素选择器

   <body>
        <div>
            <h2>Christmas tree</h2>
        </div>
    </body>

    body {width: 100px;height: 100px;backgroud-color: gray;}
    div {position: relative;display: block;}
    h2 {font-size: 25px;font-weight: bold;}

3.类选择器

用于多个元素

<div class="menu">
    <h2 class="menu-txt">Christmas tree</h2>
</div>

    .menu {position: relative;display: block;}
    .menu-txt {font-size: 25px;font-weight: bold;}

4.ID选择器

用于唯一元素

<div id="menu">
    <h2 id="menu-txt">Christmas tree</h2>
</div>

#menu {position: relative;display: block;}
#menu-txt {font-size: 25px;font-weight: bold;}

5.属性选择器

简单属性选择，具体属性选择，部分属性选择，特定属性选择
<H2 title="attribute">Christmas tree</H2>
h2[title="attribute"] {font-size: 25px;font-weight: bold;}

上下文选择器

后代选择器
子选择器
相邻兄弟选择器
所有兄弟选择器

1.后代选择器

<div>
     <h2>
           Christmas tree
           <h2>Christmas tree</h2>
    </h2>
</div>

语法规则是 div 和 h2 之间有一个空格
div h2{color: gray;}

2.子选择器

<div>
 <h2>Christmas tree</h2>
</div>

子选择器只会选择某个元素的子元素，而不会扩大到任意的后代元素
div > h2{color: gray;}

3.相邻兄弟选择器

<div>
    <h2>Christmas tree<h2>
    <em>Christmas tree</em>
    <em>Christmas tree</em>
<div>

会选择某一元素紧随其后的元素，但是前提是他们拥有相同的父级
h2 + em {color:gray;}

3.相邻兄弟选择器

<div>
    <h2>Christmas tree<h2>
    <em>Christmas tree</em>
    <em>Christmas tree</em>
<div>

会选择某一元素紧随其后的元素，但是前提是他们拥有相同的父级
h2 + em {color:gray;}

4.所有兄弟选择器

    <ul class="list">
      <li class="item">item1</li>
      <li class="item second">item2</li>
      <li class="item">item3 </li>
      <li class="item">item4</li>
      <li class="item">item5</li>
    </ul>

*号为通用标识符

    .item.second ~ * {
        background-color: yellow;
    }

选择器的权重

选择器	权值	权级
通配符选择器	0，0，0，0	0级
元素选择器	0，0，0，1	1级
CLASS选择器	0，0，1，0	2级
ID选择器	0，1，0，0	3级
行内样式	1，0，0，0	4级
!important	无限大	5级

CSS的元素样式来源

用户代理样式

用户自定义样式

基本选择器

css的五大选择器

1.通配选择器

2.标签选择器

3.类选择器

4.ID选择器

5.属性选择器

上下文选择器

1.后代选择器

2.子选择器

3.相邻兄弟选择器

3.相邻兄弟选择器

4.所有兄弟选择器

选择器的权重

推荐使用 class 而不用 id