CSS的选择器

最新推荐文章于 2022-04-10 10:20:45 发布

又1个晴天

最新推荐文章于 2022-04-10 10:20:45 发布

阅读量305

点赞数

文章标签： css

本文链接：https://blog.csdn.net/Shasha_Bai/article/details/113245852

版权

CSS的选择器

1.元素选择器
2.通配符选择器
3.属性选择器
4.派生选择器/上下文选择器
5.id选择器
6.类选择器
7.伪类选择器
8.伪元素选择器

CSS选择器用于指明样式对哪些元素生效。需要明确的是，一个选择器可能会出现多个元素，但生效的只会是多个元素中的一个，其他元素和符号都可以视为条件。

1.元素选择器

元素选择器是最简单的选择器，选择器通常是某个HTML元素，如p、h1、em、a,甚至可以是HTML本身。

2.通配符选择器

通配符选择器也是一种简单选择器，用 “ * ” 表示，一般称之为通配符，表示对任意元素都有效。

3.属性选择器

对带有指定属性的HTML元素设置样式。从广义的角度来看，元素选择器是属性选择器的特例，是一种忽视指定HTML元素的属性选择器。其写作格式如下：
E[attribute]{property1:value1;property2:value2;property3:value3;…}
需要将属性用方括号括起来，表示这是一个属性选择器。属性选择器的语法格式共有4种，如下表示。

语法	含义
`E[attribute]`	用于选取带有指定属性的元素
`E[attribute=value]`	用于选取带有指定属性和指定值的元素
`E[attribute~=value]`	用于选取属性值中包含指定值的元素，该值必须是整个单词，可以前后有空格
`E[attribute=\|value]`	用于选取带有以指定值开头的属性值的元素，该值必须是整个单词或者后面跟着连字符“-”

4种属性选择器示例代码：

<body>
    <big><b>有lang属性的td元素会被选择</b></big>
    <table border="1">
        <tr>
            <td>th[lang]</td>
            <td>无属性</td>
            <td lang="">lang="" </td>
            <td lang="en">lang="en"</td>
            <td lang=cn>lang="cn"</td>
        </tr>
    </table>
    <br />
    <big><b>title属性值为a的td元素会被选择</b></big>
    <table border="1">
        <tr>
            <td>[title="a"]</td>
            <td>无属性</td>
            <td title="a">title="a"</td>
            <td title="a b">title="a b"</td>
            <td title="ab">title="ab"</td>
            <td title="ba">title="ba"</td>
        </tr>
    </table>
    <br />
    <big><b>title属性值包含"c,且c前后只能有空格"的td元素会被选择</b></big>
    <table border="1">
        <tr>
            <td>[title~="c"]</td>
            <td>无属性</td>
            <td title="c">title="c"</td>
            <td title="c d">title="c d"</td>
            <td title="c-d">title="c-d"</td>
            <td title="cd">title="cd"</td>
            <td title="d c">title="d c"</td>
            <td title="dc">title="dc"</td>
        </tr>
    </table>
    <br />
    <big><b>title属性值为"h开头，且h只能为独立单词，后面可跟连字符"的td元素会被选择</b></big>
    <table border="1">
        <tr>
            <td>[title="h"]</td>
            <td>无属性</td>
            <td title="h">title="h"</td>
            <td title="h i">title="h i"</td>
            <td title="h-i">title="h-i"</td>
            <td title="hi">title="hi"</td>
            <td title="ih">title="ih"</td>
            <td title="i h j">title="i h j"</td>
        </tr>
    </table>
</body>

td[lang]{
    color: red;
}
td[title="a"]{
    color: red;
}
td[title~="c"]{
    color: red;
}
td[title|="h"]{
    color: red;
}

运行结果如下图所示。
在这里插入图片描述

4.派生选择器/上下文选择器

派生选择器依据元素在其位置的上下文关系定义样式，在CSS1.0中，这种选择器被称为上下文选择器，CSS2.0改名为派生选择器。通过合理地使用派生选择器，也有人将这种选择器叫做父子选择器。派生选择器大致可以分成3种：后代选择器、子元素选择器、相邻兄弟选择器。

4.1后代选择器

后代选择器可以选择某元素后代的元素，后代选择器中两个元素之间的间隔可以是无限的。其写作格式如下：
父元素子元素 {property1:value1;property2:value2;property3:value3;…}

