css选择器有哪些

本文目录

• css选择器有哪些
• css选择器有几种
• css选择器最常用的类型
• css的选择器有哪些优先级
• css3选择器有哪些类型,分别举例语法格式在html标签中使用的方法
• css3有哪些选择器
• 常见css选择器有哪些
• css3的选择器有哪些

css选择器有哪些

1、标签选择器（如：body,div,p,ul,li）。

2、.类选择器（如：class=“head“,class=“head_logo“） 。

3、ID选择器（如：id=“name“,id=“name_txt“）。

4、全局选择器（如：*号）。

5、.组合选择器（如：.head .head_logo,注意两选择器用空格键分开）。

6、.继承选择器（如：div p,注意两选择器用空格键分开）。

7、伪类选择器（如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。）。

8、字符串匹配的属性选择符(^ $ *三种，分别对应开始、结尾、包含) 。

扩展资料：

css选择器的基本定义是：每一条css样式定义由两部分组成，形式如下： [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。

说了这么一大段话，其实简而言之，就是要使用css对html页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器，html页面中的元素就是通过CSS选择器进行控制的。

参考资料来源：百度百科—css选择器

css选择器有几种

1、类别选择器
类选择器根据类名来选择，前面以“.”来标志。
示例：
.demoDiv{
color:#FF0000;
}
2、标签选择器
一个完整的HTML页面是有很多不同的标签组成，而标签选择器，则是决定哪些标签采用相应的CSS样式。
在style.css文件中对p标签样式的声明如下：
p{
font-size:12px;
background:#900;
color:090;
}
3、ID选择器
ID 选择器可以为标有特定 ID 的 HTML 元素指定特定的样式。 根据元素ID来选择元素，具有唯一性，这意味着同一id在同一文档页面中只能出现一次。
前面以”#”号来标志，在样式里面可以这样定义：
#demoDiv{
color:#FF0000;
}
4、后代选择器
后代选择器也称为包含选择器，用来选择特定元素或元素组的后代，将对父元素的选择放在前面，对子元素的选择放在后面，中间加一个空格分开。
《style》
.father.child{
color:#0000CC;
}
《/style》
《p class=“father“》
黑色
《label class=“child“》蓝色
《b》也是蓝色《/b》
《/label》
《/p》
5、子选择器
请注意这个选择器与后代选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一个后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“》”进行选择。
我们看下面的代码：
Example Source Code
CSS：
#links a {color:red;}
#links 》 a {color:blue;}
HTML：
《p id=“links“》
《a href=“#“》HTML中文网《/a》》
《span》《a href=“#“》CSS布局实例《/a》《/span》
《span》《a href=“#“》CSS教程《/a》《/span》
《/p》
6、伪类选择器
有时候还会需要用文档以外的其他条件来应用元素的样式，比如鼠标悬停等。这时候我们就需要用到伪类了。以下是链接应用的伪类定义。
a:link{
color:#999999;
}
a:visited{
color:#FFFF00;
}
a:hover{
color:#006600;
}
/* IE不支持，用Firefox浏览可以看到效果 */
input:focus{
background:# E0F1F5;
}
7、通用选择器
通用选择器用*来表示。例如：
*{
font-size: 12px;
}
表示所有的元素的字体大小都是12px；同时通用选择器还可以和后代选择器组合。
8、群组选择器
当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。如：
p, td, li {
line-height:20px;
color:#c00;
}
#main p, #sider span {
color:#000;
line-height:26px;
}
.#main p span {
color:#f60;
}
.text1 h1,#sider h3,.art_title h3 {
font-weight:100;
}
使用群组选择器，将会大大的简化CSS代码，将具有多个相同属性的元素，合并群组进行选择，定义同样的CSS属性，这大大的提高了编码效率，同时也减少了CSS文件的体积。
9、相邻同胞选择器
我们除了上面的子选择器与后代选择器，我们可能还希望找到兄弟两个当中的一个，如一个标题h1元素后面紧跟了两个段落p元素，我们想定位第一个段落p元素，对它应用样式。我们就可以使用相邻同胞选择器。
10、属性选择器
您可以用判断html标签的某个属性是否存在的方法来定义css。
属性选择器，是根据元素的属性来匹配的，其属性可以是标准属性也可以是自定义属性
11、伪元素选择器
所有伪元素选择器都必须放在出现该伪元素的选择器的最后面，也就是说伪元素选择器不能跟任何派生选择器。

