【关于css选择器知识详解】教程文章相关的互联网学习教程文章

CSS关联选择器的大致类型总结

1.包含选择符(A F) 选择所有被A元素包含的F元素,中间用空格隔开2.子选择符(A>F)选择所有作为A元素的直接子元素F,对更深一层的元素不起作用,用大括号表示。3.相邻选择符(A+F)选择紧贴在A元素之后的F元素,用加号表示。选择相邻的第一个兄弟元素。4.兄弟选择符(A~F)选择A元素之后的所有兄弟元素F,作用于多个元素,用~隔开原文:http://www.cnblogs.com/elementzhao/p/6941232.html

CSS3选择器的研究,案例【图】

在上一篇CSS3选择器的研究中列出了几乎所有的CSS3选择器,和伪类选择器,当是并没有做案例的研究,本想在那篇文章里面写,但想想如果把案例都写在那篇文章里面,对于查找来说就不是很方便,所有另开一篇来讲实例。 属性选择器[title]:选择带有title属性的元素[title=‘hello‘]:选择属性是title并且值是hello的元素[title~=‘hello‘]:选择属性是title并且部分值是hello的元素,hello需要是单独的值,以空格分开[title*=‘hello‘]...

CSS选择器之伪类选择器(伪元素)

selection[CSS4]应用于文档中被用户高亮的部分(比如使用鼠标或其他选择设备选中的部分)。(IE8及以下不支持)(火狐-moz-selection)first-line选择每个 <p> 元素的首行,并为其设置样式。first-letter选择每个 <p> 元素的首字母,并为其设置样式。before在每个 <p> 元素的内容之前插入新内容。after在每个 <p> 元素的内容之后插入新内容。cue backdrop placeholder marker spelling-error grammar-error 与伪类一样, 伪元素添加...

CSS3新增的选择器和属性

