浅说css的几个选择器（精选5篇）
篇1：浅说css的几个选择器
1.link选择器：link选择器是对未被访问的链接设置样式，目前来说所有的主流浏览器均支持link选择器，一句话来说，link选择器是在你点击链接之前改变链接的一些样式，
2.visited选择器：正如这个选择器的名字一样，visited，这个选择器与link选择器正好相反，它改变已访问链接的设置样式，目前来说所有的主流浏览器均支持visited选择器。
3,.active选择器：active选择器用于选择活动链接，改变它们的设置样式，当你用鼠标点击时，这个链接此时是活动的，active选择器所改变的就是点击一瞬间的那个触发设置样式，目前来说所有的主流浏览器均支持active选择器，
4.hover选择器：hover选择器是选择鼠标指针浮动在其上的元素，并设置其样式。在css的规定中，如果存在：link和：visited，：hover必须位于它们两个的后面才能生效，目前来说所有的主流浏览器均支持hover选择器。
5.focus选择器：focus选择器用来设定鼠标获得焦点的时候的设置样式。它用来选取获得鼠标焦点的元素并在焦点接触时发挥作用，接收键盘事件或其他用户输入的元素都允许 :focus 选择器。目前来说所有的主流浏览器均支持focus选择器，不过如果focus 用于 IE8 ，则必须声明
篇2：浅说css的几个选择器
③ 伪元素和伪类选择器
样例代码如下：...p:first-letter{ font-size: x-large; color: red;}:nth-of-type(2){ background-color: red; color: #000000;}...
④ 联合选择器和反选择器
利用选择器组合实现联合选择和反选择，
电脑资料
篇3：剖析CSS选择器
1 CSS基本选择器
CSS的三个基本组成部分--选择器, 属性和属性值, 其中选择器指定了要设置样式的网页元素, 选择器一般分为基本选择器和复合选择器, 基本选择器又分为标记选择器、类别选择器和ID选择器3种。
1) 标记选择器:一个HTML页面由很多不同的标记组成, 而CSS标记选择器就是申明标记要采用的CSS样式, 每一种HTML标记的名称都可以作为相应的标记选择器的名称, 对HTML标记的默认格式重新定义样式可用标记选择器, 例如代码:h1{color:red font-size:25px;}, 就是对h1标签的样式重新定义了, 凡是页面中使用h1标签的文字都自动采用以上定义的样式。
2) 类别选择器:CLASS选择器的名称是由用户定义的, 它可以应用于任何标签, 可以实现对于同一个HTML标签的不同样式设置, 或者对不同的标签进行相同的设置, 定义时选择符必须以“.”开头。
例如在
中定义CLASS选择器的代码:
3) ID选择器
ID选择器与类别选择器基本相同, 不同之处在于ID选择器在一个页面中只能使用一次, 作为某个元素的唯一标识符, 一般情况下, ID只用于页面的唯一元素, 如页眉, 主导航条, 布局区块等。类别选择器相对灵活一些, 定义的样式可以使用多次。ID选择器的名称一般也是由用户定义的, 定义时选择符必须以“#”开头, 如果涉及到与HTML文档一起工作的话, CLASS和ID名称对大小写都是敏感的。
例如在
中定义ID选择器代码:
在
中引用样式的代码:
在很多浏览器下, ID选择器也可以用于多个标记, 但每个标记定义的ID不仅仅CSS可以调用, JavaScript等其他脚本语言同样可以调用, 如果一个HTML中有两个相同ID的标记, 那将会导致JavaScript查找ID时出错, 因此网站设计者在编写CSS代码时, 应该养成良好的编写习惯, 一个ID最多只能赋予一个HTML标记。
2 复合选择器
复合选择器是对两个或多个基本择器通过不同方式连接而构成的, 它一般有三种形式:交集选择器、并集选择器和后代选择器。
1) 交集选择器
交集选择器是由两个选择器直接连接构成, 其结果是选中二者各自元素范围的交集。其中第一个必须是标记选择器, 第二个必须是类别选择器ID选择器, 二者之间不能有空格, 必须连续书写。
例如在
中分别定义了三个选择器:
在
中引用样式的代码:
上面的代码中定义了
标记的样式, 也定义了.special类别, 还定义了p.special, 用于特殊的控制, 该样式仅仅适用于
标记, 不会影响使用了.special的其他标记。
2) 并集选择器
并集选择器是同时选中各个基本选择器所选择的范围, 任何形式的选择器 (包括标记选择器、类别选择器和ID选择器等) 都可以作为并集选择器的一部分。并集选择器是多个选择器通过逗号连接而成。当某些选择器的风格完全相同或部分相同, 则可以利用并集选择器同时申明风格相同CSS选择器。
例如在
中定义的选择器代码:
在
中引用样式的代码:
显示效果为:所有行的颜色都是红色, 字体大小为20px。其中“示例文字h2、示例文字p2、示例文字p3有下划线。
3) 后代选择器
后代选择器是通过嵌套的方式对特殊位置HTML标记进行申明, 它的写法是把外层标记写在前面, 内层标记写在后面, 之间用空格分隔, 当标记发生嵌套时, 内层的标记就称为外层标记的后代。标记选择器、类别选择器和ID选择器都可以嵌套构成后代选择器。
例如在
中定义的选择器代码:
选择器的嵌套在CSS的编写中可以大大减少对class和id的声明, 使代码更加简洁。在构建页面HTML框架时通常只给外层标记定义class或id, 内层标记不需要再定义, 只有当子标记无法利用此规则, 才单独进行声明。
3 其他选择器
1) 通配选择器:通配选择器选择页面的所有元素进行样式化。例如:下面的规则将对页面的每个元素都添加一个1像素的实心黑色边框。
2) 属性选择器:属性选择器是基于元素所包含的属性来对它们进行选择。例如下面的选择器来选择所有具有alt属性的img元素:
使用以上选择器, 就可以对具有alt属性的所有图像都添加一个黑色边框。还可以通过属性值来进行选择, 属性选择器会变得更加有用。下面的规则适用于所有src属性值为alert.gif图像:
3) 子对象选择器:子对象选择器是选择作为其它特定元素子对象的元素。例如下面的规则会把作为h3元素子对象的strong元素中的文本转换为蓝色, 但不会转换其它的strong元素。
子对象选择器只影响直接后代, 而后代选择器不仅限于元素的“直接后代”, 还会影响到它的“各级后代”
4) 伪类选择器:伪类不是用来为元素提供样式的, 而是为元素的各种状态提供样式, 最常见的用法就是样式化链接状态。
4 结束语
CSS样式表在网页设计中发挥的作用越来越大, 选择器又是CSS的核心概念, 选择器的不同形式及其应用常常让网页开发人员混淆不清, CSS选择器根据所应用样式的对象不同, 它的形式也不相同, 选择合适的选择器类型应用于不同的网页元素, 不但可以缩减代码, 而且使网站更易于维护, 从而降低网站后期维护成本。
参考文献
[1]温谦.CSS网页设计标准教程[M].北京:人民邮电出版社, 2009:14-28.
篇4：浅说css的几个选择器
【关键词】CSS 选择器 基础语法规则 工作原理
一、引言
CSS是层叠样式表（Cascading Style Sheets）的缩写，用于定义HTML元素的显示形式，是W3C推出的格式化网页内容的标准技术，是网页设计者必须掌握的技术之一。在HTML文档中加入CSS样式表可分为嵌入式样式表、外部样式表和内联样式表三种，在同一文档内可以同时使用三种方法。
二、CSS选择器的基础语法规则
选择器是CSS语法中最重要最基本的概念。使用选择器可以指定XHTML文档中特定标签应用CSS样式。选择器有许多类型，包括标签选择器、类选择器、ID选择器、全局选择器、组合选择器、继承选择器和伪类选择器等。
（一）标签选择器。一个XHTML文档中有许多标签，例如p标签、h1标签等。若要使文档中的所有p标签都使用同一个CSS样式，就应使用标签选择器。如代码“h1 {color：red； font-size：14px；}”，这行代码的作用是将 h1元素内的文字颜色定义为红色，同时将字体大小设置为14像素。在这个例子中，h1是选择器，color和 font-size是属性，red和14px是值。标签选择器可以直接改变该标签的所有样式。
（二）类选择器。使用标签选择器可以为整个XHTML文档中的同一个标签指定相同的CSS样式，但是在实际运用中，XHTML文档中的同一个标签会被反复使用，若要为相同的标签赋予不同的CSS样式就应使用类选择器。以下是使用类选择器定义CSS样式的步骤：（1）编写合适的类选择器名，然后定义CSS样式声明，例如定义类选择器名为news的CSS样式代码.news{ font-size：20px；color：green }。（2）把以news为名的CSS样式应用到XHTML某个指定的标签中。将news样式指定给标签的方法如下：新闻，其中，在
中写入class=“news”的语句。Class和等号都是固定的写法，在双引号中写入类选择器的名称。
篇5：浅说css的几个选择器
后代选择器的写法为，子代元素以空格与父元素形成连接关系构成选择器，如：
divspan{color:blue;}
以上规则的结果为：“作为div元素后代的任何span元素显示为蓝色字体”。
选择器之间的空格是一种结合符(combinator)。每个空格结合符可以解释为“...在...中找到”、“...作为...的一部分”、“...作为...的后代”，但是要求必须从右向左读选择器——《CSS权威指南》第三版
CSS还有两种选择器：类选择器和ID选择器，个中细则不是本文陈述的重点。本文的重点是：空格在后代选择器、类选择器和ID选择器相结合的情况中的种种问题，及解决方式。
先看看以下的规则：
div.blue{color:blue;}
以上规则的结果为：“所有class属性值为blue的div元素显示为蓝色字体”。然而我的要求并不是这样，我的要求是：“作为div元素后代的任何class属性值为blue的元素显示为蓝色字体”。试试以下的规则：
div.blue{color:blue;}
以上规则的改进之处为“div”与“.blue”之间多了一个空格，这样是否就能形成后代选择器呢?答案是否定的!该规则实现的结果依旧是：“所有class属性值为blue的div元素显示为蓝色字体”。
那么该怎么结合类选择器构成后代选择器的效果呢?方法是有的，那就是给父元素div设置一个class或者id属性，假设我给它加上一个class属性，于是规则就变为：
div.contain.blue{color:blue;}
以上规则的结果为：“所有class属性值为contain的div元素，其后代中class属性值为blue的任何元素显示为蓝色字体”。结果虽然不能完全达到我的苛刻要求，但已经很接近了，
接近了，效果一定是很明显的，然而我却发现完全没有了蓝色字体，因为我把规则写为：
div.contain.blue{color:blue;}
以上规则的不同之处在于，“.contain”与“.blue”之间少了一个空格!少了空格，以上选择器就不是后代选择器了，而是另外一种选择器：“多类选择器”。
在HTML中，一个class值中有可能包含一个词列表，各个词之间用空格分隔。那么以上的多类选择器只能将规则应用于如下形式的元素中：
text
以上的class属性值少了其中一个都无法将字体显示为蓝色!
将以上规则放在一起，比较起来会清晰一点：
1div.contain.blue{color:blue;}/*后代选择器*/
2div.contain.blue{color:blue;}/*多类选择器*/
以上两种规则分别应用的元素如下：
1containblue
2containandblue
值得注意的是：ID属性不允许有以空格分隔的词列表。所以以下的规则将无法应用到任何元素：
div#contain#blue{color:blue;}
以上的规则将无法应用到任何元素。你只能乖乖地用空格将两个ID选择器分隔，构成后代选择器。
综上，选择器之间的空格是一种结合符，如果要构成后代选择器，则空格两边的选择符必须为如下两种形式：
元素选择符 空格 元素选择符
非元素选择符 空格 非元素选择符
后代选择器中绝对不可能出现的一种情形：元素选择符 [空格] 非元素选择符。
最重要一点：两个类选择器之间存在空格则构成后代选择器，之间没有空格的则构成多类选择器。
参考资料：《CSS权威指南：第三版》Eric A.Meyer著 尹志忠 侯妍译