标签选择器

选择全部的指定标签。

h4{
    /*修改全部的h4标签字体为红色*/
    color:red;
}

<h4>巴拉巴拉</h4>
<h4>哔哩哔哩</h4>

id 选择器

选择全部带有指定的 id 标签。

#bala{
    /*修改带有bala的ID标签*/
    color:red;
}

<h4 id="bala">巴拉巴拉</h4>
<h4 id="bala">巴拉巴拉</h4>
<h4>哔哩哔哩</h4>

类选择器

选择带有指定类属性的标签。

.bili{
    /*修改带有指定类属性的标签*/
    color:red;
}

<h4>巴拉巴拉</h4>
<h4>巴拉巴拉</h4>
<h4 class="bili">哔哩哔哩</h4>
.red{
    color: red;
}
.bili{
    color: red;
}

<h4>巴拉巴拉</h4>
<h4>巴拉巴拉</h4>
<!--标签类不仅可以有1个,还可以有多个-->
<h4 class="red bili">哔哩哔哩</h4>

通配符选择器

选择全部的标签

*{
    /*修改全部的标签属性*/
    color: red;
}

<h4>巴拉巴拉</h4>
<h3>巴拉巴拉</h3>
<h2>哔哩哔哩</h2>

后代选择器

可以选择某种标签的任意后代标签(需要按层级顺序定义)

ol p a{
    //修改a标签属性
    color: red;
}
<ol>
    <p>
        <a>ol子子集</a>
    </p>
    <li>ol的子集</li>
    <li>ol的子集</li>
</ol>
<ul>
    <li>ul的子集</li>
    <li>ul的子集</li>
</ul>

子选择器

只能选择某种标签的子标签

ol>li{
    //修改ol的li标签的的属性
    color: red;
}
<ol>
    <li>ol的子集</li>
    <li>ol的子集</li>
</ol>
<ul>
    <li>ul的子集</li>
    <li>ul的子集</li>
</ul>

并集选择器

同时选择多个标签或者类、ID

ol,ul{
    //修改ol和ul标签的属性
    color: red;
}
<ul>
    <li>子集</li>
</ul>
<ol>
    <li>ol的子集</li>
</ol>

链接伪类选择器

1.选择所有未被访问的链接

a:link{ }

2.选择所有已被访问的链接

a:visited{ }

3.选择位于鼠标指针位置的链接

a:hover{ }

4.选择鼠标按下未弹起的链接

a:active{ }

focus伪类选择器

选择已被鼠标点击的(input)表单

input:focus{
    background-color: rosybrown;
}

<input type="text">

属性选择器

选择 p1 开头的class属性

p[class^="p1"]{
    background-color: rosybrown;
}
<p class="p1_p">段落</p>
<p id="p2_p">段落</p>

选择 test 结尾的 id 属性

p[id$="test"]{
    background-color: rosybrown;
}
<p id="m_test">段落</p>
<p id="m_asss">段落</p>

选择包含 test 的 id 属性

p[id*="test"]{
    background-color: rosybrown;
}
<p id="m_test">段落</p>
<p id="m_asss">段落</p>

伪元素选择器

伪元素是指一些特定的元素内容

:first-letter (向文本的第一个字母添加样式)
:first-line (向文本的第一行添加样式)
:after (在元素后添加样式)
:before (在元素前添加样式)

文章目录