css类别选择器并集,css选择器有哪些类型？css常用选择器的简单介绍

本篇文章给大家带来的内容是关于如何使用css选择器有哪些类型&＃xff1f;css常用选择器的简单介绍&＃xff0c;有一定的参考价值&＃xff0c;有需要的朋友可以参考一下&＃xff0c;希望对你有所帮助。

css标签选择器

作用&＃xff1a;选中页面中的所有指定元素

语法&＃xff1a;标签名&＃xff1a;{}

id选择器

作用&＃xff1a;通过元素的id属性值钻中唯一一个元素

语法&＃xff1a;#id{}

css类选择器

作用&＃xff1a;通过元素的class属性值选中一组元素

语法&＃xff1a;.class属性值{}

可以同时为一个元素设置多个class属性值&＃xff0c;多个值之间用空格隔开

选择器分组(并集选择器)

作用&＃xff1a; 通过选择器分组可以同时选中多个选择器对应的元素

语法&＃xff1a;选择器1,选择器2,选择器N{}

例&＃xff1a;选中id为p3、class属性值包含p2、h1标签#p3,.p2,h1{

background-color: yellow;

}

css通配选择器

作用:选中页面中所有的元素

语法&＃xff1a;*{}

css交集选择器(复合选择器)

作用&＃xff1a;可以选择同时满足多个选择器的元素

语法&＃xff1a;选择器1选择器2选择器N{}

注意&＃xff1a;因为id可以唯一确定一个元素&＃xff0c;因此不要对id使用交集选择器

例&＃xff1a;选中class属性值包含p4的spanspan.p4{

background-color:#4169E1;

}

元素之间的关系&＃xff1a;

父元素&＃xff1a;直接包含子元素的元素。

子元素&＃xff1a;直接被父元素包含的元素。

祖先元素&＃xff1a;直接或简介包含后代元素的元素&＃xff0c;父元素也是祖先元素。

后代元素&＃xff1a;直接或间接被祖先元素包含的元素&＃xff0c;子元素也是后代元素。

兄弟元素&＃xff1a;拥有相同父元素的元素。

css后代元素选择器

作用&＃xff1a;选中指定元素的后代元素

语法&＃xff1a;祖先元素 后代元素{}

例&＃xff1a;选中div中的spandiv span {

color: chartreuse;

}

css子元素选择器(IE6及以下的浏览器不支持)

作用&＃xff1a;选中指定父元素的指定子元素

语法&＃xff1a;父元素>子元素

例&＃xff1a;选中div中的spandiv>span{

background-color: yellow;

}

伪类选择器用来表示元素的一种特殊的状态。

如&＃xff1a;访问过的超链接&＃xff0c;普通超链接&＃xff0c;获取焦点的文本框

当我们需要为处在这些特殊状态的元素设置样式时&＃xff0c;就可以使用伪类给连接定义的样式

正常链接&＃xff1a;a:link

访问过的链接&＃xff1a;a:visited(只能定义颜色)

鼠标滑过的连接&＃xff1a;a:hover

正在点击的链接&＃xff1a;a:active

a:link和a:visited之间的顺序没规定&＃xff0c;但他们必须在a:hover和a:active前面&＃xff0c;a:hover又必须在a:active前面

hover和active也可以为其他元素设置 如 p:hover p:active 不过ie6及以下不支持

其他伪类&＃xff1a;

:focus 获取焦点

:before 指定元素前

:after 指定元素后

::selection 选中的元素(火狐中应该这样用::-moz-selection)

使用伪元素来表示元素中的一些特殊位置

:first-letter : 第一个字符

:fist-line : 第一行字符

:before : 表示元素最前边的部分

一般before都需要结合content这个样式一起使用&＃xff0c;

通过content可以向before或after的位置添加一些内容

:after : 表示元素的最后边

将p标签中的第一个字符设置为黄色25pxp:first-letter{

color:yellow;

font-size: 25px;

}

p:first-line{

background: #FF0000;

}

将content的内容添加到p元素的最前面

p:before{

content: "ABC";

}

将content的内容添加到p元素的最后面

p:after{

content: "DEF";

}

css属性选择器

作用&＃xff1a;可以根据元素中的属性或属性值来选取指定的元素

语法&＃xff1a;[属性名]选取具有指定属性的元素

[属性名&＃61;属性值 ]选取含有指定属性值的元素

[属性名^&＃61;属性值]选取属性值以指定内容开头的元素

[属性名$&＃61;属性值]选取属性值以指定内容结尾的元素

[属性值*&＃61;属性值]选取属性值包含指定内容的元素/*为具有title属性的p元素设置背景颜色*/

p[title]{

color: darkorchid;

}

/*为title属性值为hello的元素设置一个背景颜色*/

p[title&＃61;hello]{

background-color: cornflowerblue;

}

/*为title属性是ab开头的元素设置一个背景颜色*/

p[title^&＃61;"ab"]{

background-color: chartreuse;

}

p[title$&＃61;"d"]{

font-size: 28px;

}

伪类子元素选择器

:first-child : 可以选中第一个子元素

:last-child : 可以选中最后一个元素

:nth-child : 可以选中任意位置的子元素

该选择器后边可以指定一个参数&＃xff0c;指定要选择第几个元素

even&＃xff1a;偶数

odd: 奇数

first-of-type

last-of-type

nth-of-type

和xxx-chlid类似&＃xff0c;不过xxx-child是在所有元素中选择&＃xff0c;xxx-of-type是在指定类型中选择

例&＃xff1a;选中第一个p标签p:first-child{

color:coral;

}

选中第3个p标签

p:nth-child(3){

color:chartreuse;

}

设置表格奇偶行背景颜色不同

tr:nth(even){

background-color:pink;

}

tr:nth(odd){

background-color:skyblue;

}

后一个兄弟元素选择器

作用&＃xff1a;可以选中一个元素后紧挨着的指定兄弟元素

语法&＃xff1a;前一个&＃43;后一个

例&＃xff1a;选中p标签后的相邻的兄弟span(p和span不一定相邻)p&＃43;span{

color:red;

}

选中后边的所有兄弟元素

语法&＃xff1a;前一个~后边所有

否定伪类&＃xff1a;

作用&＃xff1a;从选种的元素中剔除某些元素

语法&＃xff1a; :not(选择器)

例&＃xff1a;为所有的p元素设置一个背景颜色&＃xff0c;出了class为hello或hello2的元素p:not(.hello):not(.hello2){

background-color: antiquewhite;

}

相关文章推荐&＃xff1a;