css选择器代码(常用css选择器)
常见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标签
CSS选择器
flex-control-nav
这个是调下正常的数据
flex-control-nav .flex-active
这个选择器我就没看见了
css选择器有哪些？各种选择器优先级大小顺序
1、类型选择器
CSS中的一种选择器是元素类型的名称。使用这种选择器(称为类型选择器)，可以向这种元素类型的每个实例上应用声明。例如，以下简单规则的选择器是H1，因此规则作用于文档中所有的H1元素。
2、简单属性选择器
CLASS属性
CLASS属性允许向一组在CLASS属性上具有相同值的元素应用声明。BODY内的所有元素都有CLASS属性。从本质上讲，可以使用CLASS属性来分类元素，在样式表中创建规则来引用CLASS属性的值，然后浏览器自动将这些属性应用到该组元素。
类选择器以标志符(句点)开头，用于指示后面是哪种类型的选择器。对于类选择器，之所以选择句点是因为在很多编程语言中它与术语"类"相关联。翻译成英语，标志符表示"带有类名的元素"。
ID属性
ID属性的操作类似于CLASS属性，但有一点重要的不同之处:ID属性的值在整篇文档中必须是唯一的。这使得ID属性可用于设置单个元素的样式规则。包含ID属性的选择器称为ID选择器。
需要注意的是，ID选择器的标志符是散列符号(#)。标志符用来提醒浏览器接下来出现的是ID值。
STYLE属性
尽管在选择器中可以使用CLASS和ID属性值，STYLE属性实际上可以替代整个选择器机制。不是只具有一个能够在选择器中引用的值(这正是ID和CLASS具有的值)，STYLE属性的值实际上是一个或多个CSS声明。
通常情况下，使用CSS，设计者将把所有的样式规则置于一个样式表中，该样式表位于文档顶部的STYLE元素内(或在外部进行链接)。但是，使用STYLE属性能够绕过样式表将声明直接放置到文档的开始标记中。
3、组合选择器类型
可以将类型选择器、ID选择器和类选择器组合成不同的选择器类型来构成更复杂的选择器。通过组合选择器，可以更加精确地处理希望赋予某种表示的元素。例如，要组合类型选择器和类选择器，一个元素必须满足两个要求:它必须是正确的类型和正确的类以便使样式规则可以作用于它。
外部信息:伪类和伪元素
在CSS1中，样式通常是基于在HTML源代码中出现的标记和属性。对于很多设计情景而言这种做法完全可行，但是它无法实现设计者希望获得的一些常见的设计效果。
设计伪类和伪元素可以实现其中的一些效果。这两种机制扩充了CSS的表现能力。在CSS1中，使用伪类可以根据一些情况改变文档中链接的样式，如根据链接是否被访问，何时被访问以及用户和文档的交互方式来应用改变。借助于伪元素，可以更改元素的第一个字母和第一行的样式，或者添加源文档中没有出现过的元素。
伪类和伪元素都不存在于HTML;也就是说，它们在HTML代码中是不可见的。这两种机制都得到了精心设计以便能够在CSS以后的版本中做进一步地扩充;也就是说实现更多的效果。
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
在“新建css样式”对话框中可用的选择器有哪四种？
最常用的四种选择器是：元素选择器、类选择器、ID选择器、派生选择器
1、元素选择器
最常见的css选择器当属元素选择器了，在HTML文档中该选择器通常是指某种HTML元素，例如：p,h2,span,a,div乃至html。
例如：
html {background-color: black;}
p {font-size: 30px; backgroud-color: gray;}
h2 {background-color: red;}
以上css代码会对整个文档添加黑色背景；将所有p元素字体大小设置为30像素同时添加灰色背景；对文档中所有h2元素添加红色背景。
通过上面的例子也可以看出css的基本规则结构：由选择器和声明块组成。每个声明块中包含一个或多个声明。每个声明的格式为：属性名 ： 属性值。如下图所示：
每条声明以分号”;”结尾。如果在一个声明中使用了不正确的属性值，或者不正确的属性，则该条声明会被忽略掉。另外请注意不要忘记每条声明后面的分号。
我们也可以同时对多个html元素进行声明：
h1, h2, h3, h4, h5, h6, p {font-family: 黑体;}
这样会将文档中所有的h1~h6以及p元素字体设置为”黑体”。如果我们希望一锅粥地选取所有的元素，可以使用通配符”*”： * { font-size: 20px;}
这样所有的元素都将被选中，虽然font-size属性对于某些元素是无效的，那么它将被忽略。
2、类选择器
(1)单类选择器
单纯的元素选择器似乎还过于粗糙了，比如我们希望在文档中突出加粗显示某种重要的内容，例如稿件的截至日期。问题在于我们不能确定稿件的截至日期将会出现在哪种元素中，或者它可能出现在多种不同的元素中。这个时候，我们可以考虑使用类选择器(class selector)。
要使用类选择器我们需要首先对文件元素添加一个class属性，比如截至日期可能会出现在以下元素中:
p class="deadline".../p
h2 class="deadline".../h2
这样我们就可以用以下方式使用类选择器了：
p.deadline { color: red;}
h2.deadline { color: red;}
点号”.”加上类名就组成了一个类选择器。以上2个选择器会选择所有包含”deadline”类的p元素和h2元素。而其余包含该属性的元素则不会被选中。
如果我们省略.deadline前面的元素名，那么所有包含该类的元素都将被选中：
.deadline { color: red;}
通常情况下，我们会组合使用以上2者得到更加有趣的样式：
.deadline { color: red;}
span.deadline { font-style: italic;}
以上代码首先会对所有的包含deadline的元素字体设置为红色，同时会对span元素中的文本添加额外的斜体效果。这样，如果你希望某处文本拥有额外的斜体效果将它们放在span/span中就可以了。
(2)多类选择器
在实践的做法中，元素的calss属性可能不止包含一个单词，而是一串单词，各个单词之间用空格隔开。
比如某些元素包含一个”warning”类，某些元素包含一个”important”类，某些元素同时包含”warning important”类。属性名出现的顺序没有关系：
class = "warning important"
class = "important warning"
以上2者是等价的。我们希望包含warning类的元素有一个醒目的红色字体，包含important属性的元素有一个加粗的字体显示，而同时包含以上2中属性的元素另外拥有一个蓝色背景(不管还能不能看清文字了)，我们可以使用以下的css代码：
.warning { color: red;}
.important { font-weight: bold;}
.warning.important { background: blue;}
当然，第三条你也可以写成： .important.warning { background: blue;} 和词序没有关系。说明一下，.warning会匹配所有包含warning属性的元素，不管该元素还包含多少其他的属性。.important同理。而.important.warning会匹配所有同时包含以上2种属性的元素，不管该元素还包含多少其他的类，也不管他们在类列表中出现的顺序，只要其中含有这2个属性，则会被选择进来！
同样地，多于多类选择器，在前面加上元素名，则会匹配包含指定类名的指定元素，例如：p.warning.important {}
将会匹配同时包含warning和important属性的p元素，其他同样包含以上2类的元素则不会被选中。
3、ID选择器
ID选择器和类选择器有些类似，但是差别又十分显著。首先一个元素不能像类属性一样拥有多个类，一个元素只能拥有一个唯一的ID属性。其次一个ID值在一个HTML文档中只能出现一次，也就是一个ID只能唯一标识一个元素(不是一类元素，而是一个元素)。类似类属性，在使用ID选择器前首先要在元素中添加ID属性，例如：
p id="top-para".../p
p id="foot-para".../p
使用ID选择器的方法为井号”#”后面跟id值。现在我们使用id选择器选择以上2个p元素如：
#top-para {} #foot-para {}；
这样我们就可以对以上2个段落进行需要的操作了。正因为ID选择器的唯一性，也使其用法变得相对简单。
4、属性选择器
属性选择器在css2中引入，使我们可以根据元素的属性及属性值来选择元素。下面分别来说明：
(1)简单属性选择器
简单的属性选择器可以使我们根据一个元素是否包含某个属性来做出选择。使用方法为: 元素名[属性名] 或 *[属性名]。比如我们希望选择带有alt属性的所有img元素： img[alt] { ...}
选择带有title属性的所有元素：*[title] { ...}。同类选择器类似，我们也可以根据多个属性信息进行选择，例如同时拥有href和title的a元素：
a[href][title] { ...}
组合使用类选择器使我们的选择更加富于灵活性。
(2)具体属性值选择器
如果我们希望更加精确地根据属性值来选择元素，我们可以在简单的属性选择器中指定属性的值。最简单的我们希望找到href属性值为的锚元素：
a[href=""] { font-weight: bold;}
要特别注意的是，这里的具体值匹配实质上是一个字符串匹配，所以在这里对于class属性而言，词条的顺序是有关系的。
p[class="warning important"] { ...}
将不会匹配到p class="important warning"/p，也不会匹配到p class="warning important mini-type"，这里就是一个生硬的字符串匹配。
另外，想要同时匹配多个属性的值也是可以的：
p[class="warning"][title="para"] { ...}
将匹配到类为warning(仅有warning)，title属性为para的p元素。
(3)部分属性值选择器
根据属性值来匹配元素无疑比简单的属性匹配更加精细化了，但是似乎有些精细化过头了，字符串的完全匹配显得过于生硬。比如我们希望选择在一串属性值中出现了某个关键字的元素，不妨再次以class属性为例，我们希望选择所有包含了warning类的p元素，属性值匹配将无法做到，好在还是有办法的，我们可以使用以下的部分值匹配选择器：
p[class~="warning"] { ...}
该选择器在等号”=”前面添加了一个波浪号~，含义为包含后面的字串的匹配。以上代码将会选择所有class属性中包含”warning”的p元素。为了更加清楚地说明问题，它和以下的选择器是等价的：
p.warning { ...}
当然~=不仅仅只是用在class属性上，这只是一个示例。
再比如说，我们的文档中包含一系列人物介绍的div元素：
div title="intro 1".../div
div title="intro 2".../div
div title="intro 3".../div
我们可以使用以下的方式选择所有人物简介div：div[title~="intro"] { ...}
不过遗憾的是div title="animal intro"也将会被选择进来，这是需要我们特别注意的地方。
关于部分值选择器也有其局限性，它匹配的是由空格分隔的单词，如果我们将上面的div写成下面的样子就会匹配失败：
div title="intro-1".../div
div title="intro-2".../div
div title="intro-3".../div
对于这种情况，我们可以使用子串匹配属性选择器。规则如下：
l div[title^="intro"] {...} //title以intro开头的div元素
l div[title$="intro"] {...} //title以intro结尾的div元素
l div[title*="intro"] {...} //title中包含"intro"子串的div元素
举例来说：
a[href*="google."] {...}
将包含所有链接中包含”google.”的a元素。
div[title$="y"] {...}
将包含以下所有div元素：
div title="cloudy".../div
div title="snowy".../div
div title="rainy".../div
可以看出部分值属性选择器的功能是十分强大的。
5、派生选择器
派生选择器，乍一看名字不知所云，它又名上下文选择器，它是使用文档DOM结构来进行css选择的。DOM结构在此不再赘述了，但为了更加清楚地说明问题，我们这里给出一个DOM树作为参考：
(1)后代选择器(descendant selector)
如上图，如果想要选择body元素的所有li子元素，方法如下：
body li { ...}
这里会选择所有的li后代，也就是图中的body下的所有li，不论他们之间相隔的代数有多少。同理，如果想要选择h1元素下的span，可以使用以下代码：
h1 span { ...}
如果我们要选择拥有warning类的元素的li后代，可以使用下面的方法：.warning li { ...}
当然，如果希望只选择拥有warning类的div元素的li后代，可以写作：div.warning li { ...}
由上面的例子不难看出，后代选择器的规则就是用空格连接2个或多个选择器。空格的含义为：…的后代。多个选择器的情况如下： ul li li { ...}
这样，就会选择所有ul下包含在li元素下的所有li元素了，听起来十分拗口，参考我们的DOM树，会选择到文档树种最后一排li元素。
(2)子元素选择器(child selector)
子元素选择器和后代选择器不同，它只能选择某元素的直接后代，不能跨代选取，用法如下：ul li { ...}
两个子元素中间用一个大于号连接。上面的代码会选择到所有ul元素的直接li子元素。对应到DOM树中，所有的li元素都会被选中，原因是图中所有的li元素都是ul的子元素。
但是，以下代码将不会选中任何元素：h1 span { ...}
由于span是h1的”孙子元素”，h1没有直接的span子元素，因而上面的代码将不会选到任何结果。其他方面和后代元素类似，需要特别注意的就是子元素选择器不能隔代选取。
(3)相邻兄弟选择器(Adjacent sibling selector)
相邻兄弟选择器，故名思意将会选取某个元素的相邻兄弟元素，注意它选取的是相邻的兄弟元素而不是所有的兄弟元素，实际上选取的是紧跟在后面的兄弟元素。
相邻兄弟选择器在实践中有比较不错的应用，例如，你想在一个h2标题后面的段落应用某种独到的样式或者希望在某类p段落后的table上添加一个额外的边距等等。它的用法如下：
li + li { ...}
以上代码会选择所有作为li相邻元素的li元素，听起来又有点拗口，参考DOM树，它会选择除了排在第一个li元素的其余4个li元素，因为2个排在第1的li元素没有更靠前的兄弟元素来选择它。
再比如：h1 + p { ...} 会选择所有紧跟h1后面的p兄弟元素。h1.warning + p { ...} 会选择所有有用warning类的h1元素后面紧跟的p兄弟元素。
(4)几种派生选择器的结合使用
实际上，以上介绍的几种派生选择器可以结合使用，看下面的例子：
html body li.warning + li { ...}
上面的选择器含义为：html元素的body子元素中，所有拥有warning类的li元素的相邻兄弟元素。
CSS代码选择器格式问题。
我直接把html标签写出来：
div class="photoT "
div class="more "
a href="#"内容/a
/div
/div
第一行的样式只对 div class="more "这个标签有效，而且必须是在div class="photoT "内才有效，单独存在是无效的；
而第二行是针对a href="#"这个标签有效的，而且必须是在上面那种嵌套结构下才会调取这个样式，而逗号则是说明 .photoT .more a:visited与前面调取同一个样式，例如：
div class="more01"/div
div class="more02"/div
要让2个div调取同一个样式的话，就可以写为：.more01,.more02{}