css选择器最常用的类型

css常用的四种选择器类型有：
标签选择器：针对一类标签
ID选择器：针对某一个特定的标签使用
类选择器：针对你想要的所有标签使用
后代选择器：用空格隔开

css的选择器有哪些优先级

1、标记选择器（如：body,div,p,ul,li）
2、id选择器（如：id=“name“,id=“name_txt“）
3、类选择器（如：id=“name“,id=“name_txt“）
4、后代选择器（如：#head.navulli从父集到子孙集的选择器）
5、子元素选择器（如：div》p,带大于号》）
6、伪类选择器（如：就是链接样式,a元素的伪类，4种不同的状态：link、visited、active、hover。）
看完了基本的css选择器类型后，我们接着来看一下css优先级的概念。
当两个规则都作用到了同一个html元素上时，如果定义的属性有冲突，那么应该用谁的值的，用到谁的值谁的优先级就高。
我们来看一下css选择器优先级的算法：
每个规则对应一个初始“四位数“：0、0、0、0
若是行内选择符，则加1、0、0、0
若是ID选择符，则加0、1、0、0
若是类选择符/伪类选择符，则分别加0、0、1、0
若是元素选择符，则分别加0、0、0、1
算法：将每条规则中，选择符对应的数相加后得到的”四位数“，从左到右进行比较，大的优先级越高。
看完了上述内容，那我们就来看看css选择器优先级的具体排序。
css选择器优先级最高到最低顺序为：
1.id选择器（#myid）
2.类选择器（.myclassname）
3.标签选择器（div,h1,p）
4.子选择器（ul《li）
5.后代选择器（lia）
6.伪类选择（a:hover,li:nth-child）
最后，需要注意的是：
!important的优先级是最高的，但出现冲突时则需比较”四位数“;
优先级相同时，则采用就近原则，选择最后出现的样式;
继承得来的属性，其优先级最低。

css3选择器有哪些类型,分别举例语法格式在html标签中使用的方法

