css选择器写法

合集下载

css样式的六种选择器

css样式的六种选择器css常⽤的选择器有：1.标签选择器：标签选择器，这种选择器影响范围⼤，建议尽量应⽤在层级选择器中。

如：*{margin:0;padding:0} /* 影响所有的标签 */div{color:red} /* 影响所有的div标签 */<div>......</div> <div class=”box”>......</div> 2.id选择器：通过id名来选择元素，元素的id名称不能重复，所以⼀个样式设置项只能对应于页⾯上⼀个元素，不能复⽤，id名⼀般给程序使⽤，所以不推荐使⽤id作为选择器。

id是所有标签的属性，所有标签都有id属性，写代码时id的值是不允许重复的如：#box{color:red}<div id=”box”>......</div> 3.类选择器：（常⽤）通过类名来选择元素，⼀个类可应⽤于多个元素，⼀个元素上也可以使⽤多个类，应⽤灵活，可复⽤，是css中应⽤最多的⼀种选择器。

如：.red{color:red}.big{font-size:20px}.mt10{margin-top:10px}<div class=”red”>......</div>4.层级选择器：主要应⽤在选择⽗元素下的⼦元素，或者⼦元素下⾯的⼦元素，可与标签元素结合使⽤，减少命名，同时也可以通过层级，防⽌命名冲突。

如：.box span{color:red}.box .red{color:pink}.red{color:red}<div class=”box”><span>......</span><a href=”#” class=”red”>......</a></div><h3 class=”red”>......</h3>层级选择器最好不要超过四层，否则会影响性能。

css之标签选择器

css之标签选择器标签（空格分隔）：标签选择器选择器定义：在⼀个HTML页⾯中会有很多很多的元素，不同的元素可能会有不同的样式，某些元素⼜需要设置相同的样式，选择器就是⽤来从HTML页⾯中查找特定元素的，找到元素之后就可以为它们设置样式了。

选择器为样式规则指定⼀个作⽤范围。

基础选择器包含：1.标签选择器2.类选择器3.ID选择器4.通⽤选择器标签选择器：顾名思义通过标签名来选择元素；例如：p {color: red;}将所有的p标签设置字体颜⾊为红⾊。

如下代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>css的选择器</title><style type="text/css">/*标签选择器*//*p{*//*color:red;*//*font-size:20px;*//*}*//*span{*//*color:yellow;*//*font-size:20px;*//*}*/body{color: gray;font-size: 12px;}</style></head><body><!--css选择器1.标签选择器：标签选择器，可以选中所有的标签，⽐如div,ul,li,p等等；不管标签的藏得多深，都能选中；选中的是所有的，不是某⼀个，所以说这个标签选择器选中的是"共性"的属性，⽽不是"特性"<p>我是⼀个段落</p><ul><li><span>想想吧</span></li></ul></div><div><div><div><div><p>藏得深的段落</p></div></div></div></div></body></html>id选择器：通过元素的ID值选择元素：例如：#i1 {color: red;}将id值为i1的元素字体颜⾊设置为红⾊。

CSS3属性选择器与（：not）选择器