4.2子元素选择器

子元素选择器只能选择作为某元素子元素的元素。它与后代选择器最大的不同就是元素间隔不同，后代选择器将该元素作为父元素，它所有的后代元素都是符合条件的，而子元素选择器只有相对于父元素来说的第一级子元素符合条件。其写作格式如下：
父元素 > 子元素 {property1:value1;property2:value2;property3:value3;…}

子元素选择器示例代码：
<body>
   <p><abbr title="HyperText Markup Language"><em>HTML</em></abbr>，超文本标记语言，简称<em>HTML</em>。</p>
</body>

p>em{
    color: red;
}

运行结果如下图所示。
在这里插入图片描述
可以看到，第一个元素作为第二级子元素，不符合子元素选择器的条件，所以没有变成红色字体。

4.3相邻兄弟选择器

相邻兄弟选择器可以选择紧接在另一个元素后的元素，且二者有相同父元素。与后代选择器和子元素选择器不同的是，相邻兄弟选择器针对的元素是同级元素，且两个元素是相邻的，拥有相同的父元素。其写作格式如下：
父元素 + 子元素 {property1:value1;property2:value2;property3:value3;…}

相邻兄弟选择器示例代码如下：
<body>
    <h1>HTML基础</h1>
   <p>HTML，超文本标记语言（HyperText Markup Language，简称HTML）。</p>
   <p>HTML 文档就是我们所说的网页，是互联网中最重要的信息交流媒体。</p>
</body>

h1+p{
    color: red;
}

运行结果如下图所示。
在这里插入图片描述
可以看到，与<h1>标签相邻的<p>元素符合条件，所以变成红色字体。而第二个<p>元素因为没有与<h1>相邻，所以不满足选择条件。

当然，派生选择器是可以结合使用的，以相邻兄弟选择器为例：h1+p，我们可以写为html > body h1 + p，这个选择器解释可以读成以下两种形式。
.从后往前：选择紧接<h1>元素的<p>元素，这个<h1>元素包含在<body>元素中，这个<body>元素又是<html>元素的子元素。
.从前往后：选择<html>的子元素<body>的后代元素<h1>的相邻元素<p>。

5.id选择器

id选择器可以为标有特定id值的HTML元素指定样式。其写作格式如下：
E#idValue {property1:value1;property2:value2;property3:value3;…}
严格来讲，在一份HTML文档中，id值都是唯一的。因为如果出现了两个相同的id值，JavaScript只会取第一个具有该id值的元素。id值通常是以字母开始的，中间可以出现数字、“-”“_”等。如果用数字开头，某些XML解析器会出现问题，id值不能出现空格，因为这在JavaScript中不是一个合法的变量名。同样，name,class等属性值的书写规范与id值是一样的，不同的是它们不具备唯一性。
由于id的唯一性，因此通常会将E省略。id选择器虽然已经很明确地选择了某元素，但它依然可以用于其它选择器。例如，用在派生选择器中，可以选择该元素的后代元素或者子元素等。

6.类选择器

类选择器可以为指定class的HTML元素指定样式，其写作格式如下：
E.classValue {property1:value1;property2:value2;property3:value3;…}
元素E可以省略，省略后表示在所有的元素中筛选，有相同的class属性将会被选择。如果指定某类型元素的相同class属性，那么需要指定E的元素名称，如.important和p.important。
class属性值除了不具有唯一性，其他规范与id值相同，即通常是以字母开头的，值不能出现空格。
类选择器也可以配合派生选择器，与id选择器不同的是，元素可以基于它的类而被选择。

类选择器示例代码：
<body>
    <h1 class="important">HTML的历史</h1>
   <p>HTML（第一版）：在1993年6月作为互联网工程工作小组（IETF）工作草案发布</p>
   <p>HTML 2.0：1995年11月作为RFC 1866发布。</p>
   <p>HTML 3.2：1997年1月14日，W3C推荐标准。</p>
   <p>HTML 4.0：1997年12月18日，W3C推荐标准。</p>
   <p class="important">HTML 4.01：1999年12月24日，W3C推荐标准，是现在开发者广泛使用的版本</p>
</body>

.important{
    color: red;
}
p.important{
    color: blue;
}

在这里插入图片描述

7.伪类选择器

