css选择器使用-CSDN博客

本文链接：https://blog.csdn.net/qq_26843541/article/details/112756017

css选择器

1. 基本选择器

1.1 标签选择器

<p>
    标签选择器
</p>
<style>
    p{
        color:red;
    }
</style>

1.2 class选择器

<p class="classSelector">
    标签选择器
</p>
<style>
    .classSelector{
        color:red;
    }
</style>

1.3 ID选择器

<p id="classSelector">
    标签选择器
</p>
<style>
    #classSelector{
        color:red;
    }
</style>

总结：标签选择器用于全局标签样式修改

class选择器可以局部修改特定元素样式，并且可以重复使用

ID选择器可以修改特定元素样式，但是ID全局唯一不可以重复使用

2. 属性选择器

2.1 绝对等于=

<p id="items classSelector tst">
    标签选择器
</p>
<style>
    p[id="items classSelector tst"]{
        color:red;
    }
</style>

2.2 包含某个元素*=

<p id="items classSelector tst">
    标签选择器
</p>
<style>
    p[id*="classSelector"]{
        color:red;
    }
</style>

2.3 以某个元素开头^=

<p id="items classSelector tst">
    标签选择器
</p>
<style>
    p[id^="items"]{
        color:red;
    }
</style>

2.4 以某个元素结尾$=

<p id="items classSelector tst">
    标签选择器
</p>
<style>
    p[id$="items"]{
        color:tst;
    }
</style>

3.层次选择器

3.1 后代迭代选择器 body p{color:red;}

<style>
    body p {
        color: red;
    }
</style>

<body>
    <div>
        <p>
            生效
        <p>生效</p>
        </p>
    </div>
    <p>
        生效
    </p>
</body>

在某个元素后面，祖爷爷=》爷爷=>父亲=》儿子=》孙子都生效

3.2 子选择器 body>p {color: red;}

<style>
    body>p {
        color: red;
    }
</style>

<body>
    <div>
        <p>
            生效
        <p>生效</p>
        </p>
    </div>
    <p>
        生效
   <div><p>不生效</p></div>
    </p>
    <p>生效<p>生效</p></p>
</body>

一代，儿子。也就是在body之后的直接的子标签都是可以生效的，但是如果中间隔了其他类型的元素就不会生效

3.3 相邻兄弟选择器 h1 + p {margin-top:50px;}

<body>
    <style type="text/css">
        h1 + p {margin-top:50px;}
    </style>
    <h1>This is a h1.</h1>
    <p>This is 生效.</p>
    <p>This is 不生效.</p>
    <p>This is 不生效.</p>
    <p>This is 不生效.</p>
    <p>This is 不生效.</p>
</body>

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器

3.4 通用选择器 h1 ~ p {margin-top:50px;}

<body>
    <style type="text/css">
        h1 + p {margin-top:50px;}
    </style>
    <h1>This is a h1.</h1>
    <p>This is 生效.</p>
    <p>This is 生效.</p>
    <p>This is 生效.</p>
    <p>This is 生效.</p>
    <p>This is 生效.</p>
</body>

当前选中元素的向下的所有兄弟元素

4. 结构伪类选择器

4.1 本例演示如何向文档中的超链接添加不同的颜色。

<html>
<head>

<style type="text/css">
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
</style>

</head>

<body>

<p><b><a href="/index.html" target="_blank">这是一个链接。</a></b></p>
<p><b>注释：</b>在 CSS 定义中，a:hover 必须位于 a:link 和 a:visited 之后，这样才能生效！</p>
<p><b>注释：</b>在 CSS 定义中，a:active 必须位于 a:hover 之后，这样才能生效！</p>

</body>
</html>

4.2 本例演示如何向超链接添加其他样式。

<html>
<head>
<style type="text/css">
a.one:link {color: #ff0000}
a.one:visited {color: #0000ff}
a.one:hover {color: #ffcc00}

a.two:link {color: #ff0000}
a.two:visited {color: #0000ff}
a.two:hover {font-size: 150%}

a.three:link {color: #ff0000}
a.three:visited {color: #0000ff}
a.three:hover {background: #66ff66}

a.four:link {color: #ff0000}
a.four:visited {color: #0000ff}
a.four:hover {font-family: monospace}

a.five:link {color: #ff0000; text-decoration: none}
a.five:visited {color: #0000ff; text-decoration: none}
a.five:hover {text-decoration: underline}
</style>
</head>

<body>
<p>请把鼠标移动到这些链接上，以查看效果：</p>

<p><b><a class="one" href="/index.html" target="_blank">这个链接改变颜色</a></b></p>
<p><b><a class="two" href="/index.html" target="_blank">这个链接改变字体大小</a></b></p>
<p><b><a class="three" href="/index.html" target="_blank">这个链接改变背景颜色</a></b></p>
<p><b><a class="four" href="/index.html" target="_blank">这个链接改变字体系列</a></b></p>
<p><b><a class="five" href="/index.html" target="_blank">这个链接改变文本装饰</a></b></p>
</body>

</html>

4.3 本例演示如何对超链接应用 :focus 伪类（无法在 IE 中工作）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
input:focus
{
background-color:yellow;
}
</style>
</head>

<body>
<form action="form_action.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
</form>

<p><b>注释：</b>如果已规定 !DOCTYPE，那么 Internet Explorer 8 （以及更高版本）支持 :focus 伪类。</p>

</body>
</html>

4.4 本例演示 :first-child 伪类的用法

<html>
<head>
<style type="text/css">
p:first-child {font-weight: bold;}
li:first-child {text-transform:uppercase;}
</style>
</head>

<body>
<div>
<p>These are the necessary steps:</p>
<ul>
<li>Intert Key</li>
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
<p>Do <em>not</em> push the brake at the same time as the accelerator.</p>
</div>

<p><b>注释：</b>必须声明 DOCTYPE，这样 :first-child 才能在 IE 中生效。</p>
</body>

</html>

4.5 伪元素

p:first-letter
  {
  color:#ff0000;
  font-size:xx-large;
  }

p:first-line
  {
  color:#0000ff;
  font-variant:small-caps;
  }
p:first-letter
  {
  color:#ff0000;
  font-size:xx-large;
  }

p:first-line
  {
  color:#0000ff;
  font-variant:small-caps;
  }
h1:after
  {
  content:url(logo.gif);
  }

参考文档