CSS复合样式

一个CSS属性只能控制一种样式,叫做单一样式。

一个CSS属性控制多种样式,叫做复合样式。

复合样式的写法是通过空格的方式实现的。

  • 例如 background: url() no-repeat center center;border: 2px solid #ff0000;

  • ps:尽量不要混写,如果非要混写,一定要先写复合样式再写单一样式。

CSS选择器

ID选择器

  • 在一个页面中,ID值是唯一的。

  • ID命名方式需遵循命名规范,不能用数字开头。

  • ID命名方式可食用驼峰式、下划线式、短线式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TODO BLOG</title>
    <style>
        /* transparent 为透明色 */
        #box{
            width: 0;
            height: 0;
            border-left: 30px solid transparent;
            border-right: 30px solid black;
            border-top: 30px solid transparent;
            border-bottom: 30px solid transparent;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

class选择器

  • class选择器是可以复用的。

  • 可以添加多个class样式。

  • 多个样式的时候,样式的选先级根据CSS决定,而不是class属性中的顺序。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TODO BLOG</title>
    <style>
        /* transparent 为透明色 */
        .box{
            width: 0;
            height: 0;
            border-left: 30px solid transparent;
            border-right: 30px solid black;
            border-top: 30px solid transparent;
            border-bottom: 30px solid transparent;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="box"></div>
</body>
</html>

标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TODO BLOG</title>
    <style>
        /* transparent 为透明色 */
        div{
            width: 0;
            height: 0;
            border-left: 30px solid transparent;
            border-right: 30px solid black;
            border-top: 30px solid transparent;
            border-bottom: 30px solid transparent;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

群组选择器

ul, li, ol, dl, dd {
    list-style: none;
}

通配选择权

* {
    padding: 0;
    margin: 0;
}

层次选择器

  • 后代 M N {}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TODO BLOG</title>
    <style>
        ul li {
            border: 1px solid yellowgreen;
        }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <ol>
        <li></li>
        <li></li>
        <li></li>
    </ol>
</body>
</html>
  • 父子 M > N {}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TODO BLOG</title>
    <style>
        #list > li {
            border: 1px solid yellowgreen;
        }
    </style>
</head>
<body>
    <ul id="list">
        <li>
            <ul>
                <li></li>
                <li></li>
            </ul>
        </li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>
  • 兄弟 M ~ N {} (当前M下的所有兄弟N标签)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TODO BLOG</title>
    <style>
        div ~ h2 {
            border: 1px solid yellowgreen;
        }
    </style>
</head>
<body>
    <div>这是一个块</div>
    <p>这是一个段落</p>
    <h2>这是一个标题</h2>
</body>
</html>
  • 相邻 M+ N {} (当前M下面相邻的N标签)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TODO BLOG</title>
    <style>
        div + p {
            border: 1px solid yellowgreen;
        }
    </style>
</head>
<body>
    <div>这是一个块</div>
    <p>这是一个段落</p>
    <h2>这是一个标题</h2>
</body>
</html>

属性选择器

选择器 说明
M[attr] M元素选择指定为attr属性的集合
M[attr=value] M元素选择指定为attr属性和value值的集合
M[attr*=value] M元素选择指定为attr属性并且包含值为value的集合
M[attr^=value] M元素选择指定为attr属性并且起始值为value的集合
M[attr$=value] M元素选择指定为attr属性并且结束值为value的集合
M[attr1][attr2] M元素选择指满足多个属性的集合
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TODO BLOG</title>
    <style>
        div[class=box]{
            background: yellowgreen;
        }
    </style>
</head>
<body>
    <div>aaaa</div>
    <div class="box">aaaa</div>
    <div class="search">aaaa</div>
</body>
</html>

伪类选择器

  • CSS伪类用于向某些元素添加特殊的效果。

  • 一般用于初始样式添加不上的时候。

  • :link:访问前的样式(只能添加给a标签)

  • :visited:访问后的样式(只能添加给a标签)

  • :hover:鼠标移入时的样式

  • :active:鼠标按下时的样式

  • :after:before:通过伪类的方式给元素添加一些文本内容

  • :checked:disable:focus:都是针对表单元素的

  • ps:如果四个伪类都生效,先后顺序为link->visited->hover->active

结构性伪类选择器

  • :nth-of-type():nth-child():用来定位某个父元素的一个或多个特定的子元素

  • :first-of-type:first-child:表示的是选择父元素的第一个子元素

  • :last-of-type:last-child:表示的是选择父元素的最后一个子元素

  • :only-of-type:only-child:表示匹配属于父元素中唯一子元素

CSS样式继承

  • 文字相关的样式可以被继承

  • 布局相关的样式不能被继承

  • 布局相关样式默认是不能继承的,但是可以设置继承属性 inherit 值

CSS优先级

  • 相同样式优先级:当设置相同样式时,后面的优先级较高,但不建议出现重复设置样式的情况。

  • 内部样式和外部样式:内部样式和外部样式优先级相同,如果都设置了相同样式,那么后写的引入方式优先级高。

  • 单一样式优先级:style行间->id->class->tag->*->继承

  • !important:提升样式优先级,非规范用法,不建议使用。

  • 标签+类与单类

  • 群组优先级:群组选择器与单一选择器的优先级相同,靠后写的优先级高。

  • 层次优先级

不起眼的小广告

上一篇:CSS基础语法(二)

下一篇:CSS盒模型