CSS选择器区别和使用方法

最新推荐文章于 2022-07-08 14:34:27 发布
最新推荐文章于 2022-07-08 14:34:27 发布
阅读量301 收藏 1
点赞数
分类专栏： WEB开发 文章标签： css 后代选择器 子元素选择器 相邻选择器 兄弟选择器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012631731/article/details/72847528
版权

后代选择器---只会作用于紧接着div下面的p元素

div > p { 

    color: red;

}                  


子元素选择器---作用于div下面的所有p元素

div  p { 

    color: red;

}                  

相邻兄弟选择器---作用于和div同级的div下面的一个p元素

div + p ｛

color： red；

｝

后续兄弟选择器---作用于div同级的div下面的所有p元素

div ~ p ｛

color： red；

｝

这个是分组，div和p都有相同的颜色

div， p ｛

color：red；

｝

HelloWorld程序猿
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css串联选择器和后代选择器使用方法
12-13
串联选择器：作用在同一个标签上 复制代码代码如下:”a” id =”qq”><span>look at the color</span></div> <p>css: #qq.a{….}   后代选择器：作用在不同标签上 复制代码代码如下:”qq”>”a”>look at the color...
四种CSS常用的选择器使用方法和注意事项
12-04
本文将详细介绍四种常用的CSS选择器：类选择器、ID选择器、HTML元素选择器和通配符选择器，并提供相应的使用方法和注意事项。 1. 类选择器（Class选择器） 类选择器通过在元素前加上`.`符号来指定。例如，`.s1`就是...
css有几种选择器，有什么区别？
weixin_42520375的博客
01-08 2075
基本选择器 1.标签选择器：直接用元素的标签来进行选择 span { // 直接选择span标签 size:16px; } 2.ID选择器：通过设置id名字，进行精确的选择，用#来定义 # div1 { //通过id名字来进行选择 color:red; } <div id="div1">1</div> 3.类选择器:通过类名来进行选择，选择范围比id选择器大，...
CSS之选择器的使用区别
xc_init的博客
11-30 150
三大选择器 1.标签选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> h1{ color: blue; } p{ color: aquamarine;
第十课：CSS选择器的介绍和区分
weixin_33859504的博客
12-02 116
IE7以及以下版本： getElementById是不区分表单元素ID与Name的，因此如果有一个表单元素只定义name，并与我们的目标元素ID同名，并且我们的目标元素在它的后面，那么就会选择到那个表单元素。所以一般在定义表单元素时，都会定义跟name一样的id，就是以防其他元素的id跟表单元素的name一样（文档中的id都是唯一的）。 getElementsByTagName，当参数为"*"...
css选择器的区别
为梦想而奋斗，无悔_一叶扁舟的点滴成长！
07-13 665
1.对于id属性值等于xx的div元素起作用的CSS样式 div[id = xx ]{} 2.对id为xx的元素起作用的CSS样式    #xx{} 3.对id为xx的p元素起作用的CSS样式 p#xx{} 4.对所有class为xx的元素起作用 .xx{} 5.对class为xx的div元素起作用 div.xx{} 6.对有所有的div元素起作用     div{} 7.
CSS选择器的区别
qq_34964426的博客
05-12 346
CSS的修炼心得            学习CSS之前必须得对html有基础的了解。         CSS即层叠样式表（Cascading Style Sheets）,学习CSS是为了将内容与表现分离，实现更好的页面布局，具有两个特性：继承性和层叠性。 一：CSS的使用方式：CSS有三种运用方式，可以单独使用也可以一起使用。   1.行内样式：直接在html的标签中使用style属性。如
CSS3中31种选择器使用方法教程
12-13
原文 The 30 CSS Selectors you Must Memorize 由 Jeffrey Way 发表于 2012 年 6 月，介绍了 30 种最常用的 CSS 选择器用法，多加了一种，变成了牢记 31 种选择器用法。其他 CSS3 选择器用法请查看 CSS3 ...
css选择器区分：
lv_suri的博客
07-08 203
Css称层叠样式表网页内容，由HTML控制网页样式，有css控制选择器有：标签选择器、类class选择器、id选择器、通配符选择器。(一般建议用类选择器较多)标签选择器:h1,img,p类选择器：className Id选择器： 通配符选择器：* Css常用的属性有：字体大小：font-size字体颜色：color宽度:width高度：height背景色:background-color文本水平居中:text-align文本行高（垂直居中）:line-height 选择器进阶常用有以下4种：层级选择器、
CSS 一文搞懂css选择器的各种区别
前端看世界
05-10 609
以下两个教程包含所有选择器的使用说明， 但是有的说明还是不太容易理解，容易混淆不清。 菜鸟教程： https://www.runoob.com/cssref/css-selectors.html w3school： https://www.w3school.com.cn/cssref/css_selectors.asp 交集选择器 可以如何组合 选择器 说明 .class1.class2 类名和类名组合 tagName.class 标签和类名组合 [attribute].clas
css样式选择器的种类及区别
freesky的专栏
04-18 6450
每一条css样式声明（定义）由两部分组成，形式如下： 选择器{     样式; } 在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作 用于网页中的哪些元素。下面就来介绍各种选择器： 1.标签选择器 标签选择器其实就是html代码中的标签。如右侧代码编辑器中的、、、、。例如下面代码： p{font-size:12px;  li
（CSS学习记录）：CSS选择器
baidu_41388533的博客
09-19 408
写在前面：参考哔哩哔哩黑马程序员pink老师教程 地址：https://www.bilibili.com/video/BV14J4114768?t=328&p=26 目录 CSS选择器（重点） CSS选择器作用（重点） 选择器的作用 CSS基础选择器 标签选择器 类选择器 类选择器特殊用法- 多类名 id选择器 通配符选择器 基础选择器总结 CSS选择器（重点） CSS选择器作用（重点） 选择器的作用 找到特定的HTML页面元素 CSS选择器干啥的？ 选择标签.
CSS选择器比较
Fimooo的博客
03-11 264
CSS选择器比较[attribute^=value]和[attribute*=value]和[attribute$=value][attribute^=value]a[class^=&quot;a-icon&quot;] (demo)a[class^=&quot;a-icon&quot;] (效果)a[class^=&quot;a-icon&quot;] (小结)[attribute*=value]a[class*=&quot;a-icon&q
02-CSS基础选择器的区别及其分类
m0_49028830的博客
07-14 350
CSS选择器（重点） 学习目标： 理解 能说出选择器的作用 id选择器和类选择器的区别 应用 能够使用基础选择器给页面元素添加样式 1. CSS选择器作用（重点） 如上图所以，要把里面的小黄人分为2组，最快的方法怎办？ 很多， 比如 一只眼睛的一组，剩下的一组 选择器的作用 ​ 找到特定的HTML页面元素 pink老师一句话说出他们： ※※※※ **CSS选择器干啥的？ 选择标签用的， 把我们想要的标签选择出来 ** 必须记住的 css 就是 分两件事， 选对人， 做对事。 h
CSS选择器的应用于区分
qq_42724864的博客
03-04 212
学习CSS中，我们会学到很多中CSS选择器，那么我们如何记住，并区分，什么时候使用什么样的选择器呢，在这里我整理了CSS常见的选择器，以及知识点，方便大家使用 1.ID选择器 CSS: #elem{} HTML:ID= 'elem' 注意：1.在一个页面中，ID值是唯一的 2.命名范围，字母 _ -数字（命名的第一位不能是数字） 3.命名方式，驼峰式，下...
CSS的子选择器与后代选择器的区别
11-16 4万+
子选择器 还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码： .food>li{border:1px solid red;} 这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。
CSS 选择器中，元素选择器和类选择器的区别是什么？
泠泠似水
12-29 3155
元素选择器是最常见的 CSS 选择器，即，文档的元素就是最基本的选择器。选择器通常是某个 HTML 元素，比如<p>、<h1>、<em>、<a>等，甚至可以是<html>元素本身。 类选择器用于将样式规则与附带class属性的元素匹配，其中该class属性的值为类选择器中指定的值。使用类选择器时，首先需要定义样式类，其语法为：.className { }所有能够附带class属性的元素都可以使用
CSS的四种基本选择器和四种高级选择器
热门推荐
Jack
07-11 9万+
CSS选择器：就是指定CSS要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。 CSS的选择器分为两大类：基本选择题和扩展选择器。 基本选择器： 标签选择器：针对一类标签 ID选择器：针对某一个特定的标签使用 类选择器：针对你想要的所有标签使用 通用选择器（通配符）：针对所有的标签都适用（不建议使用） 下面来分别讲一讲。 1、标签选择器：选择器的名字代表html页面上的标签...
CSS子类选择器和后代选择器的区别
Candy_Sir的博客
08-09 1万+
一.介绍 1.子类选择器 子类选择器仅仅指的是父元素的直接后代，大家可以理解为仅作用于第一代子元素，通过“&gt;”进行选择。 2.后代选择器 后代选择器则指的是作用于所有后代元素，通过空格来进行选择。 话不多说，接下来通过代码给大家演示。 二.举例 &lt;ul class="clothes"&gt; &lt;li&gt;衣服 &l...
CSS选择器详解：从基础到高级
后代选择器使用空格分隔两个或多个选择器，表示A元素内部的B元素。例如，`.parent .child`会选择`.parent`元素内的所有`.child`元素。这允许我们在复杂结构中精准定位元素，如下所示： div.container p{ font-size:...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值