<!doctype html>无标题文档一、新增的选择器CSS3新增的属性选择器 {除ie6外的大部分浏览器支持)序号选择器含义实例1E[att^="val"]属性att的值以"val"开头的元素div[id^="nav"] { background:#ff0; }2E[att$="val"]属性att的值以"val"结尾的元素 3E[att*="val"]属性att的值包含"val"字符串的元素 结构伪类选择器(过滤选择器) (注:FireFox 1.5/2.0/3.0支持E:root,FireFox 3.0支持E:last-child、E:only-child、E:empty。  由于...

CSS中hover选择器的使用详解【图】

有些时候需要用到mouseover和mouseout这两个鼠标事件,但是写js又比较麻烦,还要添加监听事件,所以能用css解决的东西尽量yongcss解决,这样可以提高性能,下面说一下我对:hover 的了解:之前在学计算机应用的时候,老师教我们使用了:hover选择器来完成下拉菜单,之前只知道怎么使用,并不知道为什么要这么用,现在记下怎么使用吧定义和用法定义::hover 选择器用于选择鼠标指针浮动在上面的元素。:hover 选择器适用于所有元素用法1...

CSS选择器【图】

1、主要工作方式2、通过选择器选择一个或多个html标签3、使用css样式规则定义这些标签样式4、ie8以及ie8以下的浏览器不支持css3选择器 一、选择器分类 1、基本选择器 1.1类名和id的命名规范 1.2属性选择器 1.3伪类选择器(动态伪类) 1.4伪类选择器的顺序 1.5ui元素状态伪类选择器 1.6ui可用与禁用 1.7ui选中状态 1.8伪类选择器 - 结构伪类 ...

css选择器的优先级顺序是什么?

当我们写页面的时候,不知道你会不会产生这样的问题,为什么我给他添加的这条样式分明已经选择到我要给的元素了,但是他的样式并没有生效呢?当定义的属性有冲突时,浏览器会选择用那一套样式呢?本章给大家介绍css选择器的优先级顺序是什么。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。一、选择器的优先级排序  1. !important    在属性后面写上这条样式,会覆盖掉页面上任何位置定义的元素的样式。...

css3中UI元素状态伪类选择器实例详解

这篇文章主要介绍了css3之UI元素状态伪类选择器 ,其中包括hover、active和focus,enabled,disabledread-only与read-write 等等,需要的朋友可以参考下所谓UI选择器:就是指定的样式只有当元素处于某种状态下时,才起作用,在默认状态下不起作用!浏览器兼容性:E:hover 支持firefox、safari、Opera、ie8、chrome ------------E:active 支持firefox、safari、Opera、chrome ...

深入理解CSS选择器的优先级顺序

CSS中有很多选择器,比如类选择器,标签选择器,ID选择器等等,不同选择器之间的优先级顺序也不一样,今天就和大家聊聊CSS选择器的优先级顺序,以及、!important的使用,有需要的朋友可以参考一下,希望对你有用。1、!important 表示最高优先级。ie6浏览器不认识 !important 。举例:正常情况下,写在下面的样式优先级高于上面的样式demo1{ color:red; color:green; /*绿色的优先级高于红色,所有浏览器都会显示绿色*/ }加了!impor...

关于CSS伪类选择器-HotenHuang

#CSS伪类选择器##使用css伪类选择器需要注意的使用css的伪类选择器来选择某元素时,需要特别注意 :first-child 和 :nth-child(n) 等时, 网页渲染是从语句的后面开始读取的,也就是说,类似 p:first-child 这样的伪类选择器,指的是&ldquo;某元素的以p元素作为第一子项的那项&rdquo;,而不是&ldquo;p元素的第一个子项&rdquo;. 原因是因为,其实这里在p:之前,省略了 xxx & nbsp; 这几个字符,导致很容易产生误解。e.g. div p:f...

css基本选择器有哪些?css基本选择器有哪四种【图】

在上篇我们已经了解了css语法规则由什么组成?那么很多学员不知道ss基本选择器有哪些?css基本选择器有哪四种?下面我们来总结一下。一:css基本选择器有哪些1.css属性选择器2.css标签选择器3.cssID选择器4.css的通配符二:css有哪些高级选择器1.css标签选择器css标签选择器其实就是页面上的所有类型的标签,我们对经常描述称为共性,对无法描述的称为个性。我们在页面上看到input,div和ul都有可能是选择器,无论这个标签藏得多深,...

css选择器有哪些【图】

css有哪些选择器?css选择器有几种?怎么使用css选择器?要想实现对html实现一对一的控制,就要去使用css选择器,那么css选择器有哪些?下面我们来总结一下css选择器。如果我们合适使用css选择器,会让我们的代码变的更有效率。css选择器是什么?我们都知道css都是有两部分组成的,例如:body{background-color:yellow;},其中在{}之前的body我们就称为选择器,当然选择器也为{}中的样式命名一个名字。css选择器有哪些?在css中,c...

CSS选择器和jQuery选择器的区别与联系之一

CSS选择器和jQuery选择器的区别与联系之一 到底什么是选择器?通过常接触的CSS选择器和jQuery选择器理解一下,我们知道CSS是用于分离网页的结构和表现的,也就是说对于一个网页,HTML定义网页的结构,CSS描述网页的样子,一个很经典的例子是说HTML就像一个人的骨骼、器官,而CSS就是人的皮肤,有了这两样也就构成了一个植物人了,加上javascript,这个植物人就可以对外界刺激做出反应,可以思考、运动、可以给自己整容化妆(改变CSS...

简单的CSS选择器-常规选择器

简单的CSS选择器-常规选择器* css常规选择器有5个 * tag标签选择器: $(div),根据标签名选择,返回集合 * id选择器:$(#top), 根据元素id属性选择,返回单个 * class选择器:$(.active), 根据元素class属性选择,返回集合 * *通配选择器: $(*),选择全部元素,返回集合 * group组选择器: $(p, h2, li),同时选择多个不同元素,返回集合<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>1简单的CSS选择器-常规选择器</title> </h...

CSS选择器的权重与优先规则【图】

在CSS中,会根据选择器的特殊性来决定所定义的样式规则的次序,具有更特殊选择器的规则优先于具有一般选择器的规则,如果两个规则的特殊性相同,那么后定义的规则优先 我们在使用CSS对网页元素定义样式时经常会遇到这种情况:要对一般元素应用一般样式,然后在更特殊的元素上覆盖它们。那么我们怎么样来保证我们所新定义的元素样式能覆盖目标元素上原有的样式呢? 在CSS中,会根据选择器的特殊性来决定所定义的样式规则的次序,具有...