美文网首页
CSS选择器

CSS选择器

作者: 徐辉英 | 来源:发表于2019-03-21 16:52 被阅读0次

1.类选择器

根据元素的类型选择元素

格式: 元素 <p>


2.ID选择器

选择具有ID属性的元素 可以将ID选择器与类型选择器相结合 指定某个类型下的特定ID设置属性

格式: #ID


3.后代选择器

在另一个元素中选择一个元素 选择父元素中所有子元素 组合后代和ID选择器可以指定具有特定ID的子元素

格式: 父元素> 子元素 #ID


4.类型选择器

具有相同类的元素 可以将类型选择器与其他选择器组合使用 指定既是某个类又是这个父类元素下具有特定ID属性的子元素

格式: .类名(class)


5.逗号

可以将多个选择器分离开表示选择选择器选中的多个元素

格式: A选择器,B选择器,C选择器


6.通用选择器(星号)

将选择所有元素中的每个元素(星号与选择器结合)

表示所有元素

格式: 类 <这儿有一个空格>*

兄弟选择器<7,8>


7.相邻选择器

选择直接跟随另一个元素的元素

格式: A元素+B元素(B元素的位置一定紧随A元素)


8.一般兄弟姐妹选择器

选择一个元素后面的所有元素

格式: A元素~B元素(包括B元素本身)


9.子元素选择器

选择元素的直接子元素 选择所有子元素 子元素可以是嵌套在另一个元素中的任何一个元素

格式: A>B


10.否定伪类

可以选择不是其他东西的某件东西

格式: :not(选择器)


11.带公式的n类型选择器

类型为n的公式选择每个第n个元素,从该元素的特定实例开始计数

格式: :nth-of-type(n+数字)<n是一个公式表示每隔几个选取元素,数字表示从第几个元素开始,包括开始元素>


12.唯一类型选择器

选择仅属于其类型的唯一元素

格式: :only-of-type


13.空的选择器

选择没有子元素的元素

格式: :empty


14.群组选择器

可以同时使用多个选择器, 多个选择器将被同时应用指定的样式

格式: 选择器1,选择器2,选择器3 { }


15.属性选择器

属性选择器可以挑选带有特殊属性的标签。这里匹配由正则表达式完成

语法:[属性名]

[属性名="属性值"]

[属性名~="属性值"]

[属性名|="属性值"]

[属性名^="属性值"]  开头

[属性名$="属性值"]  结尾

[属性名*="属性值"]  包含


16.其他元素选择器

格式: :first-child 选择第一个子标签

:last-child 选择最后一个子标签

:nth-child 选择指定位置的子元素

:first-of-type()

:last-of-type()

:nth-of-type()

选择指定类型的子元素


17.伪类选择器

伪类专门用来表示元素的一种特殊的状态

比如:访问过的超链接、普通的超链接、获取焦点的文本框

当我们需要为处在这些特殊状态的元素设置样式时,就可以使用伪类

为没访问过的链接

:link 表示普通的链接(没访问过的链接)

为访问过的链接

:visited 表示访问过的链接

浏览器是通过历史记录来判断一个链接是否访问过 由于涉及到用户的隐私问题,所以使用:visited伪类只能设置字体的颜色

:hover 表示鼠标移入的状态

:active 表示超链接被点击的状态

<:hover和:active也可以为其它元素设置 IE6中,不支持对超链接以外的元素设置:hover和:active>

文本框获取焦点以后,修改背景颜色为黄色

input:focus{

background-color: yellow;}

<为p标签中选中的内容使用样式可以使用::selection伪类

注意:这个伪类在火狐中需要采用另一种方式编写>

</*兼容大部分浏览器的*/

p::selection{

background-color: orange;}

/*兼容火狐的*/

p::-moz-selection{

background-color: orange;}>


选择器使用很灵活 可以互相叠加嵌套 

任意门:

CSS3选择器  http://www.w3school.com.cn/cssref/css_selectors.asp

相关文章

  • CSS选择器

    CSS 元素选择器CSS 选择器分组CSS 类选择器详解CSS ID 选择器详解CSS 属性选择器详解CSS 后代...

  • CSS选择器

    目录: CSS派生选择器 CSS元素选择器 CSS Id 和 Class选择器 CSS 属性选择器 CSS 派生选...

  • css选择器

    css选择器】 1.css属性选择器 2.css伪类选择器 3.css层次选择器

  • CSS 选择器

    CSS 选择器 CSS 基本选择器及其扩展 CSS 基本选择器 通配符选择器 * 元素选择器 使用标签的名称...

  • Sublime 学习web的css

    html + css + js css引用 css外部样式 css优先级 css的选择器 标签选择器 类选择器 i...

  • CSS选择器

    CSS选择器的作用 CSS 选择器用于定位我们想要给予样式的 HTML 元素。 CSS选择器的类型 CSS选择器大...

  • JQuery CSS选择器

    CSS普通选择器 选择器函数 CSS伪类选择器

  • CSS-选择器1-概述

    CSS选择器-系列文章 CSS选择器-系列文章下一节 CSS选择器2-类选择器CSS3参考手册

  • CSS选择器、优先级以及!important知识总结

    一、CSS选择器 关于CSS选择器,首先请看这里:CSS 选择器参考手册 通过以上,我们可以将CSS选择器分为以下...

  • CSS

    CSS规则 at 规则 CSS选择器 CSS选择器 继承与层叠 继承与层叠 CSS 属性 CSS 属性 CSS值 ...

网友评论

      本文标题:CSS选择器

      本文链接:https://www.haomeiwen.com/subject/lhbfvqtx.html