CSS中常用选择器总结

以下为举例

 基本选择器：

        div{
            border: 1px solid black;
        }
        p{
            color: green;
        }
        p>span[class="one"]{/*对段落中文字加上span标签单独进行选择设置格式*/
            color: pink;
        }
        #two{
            color: aqua;
        }
        .three{
            color: rgb(225, 0, 255);
        }

css组合器

​
...   
        #two,.three,p{
            color: aqua;
        }
        div>ul{
            color: aqua;
        }
        div li[class="abc"]{
            color: rgb(33, 227, 143);
        }
...
...
    <h1 id="two">hello</h1>
    <h2 class="three">world</h2>
    <p>hello<span class="one">world</span></p>
    <div>
        <ul>
            <li class="abc">list1</li>
            <li>list2</li>
            <li>list3</li>
        </ul>
    </div>

​

属性选择器

[attribute]	用于选取带有指定属性的元素	img[alt="one"]{color:pink;}
[attribute=value]	用于选取带有指定属性和值的元素	input[type="text"]{background:red;}
[attribute|=value]	用于选取带有以指定值开头的属性值的元素,该值必须是整个单词	span[lang|="en"] {color: red;}
[attribute^=value]	匹配属性值以指定值开头的每个元素	input[type ^="a"]{background:pink;}
[attribute$=value]	匹配属性值以指定值结尾的每个元素	input[type$="e"]{color:green;}
[attribute*=value]	匹配属性值中包含指定值的每个元素。	a[href*="https://www.csdn.net/"] {color: red;}

伪类选择器

a:link{}  a:visited{}  a:hover{}  a:active{}

为元素选择器

...

p::before{

        content:"this";

}

p::after{

        content:"a paragraph";

}

...

<p> is </p>