CSS 选择器

/* 选择所有p元素 */
p {
    color: blue;
}

/* 选择所有class="highlight"的元素 */
.highlight {
    background-color: yellow;
}

/* 选择id="header"的元素 */
#header {
    font-size: 24px;
}

/* 选择所有元素 */
* {
    margin: 0;
    padding: 0;
}

/* 选择div内的所有p元素 */
div p {
    margin: 10px;
}

/* 只选择div的直接子元素p */
div > p {
    padding: 5px;
}

/* 选择紧跟在h1后面的p元素 */
h1 + p {
    font-weight: bold;
}

.red {
    color: red;
}
.font35 {
    font-size: 35px;
}

/* 选择具有title属性的元素 */
[title] {
    border: 1px solid #ccc;
}

/* 选择href属性值以"https"开头的元素 */
[href^="https"] {
    color: green;
}

/* 选择class属性包含"button"的元素 */
[class*="button"] {
    cursor: pointer;
}

/* 鼠标悬停效果 */
a:hover {
    text-decoration: underline;
}

/* 访问过的链接 */
a:visited {
    color: purple;
}

/* 第一个子元素 */
li:first-child {
    font-weight: bold;
}

/* 在元素内容之前插入 */
.box::before {
    content: "→";
}

/* 在元素内容之后插入 */
.box::after {
    content: "←";
}

/* 选择第一行 */
p::first-line {
    font-size: 120%;
}

/* 优先级示例 */
#header {
    color: blue !important;    /* 最高优先级 */
}
.nav {
    color: red;               /* 次高优先级 */
}
p {
    color: green;            /* 较低优先级 */
}