CSS选择器1

最新推荐文章于 2022-11-21 21:18:46 发布
最新推荐文章于 2022-11-21 21:18:46 发布
阅读量130 收藏
点赞数
分类专栏： 前端学习
原文链接：https://www.runoob.com/css/css-tutorial.html
版权

CSS选择器

一

选择器示例示例说明
.class.intro选择所有class="intro"的元素
#id#firstname选择所有id="firstname"的元素
**选择所有元素
elementp选择所有

元素

element,elementdiv,p选择所有 < div >元素和< p >元素
element elementdiv p选择< div>元素内的所有< p>元素

(1)

选择器示例示例说明
.class.intro选择所有class="intro"的元素
#id#firstname选择所有id="firstname"的元素
<head>
<style>
    .intro{/*选择所有class="intro"的元素*/
        background-color:rgb(255, 102, 0);
    }
    #firstname{/*选择所有id="fistname"的元素  (#id选择器指定具有ID的元素的样式。*/
        background: yellowgreen;
    }
    </style>
</head>
<body>
    <h1>欢迎来到前端世界</h1>
    <div class="intro">
        <p id="firstname">我的名字是。。。</p>
        <p id="hometown">我生活在中国</p>
    </div>
    <p>我最好的朋友是。。。</p>
</body>

示例1

(2)

选择器示例示例说明
**选择所有元素
<head>
<style>
    *{/*选择所有元素，并设置其背景色。,即图片，示例22*/
        background: yellow;
    }
    div *{/*选择<div>元素内的所有元素：,即图片，示例2*/
        background: violet;
    }
    </style>
</head>
<body>
    <h1>欢迎来到前端世界</h1>
    <div class="intro">
        <p id="firstname">我的名字是。。。</p>
        <p id="hometown">我生活在中国</p>
    </div>
    <p>我最好的朋友是。。。</p>
</body>

示例2
示例2

示例22
示例22

(3)

选择器示例示例说明
elementp选择所有< p>元素
<head>  
<style>
   p{/*选择所有<p> 元素,即图片，示例3*/
        background: rgb(212, 127, 30);
    }
    </style>
</head>
<body>
    <h1>欢迎来到前端世界</h1>
    <div class="intro">
        <p id="firstname">我的名字是。。。</p>
        <p id="hometown">我生活在中国</p>
    </div>
    <p>我最好的朋友是。。。</p>
</body>

示例3

(4)

选择器示例示例说明
element,elementdiv,p选择所有
元素和

元素

<head>
<style>
    h1,p{/*选择所有<p>元素和<h1>元素:(几个元素具有相同的样式，用逗号分隔每个元素的名称。)*/
        background: rgb(192, 229, 201);
    }
    </style>
</head>
<body>
    <h1>欢迎来到前端世界</h1>
    <div class="intro">
        <p id="firstname">我的名字是。。。</p>
        <p id="hometown">我生活在中国</p>
    </div>
    <p>我最好的朋友是。。。</p>
</body>

示例4
示例4

（5）

选择器示例示例说明
element elementdiv p选择< div>元素内的所有< p>元素
<head>
<style>
    div p{/*选择<div>元素内的所有<p>元素:(选择器用于选择元素内部的元素)*/
        background: rgb(199, 212, 82);
    }
    </style>
</head>
<body>
    
    <h1>欢迎来到前端世界</h1>
    <div>
        <p>段落 1。 在 div 中。</p>
        <p>段落 2。 在 div 中。</p>
    </div>
    <p>段落 3。不在 div 中。</p>
    <p>段落 4。不在 div 中。</p>
</body>

示例5
示例5

二

选择器示例示例说明
element>elementdiv>p选择 所有 父级 是 < div> 元素的 < p > 元素
element+elementdiv+p选择所有紧接着< div>元素之后的< p>元素
[attribute][target]选择所有带有target属性元素
[attribute=value][target=-blank]选择所有使用target="-blank"的元素
[attribute~=value][title~=flower]选择标题属性包含单词"flower"的所有元素
[attribute|=value][lang|=en]选择 lang 属性以 en 为开头的所有元素

(1)

选择器示例示例说明
element>elementdiv>p选择所有父级是
元素的

元素

示例二1
<head>
<style>
    div>p{/*选择所有父级是 <div> 元素的 <p> 元素*/
        background: blue;
    }
    </style>
</head>
<body>
    
    <h1>欢迎来到前端世界</h1>
    <div>
        <h2>我的名字是。。。</h2>
        <p>我生活在中国。</p>
    </div>
    <div>
        <span>
            <p>我将长期并一直居住在中国.</p>
        </span>
    </div>
    <p>我最好的朋友是...</p>
</body>


示例二1-1
<head>
<style>
    div>p{/*选择所有父级是 <div> 元素的 <p> 元素*/
        background: blue;
    }
    </style>
</head>
<body>
    
    <h1>欢迎来到前端世界</h1>
    <div>
        <h2>我的名字是。。。</h2>
        <p>我生活在中国。</p>
    </div>
    <div>
        <p>我将长期并一直居住在中国.</p>
    </div>
    <p>我最好的朋友是...</p>
