饥人谷技术博客

CSS 选择器、继承、优先级

2017-07-09  本文已影响359人  _空空

CSS选择器

<style type="text/css">
<!-- * 是通配符，常用于重置浏览器默认样式，对所有标签元素起效果 -->
* {
    margin: 0;
    padding: 0;
}
<!-- 上例中，margin:0; 就是属性声明，margin为属性名，0为属性值 -->

<!-- body就是选择器，下例中只对 body 元素起效果 -->
body {
    font-size: 12px;
    color: red; 
}
</style>

通用选择器 *

* {
    color:red;
}

标签选择器（元素选择器／类型选择器）

<style type="text/css">
p {
    font-size:12px;
    line-height:1.6em;  
}
</style>

类选择器

    <style type="text/css">
    .set-red{
        color:red;
    }

    .set-green{
        color:green;
    }
    /* 注意：这里 span .set-red {color: red;} 这样写是没有效果的，因为处于同一层次 */
    /* span.set-red {color: red;} 去掉中间的空格，意思为选择 span 元素，且它包含 setRed 的 class 属性 */
    /* 有时还会遇到比如 .b.c { color: green; } 类似的CSS样式，这里的意思为元素包含 b 和 c 的 class属性 */
    </style>
</head>
<body>
    <p>文字颜色设置为<span class="set-red">红色</span>或者<span class="set-green">绿色</span>。</p>
</body>

ID选择器

    <style type="text/css">
    #set-red{
        color:red;
    }

    #set-green{
        color:green;
    }
    </style>
</head>
<body>
    <p>文字颜色设置为<span id="set-red">红色</span>或者<span id="set-green">绿色</span>。</p>
</body>

类和ID选择器的区别、使用场景

    <style type="text/css">
    /*类选择器*/
    .set-red{
        color:red;
    }
    .bigS-size{
        font-size:20px;
    }

    /*ID选择器*/
    #set-red-id{
        color:red;  
    }
    #big-size-id{
        font-size:20px;  
    }
    </style>
</head>
<body>
    <!-- 正确写法 -->
    <p>第一处文字颜色设置为<span class="set-red">红色</span>，第二处文字颜色也设置为<span class="set-red">红色</span>，第三处文字设置为<span class="set-red big-size">红色的大字体</span></p>
    
    <!-- 错误写法 -->
    <p>第一处文字颜色设置为<span id="set-red-id">红色</span>，第二处文字颜色也设置为<span id="set-red-id">红色</span>，第三处文字设置为<span id="set-red-id big-size-id">红色的大字体</span></p>
</body>

属性选择器-[att]（IE6-不支持）

<style type="text/css">
/* 第一种：[att] 简单属性选择器 */
/* 通过某个属性来选中元素，而不论属性值是什么 */
h1[class] {color: red;}
img[alt] {color: red;}
a[href][title] {color: red;}
#div[class] {color: red;}
.box[id] {color: red;}
[class] {color: red;}


/* 第二种：[att=val] 具体属性选择器 */
/* 通过某个属性的属性值是什么来选中元素 */
[class = "test box"] {color: red;}
/* class里面的值以及顺序必须完全相同，并且不可多空格或者少空格 */
[id = "tox"] {color: red;}  
/* ID选择器和指定id属性的属性选择器并不是一回事，主要在于优先级不同 */
a[href = "http://www.baidu.com"][title ="baidu"] {color: red;} 


/* 第三种：部分属性选择器。这里以 class 为例 */
/*
[class ~= "b"] 选择class属性值在用空格分隔的词列表中包含词语"b"的所有元素
[class ^= "b"] 选择class属性值以"b"开头的所有元素
[class $= "b"] 选择class属性值以"b"结尾的所有元素
[class *= "b"] 选择class属性值包含"b"的所有元素
[class |= "b"] 选择class属性值等于b或以b-开头的所有元素
*/
</style>