1. 属性选择器
属性选择器(Attribute selector)让你可以基于属性来定位一个元素。你可以只指定该元素的某个属性，这样所有使用该属性——而不管它的值——的这个元素都将被定位，也可以更加明确并定位在这些属性上使用特定值的元素 —— 这就是属性选择器展示它们的威力的地方。
有6个不同类型的属性选择器：
[att=value]
该属性有指定的确切的值。
[att~=value]
该属性的值必须是一系列用空格隔开的多个值，(比如，class=”title featured home”)，而且这些值中的一个必须是指定的值”value”。
[att|=value]
属性的值就是“value”或者以“value”开始并立即跟上一个“-”字符，也就是“value-”。(比如lang=”zh-cn”)
[att^=value]
该属性的值以指定值开始。
[att$=value]
该属性的值包含指定的值(而无论其位置)。
[att*=value]
该属性的值以指定的值结束
比如，如果你想要改变你的博客上的日志部分元素的背景颜色，你可以使用一个指定每一个class属性值以“post-”开始的div的属性选择器：
div[class|=“post“] { background-color: #333; }
代码laycode - v1.1
该语句将匹配所有class属性包含”post”并带”-”字符的div元素。(注：此处英文原文有些上下文不对应，我已经更正——译者，神飞)
属性选择器的另一个很有用的用处是定位不同类型的input元素。比如，如果你想让你的文本输入框使用一个特定的宽度，你可以使用下面的属性选择器：
input[type=“text“] { width: 200px; }1
代码laycode - v1.1
这将匹配所有type属性值等于“text”的input元素。
现在我们可能像为网站上不同的文件类型的链接添加不同的图标，这样你的网站的访客就会知道他们将获得一个图片、或者PDF文件、或者是一个word文档等。这就可以使用属性选择器来实现：
a[href*=“.webp“] { background: url(jpeg.webp) no-repeat left 50%; padding: 2px 0 2px 20px; } a[href*=“.pdf“] { background: url(pdf.webp) no-repeat left 50%; padding: 2px 0 2px 20px; } a[href*=“.doc“] { background: url(word.webp) no-repeat left 50%; padding: 2px 0 2px 20px; }
代码laycode - v1.1
在此例中，我们使用了一个定位所有的链接(a)的href属性分别以.webp,.pdf或.doc结束(*)的属性选择器。详细可查看前端观察之前的一篇文章《使用CSS选择器创建个性化链接样式》
浏览器支持
除了Internet Explorer 6，所有的主流浏览器都支持属性选择器。这意味着，如果你在你的网站上使用了属性选择器，你应该确保IE6用户将仍能获得一个可用的网站。比如我们的第三个例子，为链接添加图标可以给你的网站带来另一个级别的可用性，但是如果这些链接不显示任何图标，该网站仍然还是可用的。
2. 子选择器
子选择器用符号“》”表示。它允许你定位某个元素的第一级子元素。
比如，如果你想匹配所有的作为你的网站侧栏的div的子元素的h3元素，而不是可能是在div元素内的所有h3元素，也不是div的孙元素(或者更低级别的)，你就可以使用下面的选择器：
div#sidebar 》 h3 { font-size: 20px; }1
代码laycode - v1.1
你当然也可以同时使用子元素和后代元素。比如，如果你想定位只有在body元素的子级div元素内的blockquote元素(比如你想匹配主要的div内的blockquotes，而不是其它部分的：
body 》 div 》 div blockquote { margin-left: 30px; }
代码laycode - v1.1
浏览器支持
和属性选择器一样，子选择器不被IE6支持。如果你通过这种方式要实现的效果和网站的可用性或总体设计息息相关，你可以考虑使用一个class，或者使用只针对IE6的样式，但是这将有悖使用子选择器的目的。

css3有哪些选择器

css3选择器如下：
　　一、通配符选择器（＊）
　　通配符选择器是用来选择所有元素，，也可以选择某个元素下的所有元素。
　　二、元素选择器(E)
　　元素选择器，是css选择器中最常见而且最基本的选择器。
　　三、类选择器（.className）
　　类选择器是以一独立于文档元素的方式来指定样式，使用类选择器之前需要在html元素上定义类名
　　四、id选择器（#ID）
　　ID选择器和上面说的类选择器是很相似的，在使用ID选择器之前也需要先在html文档中加注ID名称，这样在样式选择器中才能找到相对应的元素，不同的是ID选择器是一个页面中唯一的值，我们在类使用时是在相对应的类名前加上一个“.”号（.className）而id选择器是在名称前使用“#“如(#id),
　　五、后代选择器（E F）
　　后代选择器也被称作包含选择器,所起作用就是可以选择某元素的后代元素，比如说:E
F，前面E为祖先元素，F为后代元素，所表达的意思就是选择了E元素的所有后代F元素，请注意他们之间需要一个空格隔开。
　　六、子元素选择器(E》F)
　　子元素选择器只能选择某元素的子元素，其中E为父元素，而F为子元素，其中E》F所表示的是选择了E元素下的所有子元素F。这和后代选择器（E
F）不一样，在后代选择器中F是E的后代元素，而子元素选择器E 》 F，其中F仅仅是E的子元素而以。
　　七、相邻兄弟元素选择器(E + F)
　　相邻兄弟选择器可以选择紧接在另一元素后的元素，而且他们具有一个相同的父元素，换句话说，EF两元素具有一个相同的父元素，而且F元素在E元素后面，而且相邻，这样我们就可以使用相邻兄弟元素选择器来选择F元素。

常见css选择器有哪些

1.元素选择器：作用：通过元素选择器可以选择页面中的所有指定元素语法: 标签名{}
2.id选择器：-通过元素的id属性值选择唯一元素-语法：#id属性值{}
3. 类选择器：- class属性和id属性类似，只不过class属性可以重复-拥有相同class属性值的元素，我们说他们是一组元素-一个元素可以有多个class属性值，多个值之间用空格隔开。 ！！！！！-通过元素的class属性值选中一组元素-语法：.class属性值{}
4.选择器分组： -通过选择器分组可以同时选中多个选择器对应的元素。 -语法：选择器1，选择器2，选择器N{} -效果：同时选中了选择器1，2，N他们所指向的元素，实现了代码的复用。
5.通配选择器：-他可以用来选中页面中的所有元素。(模糊选择)-语法： *{}
6.精准(复合)(交集)选择器： ！！！！！！-作用：- 可以选中同时满足多个选择器的元素 (精准选择)-语法：选择器1选择器2选择器N{} 指定同时选择器1，2，N的元素
7.后代选择器：-作用：-可以选择某一元素的所有子孙元素。-语法：祖先元素 后代元素{} 注：祖先元素与后代元素之间有一个空格。
8.子元素选择器：-作用：-选中指定父元素的指定子元素。 注：明确子元素与子孙元素的区别-语法：父元素 》 子元素 注：可在一个表达式中连续使用多个 》 明确查找关系
9.属性选择器：- 作用：可以根据元素中的属性或属性值来选取指定元素- 语法：[属性名] 选取含有指定属性的元素
10.兄弟选择器：-选中某一个标签后的紧邻着的兄弟节点，若不紧邻则没用，选择不中。 -标签1 + 标签2{}-选中某一个标签的后面的所有兄弟节点-语法：前一个标签 ~ 后面的所有标签
11.否定伪类：-作用：可以从已经选中的元素中剔除某些元素-语法：:not(选择器)-例如：p:not(.hello) 选中class属性不为hello的p标签

css3的选择器有哪些

css3选择器如下： 

一、通配符选择器（*） 

通配符选择器是用来选择所有元素，，也可以选择某个元素下的所有元素。 

二、元素选择器（E） 

元素选择器，是css选择器中最常见而且最基本的选择器。 

三、类选择器（.className） 

类选择器是以一独立于文档元素的方式来指定样式，使用类选择器之前需要在html元素上定义类名 

四、id选择器（#ID） 

ID选择器和上面说的类选择器是很相似的，在使用ID选择器之前也需要先在html文档中加注ID名称，这样在样式选择器中才能找到相对应的元素，不同的是ID选择器是一个页面中唯一的值，我们在类使用时是在相对应的类名前加上一个“.”号（.className）而id选择器是在名称前使用＂#＂如（#id）, 

五、后代选择器（E F） 

后代选择器也被称作包含选择器，所起作用就是可以选择某元素的后代元素，比如说：E 
F，前面E为祖先元素，F为后代元素，所表达的意思就是选择了E元素的所有后代F元素，请注意他们之间需要一个空格隔开。 

六、子元素选择器（E》F） 

子元素选择器只能选择某元素的子元素，其中E为父元素，而F为子元素，其中E》F所表示的是选择了E元素下的所有子元素F。这和后代选择器（E 
F）不一样，在后代选择器中F是E的后代元素，而子元素选择器E 》 F，其中F仅仅是E的子元素而以。 

七、相邻兄弟元素选择器（E + F） 

相邻兄弟选择器可以选择紧接在另一元素后的元素，而且他们具有一个相同的父元素，换句话说，EF两元素具有一个相同的父元素，而且F元素在E元素后面，而且相邻，这样我们就可以使用相邻兄弟元素选择器来选择F元素。