在选取元素时，CSS除了可以根据元素名、id、class、属性选择器，还可以根据元素的特殊状态选取元素，即伪类选择器和伪元素选择器。
伪类是指那些处在特殊状态的元素。伪类名可以单独使用，泛指所有元素，也可以和元素名称连起来使用，特指某类元素。伪类以冒号（:）开头，元素选择符和冒号之间不能有空格，伪类名中间也不能有空格。
CSS中常见的伪类如下表所示。

伪类名	含义
:active	向被激活的元素添加样式
:focus	向拥有输入焦点的元素添加样式
:hover	向鼠标悬停在上方的元素添加样式
:link	向未被访问的链接添加样式
:visited	向已被访问的链接添加样式
:first-child	向元素添加样式，且该元素是它的父元素的第一个子元素
:lang	向带有指定lang属性的元素添加样式
:first-of-type	选择到父元素下的第一个元素
: last-child	选择作为其父的最后一个子元素的每个`<p>`元素
: last-of-type	选择作为其父的最后一个`<p>`元素的每个`<p>`元素
: nth-child(n)	选择作为其父的第n个子元素的每个`<p>`元素（n可以为even偶数/odd奇数，2n、2n+1等）
: nth-of-type(n)	选择作为其父的第n个`<p>`元素的每个`<p>`元素

<body>
   <a href="http://www>baidu.com">http://www>baidu.com</a>
   <br />
   <a href="http://www.sohu.com">http://www.sohu.com</a>
   <br />
   <a href="http://www.sina.com">http://www.sina.com</a>
   <br />
   <form action="login" method="post">
       用户名：<input type="text" name="username" id="username" value="" />
       <br />
       密码：<input type="password" name="password" id="password" value="" />
   </form>
   <ul>
       <li>吃</li>
       <li>喝</li>
       <li>玩</li>
       <li>乐</li>
   </ul>
   <ul>
    <li>太平洋</li>
    <li>大西洋</li>
    <li>北冰洋</li>
    <li>印度洋</li>
</ul>
</body>

a:link{
    font-size: 20px;
}
a:hover{
    color: red;
}
a:active{
    font-size: 30px;
}
input:focus{
    background-color: yellow;
}
li:first-child{
    font-size: 30px;
}

第一个图表示原始样式；

第二个图表示鼠标悬停在“www.sina.com”，网址变红；

第三个图表示“www.sina.com”被激活，字体变大；

第四个图表示密码输入框获取了焦点，背景变成黄色。

8.伪元素选择器

伪元素是指那些元素中特别的内容，与伪类不同的是，伪类表示的是元素内部的东西，逻辑上存在，但在文档树中并不存在与之对应关联的部分。伪元素选择器的格式与伪类选择器一致。在CSS中常用的伪元素如下表所示。

伪元素名	含义
:first-letter	向文本的第一个字母添加样式
:first-line	向文本的第一行添加样式
:after	在元素之后添加内容
:before	在元素之前添加内容

示例代码：
<body>
   <p>北京欢迎你</p>
   <p>北京欢迎你</p>
   <div>
        北京欢迎你<br />
        北京欢迎你
   </div>
   <h1>百度</h1>
   <h2>百度</h2>
</body>

p:first-child:first-letter{
    color: #ff0000;
    font-size: xx-large;
}
p:first-child:first-line{
    color: #0000ff;
    font-variant: small-caps;
}
div:first-line{
    color: #0000ff;
    font-variant: small-caps;
}
h1::before{
    content: url(https://www.baidu.com/img/flexible/logo/pc/result.png);
}
h2:after{
    content: url(https://www.baidu.com/img/flexible/logo/pc/result.png);
}

在这里插入图片描述

又1个晴天

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS的选择器

CSS的选择器1.元素选择器2.通配符选择器3.属性选择器4.派生选择器/上下文选择器5.id选择器6.类选择器7.伪类选择器8.伪元素选择器CSS选择器用于指明样式对哪些元素生效。需要明确的是，一个选择器可能会出现多个元素，但生效的只会是多个元素中的一个，其他元素和符号都可以视为条件。1.元素选择器元素选择器是最简单的选择器，选择器通常是某个HTML元素，如p、h1、em、a,甚至可以是HTML本身。2.通配符选择器通配符选择器也是一种简单选择器，用 “ * ” 表示，一般称之为通配符，表示对任
复制链接

扫一扫