[分享]css中html选择器

在CSS中，HTML选择器被用来选择需要应用样式的HTML元素。HTML选择器可以根据元素的标签名、类名、ID、属性等来选择元素。下面是常用的HTML选择器： / 选择标签名为p的元素 / p { ...

在CSS中，HTML选择器被用来选择需要应用样式的HTML元素。HTML选择器可以根据元素的标签名、类名、ID、属性等来选择元素。下面是常用的HTML选择器：

 /* 选择标签名为p的元素 */
    p {
        color: red;
    }

    /* 选择类名为example的元素 */
    .example {
        font-size: 16px;
    }

    /* 选择ID为header的元素 */
    #header {
        background-color: #ccc;
    }

    /* 选择所有属性中含有href的元素 */
    [href] {
        text-decoration: underline;
    }

    /* 选择所有属性class中含有important的元素 */
    [class*=important] {
        color: blue;
    } 

CSS选择器还支持组合选择器，可以选择多个元素或元素组合来应用样式。如下所示：

 /* 选择所有标签名为h1、h2、h3、h4、h5、h6的元素，并设置字体大小 */
    h1, h2, h3, h4, h5, h6 {
        font-size: 20px;
    }

    /* 选择类名为example的元素的子元素中标签名为p的元素，并设置字体颜色 */
    .example p {
        color: green;
    }

    /* 选择ID为header的元素下的所有直接子元素 */
    #header > * {
        border: 1px solid black;
    } 

除了基本的选择器外，CSS还支持伪类选择器和伪元素选择器来选择元素。比如选择鼠标悬停在元素上时的样式：

 /* 选择鼠标悬停在a元素上时的样式 */
    a:hover {
        text-decoration: underline;
    } 

以上就是CSS中HTML选择器的相关知识点，选择器以及组合选择器的使用能够帮助我们更方便地为HTML元素设置样式。