css 页内选择器 |html js css区别

首先，大家来看一下基本的页内选择器：ID选择器和类选择器。ID选择器可以通过元素的id属性来选择元素，它是页面中最具体的选择器，因为每个元素的id应该是唯一的。类选择器则是通过元素的class属性来选择页面上相同类别的元素。

#id {
color: red;
}
.class {
font-size: 18px;
}

其次，还有一些特殊的页内选择器，比如属性选择器和伪类选择器。属性选择器可以通过元素的属性来选择元素，例如选择所有包含href属性的a元素；伪类选择器则可以选择元素的特定状态，比如选择鼠标悬停在a元素上的时候。

a[href] {
color: blue;
}
a:hover {
text-decoration: underline;
}

最后，大家还有结构性的页内选择器，例如子元素选择器、后代元素选择器、相邻兄弟选择器和一般兄弟选择器。子元素选择器选择某个元素下的所有子元素，后代元素选择器选择某个元素下的所有后代元素，相邻兄弟选择器选择某个元素之后相邻的兄弟元素，一般兄弟选择器可以选择某个元素之后所有的兄弟元素。

ul >li {
list-style-type: none;
}
div p {
font-style: italic;
}
h1 + p {
color: green;
}
p ~ span {
font-weight: bold;
}

综上所述，CSS页内选择器非常强大，可以通过不同的选择方式精准地选择所需的元素，并对其进行样式调整。在实际的页面设计中，大家可以灵活运用这些选择器，达到更好的页面效果。