css3选择器怎样选择元素？

Posted 2023-03-17

参考技术A

代码如下：

li:nth-child(3n)

background:#ff0000;

CSS即层叠样式表(Cascading StyleSheet)。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。

CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。

参考技术B

一 css 没有父元素选择器，只有子元素选择器h1 > strong，选择第一个 h1 下面的strong 元素；兄弟选择器h1 + p 选择紧接在另一个元素后的元素，而且二者有相同的父元素；

二 父元素可以使用jquery，$(".class:parent") 或 $(".class").parent();

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的子元素而以。

怎样通过CSS选择器获取元素节点或元素节点集合

使用 document.querySelector() 和 document.querySelectorAll(), 将 CSS选择器 作为参数传入即可.

// 标签选择器
document.querySelector("div");

// id选择器
document.querySelector("#app");

// 组选择器
document.querySelector("body div");

 

注意: 

1. querySelecotor()返回某个元素节点, querySelectorAll()返回一个NodeList实例对象;

2. 两个方法都支持复杂的CSS选择器, 但不支持伪类和伪元素选择器;

3. 两个方法不仅在document上, 而且还定义在元素节点上, 比如可以这样用: document.body.querySelector()