css中标签的各种应用

在HTML中，标签是用来定义文本的语义和结构的。而CSS则是用来定义HTML标记中的元素的样式和外观。在CSS中，根据不同作用的标签，有很多应用方式，下面就来介绍一下各种标签的应用。

＜style＞
/*这里是CSS样式*/
＜/style＞ 

1、基本选择器：

/*1、元素选择器（tag选择器）：用于作用于特定标签*/
p {
    color: red;
}

/*2、class选择器：用于作用于特定类*/
.className {
    color: blue;
}

/*3、id选择器：用于作用于特定id*/
#elementId {
    color: green;
} 

2、组合选择器：

/*1、后代选择器：用于选中元素内的所有子元素*/
#parent p {
    color: red;
}

/*2、子元素选择器：只选中子元素*/
#parent > p {
    color: blue;
}

/*3、相邻兄弟选择器：选中与指定元素同级的紧接着出现的标签*/
p + span {
    color: purple;
}

/*4、通用选择器：选中所有元素*/
* {
    color: gray;
} 

3、伪类选择器：

/*1、链接伪类*/
a:link {
    color: green;
}

a:visited {
    color: red;
}

/*2、hover伪类*/
a:hover {
    color: blue;
}

/*3、active伪类*/
a:active {
    color: purple;
}

/*4、首元素和尾元素*/
p:first-child {
    font-weight: bold;
}

p:last-child {
    font-style: italic;
}

/*5、定位伪类*/
p:nth-child(odd) {
    background-color: yellow;
}

p:nth-child(even) {
    background-color: pink;
} 

4、属性选择器：

/*1、存在和值属性选择器*/
a[class] {
    color: red;
}

a[href="https://www.example.com"] {
    color: green;
}

/*2、部分值匹配属性选择器*/
a[href*="example"] {
    color: blue;
}

/*3、前缀或后缀匹配属性选择器*/
div[class^="main"] {
    color: pink;
}

div[class$="main"] {
    color: brown;
} 

总结：CSS中的标签应用，从选择器的基本应用到更加高级的伪元素应用，都可以帮助我们更加精细地控制页面的样式和效果。