`
flex_莫冲
  • 浏览: 1090417 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

css的嵌套选择器用法总结

    博客分类:
  • css
 
阅读更多
css复合选择器的使用规则
1、id嵌套class #myid.myclass: <p id="sp" class="myclass"></p>。
2、一个元素标签使用多个class。.important.warning <p class="important warning">注意不要有空格 。有空格表示分别适用于两个class。
3、id标签内的class元素。#myid .myclass  <div id="myid"><p class="myclass"></p></div>
4、元素标签下的class。p .myclass <p><span class="myclass"></span></p>
4、元素标签下的id。p #myid<p><span id="myid"></span></p>
5、class下的元素标签。 .myclass span  <p class="myclass"><span>dd</span></p>
6、id标签内的id标签 #myid #myid2 <div id="myid"><div id="myid2"></div></div>。id的用法和元素标签类似。
7、.myclass1 .myclass2是表示两个class使用同一个样式,而不是嵌套。class也能嵌套class。但是若两个.myclass之间没有空格则表示同时拥有这两个class
8、元素标签嵌套元素标签 p span <p><span></span></p>
分享到:
评论

相关推荐

    react-React组件的css选择器

    综上所述,React组件的CSS选择器涉及多种方法和技术,包括CSS Modules、CSS-in-JS、BEM、预处理器等,开发者可以根据项目需求和团队习惯选择合适的方式。同时,理解CSS选择器的工作原理和优先级,以及如何优化性能,...

    css串联选择器和后代选择器使用方法

    CSS(Cascading Style Sheets)是网页样式表语言,用于定义HTML或XML(包括如SVG、MathML等各种XML...在实际开发中,它们经常与其他选择器(如类选择器、ID选择器、属性选择器等)结合使用,以实现更复杂的样式规则。

    CSS选择器分组案例.pdf

    在第二个案例中,我们使用了多重嵌套声明来演示CSS选择器分组的用法。在HTML文档中,我们首先声明了一个样式块,然后使用了`p`选择器和`a`选择器,应用了不同的样式规则。 HTML源代码: ```html &lt;!doctype html&gt; ...

    css后代选择器和子选择器的区别介绍

    这意味着在使用子选择器时,如果需要兼容IE6,可能需要考虑其他选择器的写法,或者使用其他CSS技术替代。而后代选择器是CSS2标准中的一部分,IE6以及之后的浏览器都支持后代选择器。 第三,所达到的效果不同。在...

    css选择器练习代码1

    - 如Sass和Less,允许创建更复杂的选择器结构,如嵌套选择器和变量,提高代码可维护性。 在`css-selector--master`这个项目中,你可能找到了关于这些选择器的实例和练习,通过实践,你可以更好地理解它们的用法并...

    jquery css3嵌套式手风琴特效.zip

    1. **选择器**:使用更复杂的选择器,如伪类(`:hover`, `:active`, `:focus`)和子选择器(&gt;`),更精确地控制样式。 2. **过渡(Transitions)**:定义元素从一种样式到另一种样式的过渡效果,如改变高度和透明度...

    简单学习css组合与CSS嵌套的写法

    这有助于明确样式的作用范围,减少不必要的选择器使用。以以下例子说明: ```css #top { background-color: #ccc; padding: 1em; h1 { color: #ff0; } p { color: red; font-weight: bold; } } ``` 在...

    css选择器, 开发

    本文将基于提供的描述和部分内容,详细介绍几种常见的CSS选择器及其使用方法。 #### 1. 标签选择器 (Element Selector) **定义:** 最基础的选择器类型,用于选取文档中的特定HTML标签。 **示例代码:** ```css p...

    CSS选择器分类汇总图片和文档

    在网页设计和开发中,CSS(层叠样式表)是...以上内容涵盖了CSS选择器的基本概念、分类和使用方法,对于理解和应用CSS样式至关重要。通过深入理解并熟练运用这些选择器,开发者可以更加精细地控制网页布局和视觉效果。

    css基础教程 css使用方法

    在本教程中,我们将深入探讨CSS的基础知识和使用方法。 ### 1. CSS的基本概念 CSS的核心在于定义选择器(Selectors)和声明(Declarations)。选择器指向HTML元素,声明则包含属性(Property)和值(Value),以...

    CSS选择器的新用法(推荐)

    选择器嵌套是另一个强大的CSS新特性,它允许开发者像使用预处理器(如Sass)那样编写CSS,通过嵌套的方式减少重复的代码。 **示例** ```css table.colortable { & td { text-align: center; } & td.c { text-...

    四种CSS常用的选择器使用方法和注意事项

    本文将详细介绍四种常用的CSS选择器:类选择器、ID选择器、HTML元素选择器和通配符选择器,并提供相应的使用方法和注意事项。 1. 类选择器(Class选择器) 类选择器通过在元素前加上`.`符号来指定。例如,`.s1`就是...

    CSS样式生成器

    - **嵌套规则**:在CSS中,可以将选择器组合起来,如`.parent .child`选择父元素内的子元素。 - **媒体查询(Media Queries)**:利用媒体查询,CSS样式可以响应不同的设备和屏幕尺寸,实现响应式设计。 - **变量...

    CSS复合选择器使用介绍

    下面我们来详细了解一下CSS复合选择器中包括的几种类型及其具体的使用方法。 1. 子选择器(Child Selector) 子选择器通过“&gt;”连接符用来选择某个元素的直接子元素。例如,如果父元素的ID是“pic”,子元素是“img...

    在FLEX中使用CSS样式方法

    - 合理使用CSS可以提升Flex应用的性能,避免过度使用嵌套选择器和过于复杂的样式规则。 通过深入理解这些知识点,开发者可以在Flex环境中高效地使用CSS来实现丰富的用户界面设计,创造出既美观又功能强大的应用...

    CSS常用样式总结积累

    1. **选择器**: CSS选择器是匹配HTML元素的方式,如类选择器(`.class`),ID选择器(`#id`),元素选择器(`element`),以及更复杂的组合选择器,如后代选择器(`ancestor descendant`)和相邻兄弟选择器(`...

    CSS 学习笔记之CSS Selector

    下面将详细解释CSS选择器的各种类型及其用法。 1. 类型选择器: 类型选择器是最基础的选择器,用于选取HTML文档中的特定标签。例如,`body`选择器会选取所有的`&lt;body&gt;`元素,而`body, div`会选择`&lt;body&gt;`和所有`...

    css的作用、3种形式、文件规划、选择器(大全)

    这种方法简化了管理,但可能导致小文件过多,或每个页面引入大量CSS。 3. 基于HTML元素:根据页面中特定元素(如form、table)的使用情况,创建对应的CSS文件,只在需要的地方引入。这有助于减少不必要的加载,但...

    CSS源码解读

    在压缩包中的`css-class-17`文件可能是关于CSS类选择器的示例或练习,它可能包含了一些特定的类选择器用法,如创建模块化CSS、使用BEM(Block Element Modifier)命名约定、或者实现响应式设计等。通过对这个文件的...

Global site tag (gtag.js) - Google Analytics