CSS3属性选择器与（：not）选择器⼀：css3属性选择器img[alt]{border:2px dashed #000;}这个选择器会匹配页⾯标签中任何⼀个含有alt属性的图⽚标签。

还可以通过设定属性值来缩⼩匹配范围：如下代码：img[alt="atwi_oscar"]{border:2px dashed #000;}css3的⼦字符串匹配属性选择器（1）‘匹配开头’的属性选择器依法如下：Element[attribute^="value"]，实例代码如下：img[alt^="filem"]{border:2px dashed #000;}(2)'匹配包含内容'的属性选择器Element[attribute*="value"]，实例代码如下：img[alt*="filem"]{border:2px dashed #000;}(3)'匹配结尾'的属性选择器Element[attribute$="value"]，实例代码如下：img[alt$="filem"]{border:2px dashed #000;}⼆：(:not)选择器否定伪类选择器，⽤于选择不满⾜某些条件的元素，例如：nav ul li:not(.internal) a{color:#000;}多提⼀点关于伪元素的：对伪元素的修正P:first-line 会选中<p>标签的第⼀⾏内容，P:first-letter会选中其中第⼀个字母。

css3要求对伪元素使⽤2个冒号以便对伪类进⾏区别。

但IE8及更低的版本⽆法识别2个冒号的语法，它们只识别⼀个冒号。

C SS选择器汇总详细可参考：下⾯附⼀个详细的css选择器的表格：选择器例⼦例⼦描述CSS .intro选择 class="intro" 的所有元素。

30个最常用css选择器解析讲解

30个最常用css选择器解析作者：iiduce 文章来源：点击数：835 更新时间：2011-7-31你也许已经掌握了id、class、后台选择器这些基本的css选择器。

但这远远不是cs s的全部。

下面向大家系统的解析css中30个最常用的选择器，包括我们最头痛的浏览器兼容性问题。

掌握了它们，才能真正领略css的巨大灵活性。

1.以下是代码片段：* {margin: 0;padding: 0;}星状选择符会在页面上的每一个元素上起作用。

web设计者经常用它将页面中所有元素的margin和padding设置为0。

*选择符也可以在子选择器中使用。

以下是代码片段：#container * {border: 1px solid black;}上面的代码中会应用于id为container元素的所有子元素中。

除非必要，我不建议在页面中过的的使用星状选择符，因为他的作用域太大，相当耗浏览器资源。

兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera2. #X以下是代码片段：#container {width: 960px;margin: auto;}井号作用域有相应id的元素。

id是我们最常用的css选择器之一。

id选择器的优势是精准，高优先级（优先级基数为100，远高于class的10），作为javascript脚本钩子的不二选择，同样缺点也很明显优先级过高，重用性差，所以在使用id选择器前，我们最好问下自己，真的到了非用id选择器的地步？兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera3. .X以下是代码片段：.error {color: red;}这是一个class(类)选择器。

class选择器与id选择器的不同是class选择器能作用于期望样式化的一组元素。

兼容浏览器：IE6+、Firefox、Chrome、Safari、Opera4. X Y以下是代码片段：li a {text-decoration: none;}这也是我们最常用的一种选择器——后代选择器。

CSS选择器-孩子孙子-兄弟（~+）

CSS选择器-孩⼦孙⼦-兄弟（~+）> 是⼉⼦辈的选择器，只选择⼉⼦辈先写⼀个最基本的（可以在本地跑⼀下试⼀试）：<!DOCTYPE html><head><meta charset="UTF-8"><title>测试⽹页</title><style>div article h2{color:blue;}</style></head><body><div><article><h2>div下的article的h2标签-1</h2><div><h2>div下的article下的div下的h2标签-2</h2></div><h2>div下的article的h2标签-3</h2></article></div></body></html>View Code区别于这个：<!DOCTYPE html><head><meta charset="UTF-8"><title>测试⽹页</title><style>div article>h2{color:blue;}</style></head><body><div><article><h2>div下的article的h2标签-1</h2><div><h2>div下的article下的div下的h2标签-2</h2></div><h2>div下的article的h2标签-3</h2></article></div></body></html>View Code ·······················································~是兄弟选择器，但是只是选择的兄弟的后⾯的兄弟被选择<!DOCTYPE html><head><meta charset="UTF-8"><title>测试⽹页</title><style>div article h2~h2{color:blue;}</style></head><body><div><article><h2>div下的article的h2标签-1</h2><div><h2>div下的article下的div下的h2标签-2</h2></div><h2>div下的article的h2标签-3</h2><h2>div下的article的h2标签-4</h2></article></div></body></html>View Code+是“铁兄弟”选择器，只选择紧挨着他的，如果后⾯第⼀个紧挨着的不是他，那就不选了。

基本选择器,标签选择器的写法

基本选择器,标签选择器的写法在CSS中，选择器是用来选择需要添加样式的元素的。

选择器可以分为基本选择器和标签选择器，它们是CSS中最常用的选择器，下面将分别介绍它们的写法和使用方法。

一、基本选择器的写法基本选择器是用来选择HTML元素的ID、class和元素自身的。

下面列举了基本选择器的写法：1. ID选择器ID选择器以"#"号来定义，后面跟着ID的名称。

ID选择器在页面中只能出现一次。

示例：```css#myId {color: red;font-size: 16px;}```2. class选择器class选择器以"."号来定义，后面跟着class的名称。

一个元素可以有多个class，class选择器可以同时选择多个元素。

示例：```css.myClass {color: blue;font-size: 14px;}```3. 元素选择器元素选择器直接使用元素的名称作为选择器。

p元素选择器将选择所有的p标签元素。

示例：```cssp {text-align: center;line-height: 26px;}```二、标签选择器的写法标签选择器是使用HTML标签名称来定义的，它可以选择指定的标签元素，并为其添加样式。

1. 标签选择器的写法标签选择器直接使用HTML标签的名称来定义样式，如下所示：```cssbody {background-color: #f4f4f4;font-family: Arial, sans-serif;}```2. 标签选择器的嵌套标签选择器可以进行嵌套，例如选择所有p标签元素下的a标签元素，并为其添加样式。

示例：```cssp a {color: blue;text-decoration: none;}```总结基本选择器和标签选择器是CSS中最常用的选择器之一，它们可以根据ID、class和元素名称来选择并为其添加样式。

css deep写法

css deep写法
CSS deep写法，也被称为“/deep/”选择器，是一种在Web组件中使用的CSS写法。

它的基本思想是通过“/deep/”符号将CSS规则应用到所有子组件中。

这种写法在Web组件规范（Scoped CSS）中得到了支持，并被广泛用于实现组件样式的隔离和继承。

使用“/deep/”选择器时，需要在CSS规则前加上“/deep/”符号，并指定要应用的CSS属性。

例如，下面的代码将“color”属性应用于所有子组件中的元素：
css
/deep/ * {
color: red;
}
需要注意的是，“/deep/”选择器并不是所有浏览器都支持的标准，它在Chrome浏览器中得到支持，但在其他浏览器中可能无法使用。

因此，在使用“/deep/”选择器时需要进行兼容性测试，以确保代码在所有浏览器中都能正常工作。

CSS基本语法

CSS基本语法CSS常⽤选择器1、页⾯中，所有的CSS代码，需要写⼊到<style></style>标签中。

style标签的type属性应该选择text/css2、CSS 注释CSS修改页⾯中的所有标签，必须借助选择器选中。

选择器中，可以写多对CSS属性，⽤{}包裹：每个属性名与属性值之间⽤:分隔，多对属性之间，必须⽤;分隔。

3、【CSS常⽤选择器】①标签选择器写法： HTML标签名{}作⽤：可以选中页⾯中，所有与选择器同名的HTML标签。

②类选择器(class选择器)写法： .class名{}调⽤：在需要调⽤选择器样式的标签上，使⽤class="class名"调⽤选择器优先级： >标签选择器③ID 选择器写法： #ID名{}调⽤：需要调⽤样式的标签，起⼀个id="ID名"优先级： ID选择器>class选择器注意：⼀个页⾯中，不能出现同名ID【Class选择器与ID选择器的区别】写法不同:class选择器⽤.声明，ID选择器⽤#声明；优先级不同： ID选择器>class选择器作⽤范围不同： class选择器可以多次调⽤，ID选择器只能使⽤⼀次。

【选择器的命名规范】只能有字母、数字、下划线、减号组成；开头不能是数字。

也不能是只有⼀个减号。

⼀般，起名要求有语义，使⽤英⽂单词与数字的组合。

④通⽤选择器写法： *{}作⽤：可以选中页⾯中所有的HTML标签。

优先级：最低⑤并集选择器写法：选择器1,选择器2,……,选择器n{}⽣效规则：多个选择器取并集，只要标签满⾜其中任意⼀个选择器，样式即可⽣效。

⑥交集选择器写法：选择器1选择器2……选择器n{} 所有选择器紧挨着，没有分隔⽣效规则：多个选择器取交集，则必须满⾜所有选择器的要求，才能⽣效⑦后代选择器写法：选择器1 选择器2 …… 选择器n{} 选择器之间空格分隔⽣效规则：只要满⾜，后⼀选择器是前⼀个选择器的后代，即可成效。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

css选择器写法
在CSS中，选择器用于指定需要样式化的元素。

以下是一些
常见的CSS选择器写法：
1. 元素选择器（Element Selector）：以元素的标签名作为选择器，例如：div、p、h1等。

2. 类选择器（Class Selector）：以“.”开头，后面跟类名，例如：.container、.red等。

3. ID选择器（ID Selector）：以“#”开头，后面跟ID名，例如：#header、#nav等。

4. 后代选择器（Descendant Selector）：用空格分隔选择器，
选择元素的后代，例如：div p、ul li等。

5. 子元素选择器（Child Selector）：用“>”选择元素的直接子
元素，例如：ul > li。

6. 伪类选择器（Pseudo-class Selector）：以“:”开头，用于选择
元素的特殊状态或行为，例如：hover、first-child等。

7. 伪元素选择器（Pseudo-element Selector）：以“::”开头，用
于选择元素的特殊部分，例如：::before、::after等。

8. 属性选择器（Attribute Selector）：用方括号括起来，用于
选择具有特定属性值的元素，例如：[href]、[type='text']等。

9. 通配选择器（Universal Selector）：用“*”选择所有元素。

以上是一些常见的CSS选择器写法，可以根据需求选择合适的选择器来选择样式化的元素。