伪类、选择器、伪元素选择器

子选择器（Child selector）

    <style type="text/css">
    /* 实例1 */
    /* 选取 h1 元素的第一代子元素中所有的 strong 元素 */
    h1 > strong {color: red;} 


    /* 实例2 */
    table.company td > p
    /* 上面的选择器会选择作为 td 元素第一代子元素中所有的的 p 元素，这个 td 元素本身从 table 元素继承，该 table 元素有一个包含 company 的 class 属性 */
    </style>
</head>
<body>
    <!-- h1 > strong {color:red;} 这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 元素不受影响，因为这里的 strong 元素不属于 h1 元素的第一代子元素 -->
    <h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
    <h1>This is <em>really <strong>very</strong></em> important.</h1>
</body>

后代（包含）选择器（Descendant selector）

<style type="text/css">
/* 后代选择器的功能极其强大。有了它，可以使 HTML 中不可能实现的任务成为可能 */
/* 假设有一个文档，其中有一个边栏，还有一个主区。边栏的背景为蓝色，主区的背景为白色，这两个区都包含链接列表。不能把所有链接都设置为蓝色，因为这样一来边栏中的蓝色链接都无法看到 */
/* 解决方法是使用后代选择器。在这种情况下，可以为包含边栏的 div 指定值为 sidebar 的 class 属性，并把主区的 class 属性值设置为 maincontent。然后编写以下样式 */
div.sidebar {background:blue;}
div.maincontent {background:white;}
div.sidebar a:link {color:white;}
div.maincontent a:link {color:blue;}
</style>

相邻兄弟选择器（Adjacent sibling selector）

    <style type="text/css">
    /* 实例1 */
    /* 选择紧接在 h1 元素后出现的段落，h1 和 p 元素拥有共同的父元素*/
    h1 + p {margin-top:50px;}


    /* 实例2 */
    /* 下面这个选择器只会把列表中的第二个和第三个列表项的字体颜色变为红色，第一个列表项不受影响。因为第三个 li 是第二个 li 的兄弟元素，所以也会应用样式，如果第三个并不是 li 元素（即不为第二个 li 元素的兄弟元素了），那么它不会应用样式 */
    /* 这种情况下，如果我们想为之后的 li 元素应用样式，即使不为兄弟元素，可使用通用兄弟选择器 */
    li + li {color:red;}
    /* 如果改为 ul + ol {color:red;}，则第二个列表中所有列表项的字体颜色变为红色 */


    /* 实例3 */
    /* 相邻兄弟结合符还可以结合其他结合符 */
    /* 下面这个选择器解释为：选择紧接在 table 元素后出现的所有兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素 */
    html > body table + ul {margin-top:20px;}
    </style>
</head>
<body>
    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ul>
    <ol>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    </ol>
</body>

通用兄弟选择器

    <style type="text/css">
    /* 下面这个选择器会把 h2 元素之后的所有 p 元素的字体颜色变为红色 */
    h2 ~ p {color:red;}
    </style>
</head>
<body>
    <h2>标题</h2>
    <p>段落一</p>
    <h3>23323</h3>
    <p>段落二</p>
</body>

选择器分组

<style type="text/css">
/* 下面代码能为h1、p标签同时设置字体颜色为红色 */
/* 将 h1 和 p 选择器放在规则左边，然后用逗号分隔，就定义了一个规则。其右边的样式 {color: red;} 将应用到这两个选择器所引用的元素。逗号告诉浏览器，规则中包含两个不同的选择器。如果没有这个逗号，那么规则的含义将完全不同。参见后代选择器 */
h1, 
p {
    color: red;
}

/* 相当于下面的代码 */
h1 {
    color: red;
}
p {
    color: red;
}
</style>

CSS的继承、选择器的优先级、计算

继承（Inherited）

选择器的优先级

复杂场景下计算优先级

上一篇 下一篇

猜你喜欢

热点阅读