CSS选择器使用小结

璀云霄

已于 2024-01-23 17:41:58 修改

阅读量133

点赞数

分类专栏：前端文章标签： css 前端 css3

于 2023-03-27 19:29:34 首次发布

本文链接：https://blog.csdn.net/CloudyZfly/article/details/129795785

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

注意：使用时必须得引入CSS的格式才能在html文件中进行编写(此处采用内嵌的形式引入)

即在head标签的style属性中输入： type="text/css"

且所有操作均在style标签中进行

基本选择器

包括以下几种（以div标签为例）：

<body>

<div id="one" class="two">

这是第一个div

</div>

</body>

标签选择器（获取标签的名称）：标签名｛｝

<style type="text/css">
/* div标签选择器 */
div {
    属性: 值;
}

ID选择器（获取ID属性）：#id名｛｝

<style type="text/css">
/* ID选择器 */
 #one {
      属性: 值;
 }

类选择器（获取class属性）： .class名｛｝

<style type="text/css">
/* class类选择器 */
.two {
     属性: 值;
}

通配符选择器（获取全部标签属性）：* ｛｝

<style type="text/css">
/* 通配符选择器 */
* {
  属性: 值;
}

PS：以上选择器的优先级为：ID选择器>类选择器>标签选择器>通配符选择器

包含选择器

主要包括以下几种：

<body>

<div class="one">这是第一个div</div>

<div class="two">这是第二个div</div>

<p id="first">这是一个段落标签</p>

<div class="list">

<ul>

<li>我是列表1</li>

<li>我是列表2</li>

</ul>

</div>

</body>

子代选择器（获取的是某个标签的第一级子标签）

<style type="text/css">
/*子代选择器*/
div.list>ul {
    属性: 属性值;
}

格式：标签名.class名>子标签 {}

后代选择器（获取的某个标签里面所有的子标签）

<style type="text/css">
/*后代选择器*/
.list li {
     属性: 属性值;
}

格式：.class名子标签｛｝

分组选择器（也叫逗号选择器，可以同时设置多个标签，使用逗号进行分割）

<style type="text/css">
/*分组(逗号)选择器*/
.one,
.two,
#first {
    属性: 属性值;
}

格式（可选择任意标签，无固定格式）：.class名1，.class名2，#id名｛｝

属性选择器

用于设置带有特定属性或属性值的 HTML 元素的样式

主要包含以下几种：

<body>

<div class="container">

这是一个div容器

</div>

<div title="这是一个标题">这是第二个div</div>

<input type="text" name="" id="" value="张三">

<input type="email" name="" id="" value="李四">

<input type="url" name="" id="" value="二狗">

<hr>

<div class="msg">我喜欢打游戏</div>

<p id="msg1" ">这是一个段落</p>

</body>

属性确切等于某个值

<style type="text/css">
/*确切的等于某个值*/
input[type="text"] {
       background: red;
}

格式：标签名[属性="属性名"]｛｝

属性包含某个值

<style type="text/css">
/*属性包含某个值*/
input[type *="e"] {
    background: blue;
}

格式：标签名[属性 *="属性名中某个字符"]｛｝

属性值以某个字符开头

<style type="text/css">
/*属性值以某个值开头*/
input[type ^="e"] {
    background: green;
}

格式：标签名[属性 ^="属性名开头的字符"]｛｝

属性值以某个字符结尾

<style type="text/css">
/*属性值以某个值结尾*/
input[type $="rl"] {
    background: red;
}

格式：标签名[属性 $="属性名结尾的字符"]｛｝

属性名等于某个属性值

<style type="text/css">
/*属性等于某个属性值*/
[title="这是一个标题"] {
    color: red;
}

格式：标签名[属性名 ="属性值"]｛｝

表示下一个标签

<style type="text/css">
/*+表示下一个标签*/
.msg+p {
    border: 1px solid green;
}

格式：id名 + 标签名｛｝

伪类选择器

用于定义元素的特殊状态

例如，它可以用于：

设置鼠标悬停在元素上时的样式
为已访问和未访问链接设置不同的样式
设置元素获得焦点时的样式

主要包含以下几种：

<body>

<a href="http://www.baidu.com/">点击有惊喜</a>

</body>

链接点击前的颜色

<style type="text/css">
/*点击之前的颜色*/
a:link {
    color: red;
}

格式：标签名:link { }

链接点击后的颜色

<style type="text/css">
/*点击之后的颜色*/
a:visited {
    color: green;
}

格式：标签名:visited { }

鼠标悬停在链接的颜色

<style type="text/css">
/*鼠标悬停的颜色*/
a:hover {
    color: blue;
}

格式：标签名:hover { }

鼠标按住链接的颜色

<style type="text/css">
/*鼠标按住的颜色*/
a:active {
    color: pink;
}

格式：标签名:active { }

注意：a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后才能生效！

a:active 必须在 CSS 定义中的 a:hover 之后才能生效！

所以四种状态的顺序应固定为：:link :visited :hover :active

伪元素选择器

用于设置元素指定部分的样式。

例如，它可以用于：

设置元素的首字母、首行的样式
在元素的内容之前或之后插入内容

注意：要使用伪元素选择器一定要加上content属性,并且使用两个冒号 ::

主要包含以下几种：

<body>

<p>这是一个段落演示</p>

</body>

段落之前

<style type="text/css">
    p::before {
        content: "段落之前";
        color: red;
    }

格式：标签名::before { content:" "; }

段落之后

<style type="text/css">
p::after {
    content: "段落之后";
    color: blue;
}

格式：标签名::after { content:" "; }

璀云霄

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS选择器使用小结

选择器使用小结
复制链接

扫一扫

专栏目录

CSS选择器使用小结

注意：使用时必须得引入CSS的格式才能在html文件中进行编写(此处采用内嵌的形式引入)

基本选择器

标签选择器（获取标签的名称）：标签名｛｝

ID选择器（获取ID属性）：#id名｛｝

类选择器（获取class属性）： .class名｛｝

通配符选择器（获取全部标签属性）：* ｛｝

PS：以上选择器的优先级为：ID选择器>类选择器>标签选择器>通配符选择器

包含选择器

子代选择器（获取的是某个标签的第一级子标签）

后代选择器（获取的某个标签里面所有的子标签）

分组选择器（也叫逗号选择器，可以同时设置多个标签，使用逗号进行分割）

属性选择器

属性确切等于某个值

属性包含某个值

属性值以某个字符开头

属性值以某个字符结尾

属性名等于某个属性值

表示下一个标签

伪类选择器

链接点击前的颜色

链接点击后的颜色

鼠标悬停在链接的颜色

鼠标按住链接的颜色

伪元素选择器

段落之前

段落之后