</body>

示例二1
示例二1

示例二1-1

示例二1-1

(2)

选择器示例示例说明
element+elementdiv+p选择所有紧接着< div>元素之后的< p>元素
<head>
<style>
    div+p{/*选择所有紧接着 <div> 元素之后的第一个 <p> 元素:*/
        background: blue;
    }
    </style>
</head>
<body>
    <h1>文章标题</h1>
    <div>
        <h2>DIV 内部标题</h2>
        <p>DIV 内部段落。</p>
    </div>
    <p>DIV 之后的第一个 P 元素。</p>
    <p>DIV 之后的第二个 P 元素。</p>
</body>

示例二2

(3)

选择器示例示例说明
[attribute][target]选择所有带有target属性元素
<head>
    a[target]{/*选择所有带有target属性的 <a>元素*/
        background: red;
    }
    </style>
</head>
<body>
    <p>超链接有target属性设有背景颜色</p>
    <a href="http://www.baidu.com">baidu</a>
    <a href="//www.disney.com" target="_blank">disney</a>
    <a href="//www.wikipedia.org" target="_blank">wikipedia</a>
    <p>
        <b>NOTE</b>
        For [<i>attribute</i>] to work in IE8 and earlier, a DOCTYPE must be declared.
    </p>
</body>

示例二3

(4)

选择器示例示例说明
[attribute=value][target=-blank]选择所有使用target="-blank"的元素
<head>
    a[target="_blank"]{/*选择所有使用target="_blank"的a元素*/
        background: red;
    }
    </style>
</head>
<body>
    <p>超链接有target="_blank"属性设有背景颜色</p>
    <a href="http://www.baidu.com">baidu</a>
    <a href="//www.disney.com" target="_blank">disney</a>
    <a href="//www.wikipedia.org" target="_top">wikipedia</a>
    <p>
        <b>NOTE</b>
        For [<i>attribute</i>] to work in IE8 and earlier, a DOCTYPE must be declared.
    </p>
</body>

示例二4

(5)

选择器示例示例说明
[attribute~=value][title~=flower]选择标题属性包含单词"flower"的所有元素
<head>
    <style>
    [title~=flower]{/*选择标题属性包含单词"flower"的所有元素*/
       border: 5px solid red;
    }
    img{
        width: 200px;
        height: 200px;
    }
    </style>
</head>
<body>
    <p>图片的 title 属性中如果带有 "flower" 单词，则会设置为红色边框。</p>
    <img src="../img_flwr.gif" title="klematis flower"  />
    <img src="../klematis.jpg" title="flowers"/>
    <img src="../landscape.jpg" title="landscape" />
    <p>
        <b>注意:</b>
        如果 [<i>attribute</i>~=<i>value</i>] 要在 IE8 及其更早版本下起作用， DOCTYPE 是必须声明的。
    </p>
</body>

示例二5

(6)

选择器示例示例说明
[attribute|=value][lang|=en]选择 lang 属性以 en 为开头的所有元素
<head>
    <style>
    [lang|=en]{/*选择 lang 属性值以 "en" 开头的元素，并设置其样式*/
    /* 无论是单独像 lang="en"，或者像连字符 - 如 lang=en-us 都可以。 */
        background:yellow;
    }
    </style>
</head>
<body>
    <p lang="en">Hello!</p>
    <p lang="en-us">Hi!</p>
    <p lang="en-gb">Ello!</p>
    <p lang="us-iu">Hi!</p>
    <p lang="no-ik">Hei!</p>
    <p>
        <b>Note:</b>
        For [<i>attribute</i>|=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must be declared.
    </p>
</body>

示例二6

拾光漫漫 可否达
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS选择器篇 一
限定小码农的博客
03-08 446
一、通配符选择器 1.通配符选择器常用 ‘*’号表示，它是所有选择器里作用范围最广的，能匹配页面中所有的元素。 2.基本语法格式：*{ 属性1：属性值1；属性2：属性值2；} 例1：使用该选择器定义样式，清除所有HTML标记的默认边距。 *{ margin：0； /*定义外边距*/ padding：0； /*定义内边距*/ } 说明:实际开发中不建议使用通配符选择器，因为它设...
CSS 选择器
qq_46291038的博客
08-19 537
一：选择器的种类 1.标签选择器 通过标签的名字，修改 css 样式 div{ width:200px; height:300px; } 2.通配符选择器 • 选择页面中所有的元素 *{ margin:0; padding:0; } 3.属性选择器 例子：例如<td>标签的一些符号含义： td[class] 带有class属性的td标签 td[class = ”a”] 类名为“a”的d.
CSS六大选择器
weixin_44709490的博客
10-12 3375
1. 标签选择器：使用标签来对样式进行设置 例如对span标签样式进行设定： span{ ​ color: red; } 2. 类选择器：通过.box(可以是任意名称，.必不可少)来设置CSS样式，再通过class="box"方法来调用 例如： .box{ text-align: center; } <body> <div class="box"></box> </body> 3. id选择器：使用#b...
css选择器
梁慧一的博客
07-23 98
css选择器 元素选择器 HTML标签，选中所有对应的HTML标签 .class 选中元素具有class行内属性的标签 #id 选中所有具有id行内属性的标签 *(通配符)选中所有元素 id与class的区别： id具有唯一性 建议：不要给不同的元素命名为同一个id class 类选择器，可以给多个元素这只同一个类名 *{ width: 300px;...
CSS的选择器
m0_52083530的博客
01-19 1033
概念：用于“查找”（或选取）要设置样式的 HTML 元素。（CSS要作用的标签，标签名就是选择器） 分类：基本选择器和高级选择器 基本选择器： 标签选择器：针对一类标签 ID选择器：针对一个特定的标签使用 类选择器：针对你想要的所有标签使用 通用选择器（通配符）：针对所有的标签都适用 高级选择器 后代选择器：可以选择作为某元素后代的元素（用空格隔开） 交集选择器：用.隔开 分组选择器（并集选择器）：选取所有具有相同样式定义的 HTML 元素 （用逗号隔开） 伪类选择器：根据特定状
CSS3中新增的选择器
z983002710的博客
07-29 1280
CSS3中新增的选择器
CSS基础教程
long_steve的博客
09-13 529
1
funnycoderstar#blog#CSS选择器1
07-25
CSS选择器通用选择器(*)标签选择器（div）class选择器(.wrap)E[att]： 匹配所有具有att属性的E元素，不考虑它的值E[att~=val]
zxymax#coding#CSS选择器1
07-25
id选择器id选择器类选择器类选择器1类选择器2类选择器3标签选择器标签选择器1标签选择器2相邻选择器相邻选择器 +相邻选择器相邻选择器 ~相邻选择器相邻选择器
WangShuXian6#blog#CSS选择器1
07-25
CSS 选择器选择器 | 例子 | 例子描述 | CSS* | * | 选择所有元素。:nth-child(n) | p:nth-child(2) | 选择属于
emperwang#advanced-java-docs#1-css选择器1
07-25
选择器1. 选择器种类属性选择器伪类选择器(pseudo-class)伪元素选择器(pseudo-element)选择器权重选择器 权重继承 或者 * 0,0,
一.CSS选择器
qq_38914344的博客
04-12 133
CSS选择器 类选择器 用.class，选择所有属性设置为class="xxx"的元素。 例：将div1颜色设置为红色，代码如下： <body> <div class="div1">div1</div> <div class="div2">div2</div> <div class="div3">div3</div> <style> .div1 {
7种jQuery操作css2.1选择器方法，总有一款适合你！
执念斩长河
05-31 430
本博文源于jquery基础，主要讲解如何用jquery操作css2.1选择器，一共有七种分别如下，并且每种配置测试案例，可copy体会！
CSS的选择器(超详细)
热门推荐
前端开发,HTML5,css3,JavaScript,node.js,vue
11-21 7万+
一、常用的选择器 1.元素选择器 2.类选择器(class选择器) 3.id选择器 4.通配符选择器 二、群组选择器 三、关系选择器 1.后代选择器 2.子代选择器 3.相邻兄弟选择器 4.通用兄弟选择器 5.案例 四、属性选择器 五、伪类选择器 1.常用的伪类选择器 2.否定伪类 3.元素的伪类 六、伪元素选择器
css选择器1
郑板桥30的博客
04-02 222
CSS 元素选择器 最常见的 CSS 选择器是元素选择器。换句话说，文档的元素就是最基本的选择器。 如果设置 HTML 的样式，选择器通常将是某个 HTML 元素，比如 p、h1、em、a，甚至可以是 html 本身 CSS 类选择器 类选择器允许以一种独立于文档元素的方式来指定样式。该选择器可以单独使用，也可以与其他元素结合使用。 提示：只有适当地标记文档后，才能使用这些选择器，所以使用这两种选择器通常需要先做一些构想和计划。 要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。.
前端之CSS
dianpo0301的博客
09-15 114
CSS介绍 　　CSS（Cascasing Style Sheet,层叠样式）定义如何显示HTLM元素。 css就是用来调节标签样式的 当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。 CSS语法：每个CSS样式由两个组成部分：选择器和声明，声明又包括属性和属性值。每个声明之后用分号结束 css语法结构： 　　选择器 { 属性1：值；属性2：值；属...
1-css选择器
version251
06-08 990
css选择器: ID选择器 #idName{} 选择id为idName的元素 类选择器 .className 选择所有class为className的元素 元素选择器 p 选择所有的p标签 复合选择器: div.b1 选择所有class为b的div元素 复合选择器: p,#idName,.className 选择所有p标签,id为idName的元素,class为c
【SCI2区】基于VMD-凌日优化算法TSOA-LSTM光伏预测Matlab实现.rar
最新发布
09-11
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用，注释清楚，适合新手
CSS3选择器详解与实例
"这篇内容主要介绍了CSS3选择器的基本概念和使用方法，包括基本选择器、多元素的组合选择器以及CSS2.1属性选择器。" 在网页设计和开发中，CSS（层叠样式表）是用于控制网页元素样式的重要工具。CSS3选择器的引入，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值