美文网首页
CSS-选择器

CSS-选择器

作者: 哎呦呦胖子斌 | 来源:发表于2018-09-09 11:46 被阅读0次

标签选择器

指用HTML标签名称作为选择器,按标签名进行分类,为页面中的某一类标签指定为同一样式。

类选择器

类选择器用’.’符号进行表示,后面紧跟类名,标签调用时使用 class=’类名’
1.不建议使用”_”来对类名进行命名,会有兼容性问题,可以使用中横线
2.不要用纯数字、中文等命名,尽量使用英文字母来表示

ID选择器

用’#’符号进行表示,后面紧跟id名,标签调用时使用 id=’id名’。
W3C标准规定,在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class;
类选择器好比人的名字,是可以多次重复使用的;
id选择器好比人的身份证号码,是唯一的,不能重复使用。

通配符选择器

*代表所有选择器

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,给第一个、第N个元素添加效果。
为了和类选择器想区别,类选择器是一个点,伪类选择器是两个点:

链接伪类选择器

:link 未访问的链接
:visited 已访问的链接
:hover 鼠标移动到链接上
:active 选定的链接
注意写的时候尽量不要把他们的顺序颠倒,lvha,lv包包非常ha

结构伪类选择器(CSS3)

:first-child 选取属于其父元素的首个子元素的指定选择器
:last-child 选取属于其复原度的最后一个子元素的指定选择器
:nth-child(n) 匹配属于其父元素的第N个子元素,不论元素的类型 even偶数 odd奇数 n从0开始
可以写3n,表示第0 3 6 9 12…个元素
:nth-last-child(n) 选择器匹配属于其父元素的第N个子元素, 不论元素的类型 even偶数 odd奇数 n从0开始,和上一个属性的区别在于,这个子元素是从最后一个子元素开始数的,而上面的属性是从第一个子元素开始数的。

目标伪类选择器

:target目标伪类选择器,选择器可用于选取当前活动的目标元素

复合选择器

交集选择器

由两个选择器构成,其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格。

并集选择器

各个选择器通过逗号连接而成,任何形式的选择器(包括标签选择器、class选择器、id选择器)都可以作为并集选择器的一部分。

后代选择器

后代选择器又称为包含选择器,用来选择元素或元素组的后代,其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分隔。
1.不仅仅是可以写标签名,还可以写类名,记得中间有空格.
2.后代选择器可以选择儿子、孙子、重孙子

子元素选择器

只能选择作为某元素的子元素的元素,写法是把父级标签写在前面,子级标签写在后面,中间用一个>连接,符号左右两侧各保留一个空格。它和后代选择器的区别是,只选择儿子。

属性选择器

选取某些带有特殊属性的标签,属性选择器用中括号来表示。
几种属性选择器:
E[attr]    存在attr属性即可
E[attr=val]    属性值等于val才行
E[attr*=val]   属性值里包含val字符并且在任意位置
E[attr^=val]    属性值里包含val字符并且在开始位置
E[attr$=val]    属性值里包含val字符并且在结束位置

<a href=’’ title=’我是一个百度’>百度</a>
<a href=’’>新浪</a>
<a href=’’>网易</a>
a[title] {
    color:red;
}

伪元素选择器(CSS3)

1.E::first-letter 文本的第一个单词或字
2.E::first-line 文本的第一行
3.E::selection 可改变选中文本的样式
4.E::before,E::after
在E元素内部的开始位置和结束位置创建一个元素,该元素为为行内元素,且必须要结合content属性使用。

相关文章

  • css-选择器

    CSS选择器最主要的基础选择器。 选择器 含义通用元素选择器,匹配页面任何元素。(这也就决定了我们很少使用)...

  • CSS-选择器

    标签选择器 指用HTML标签名称作为选择器,按标签名进行分类,为页面中的某一类标签指定为同一样式。 类选择器 类选...

  • CSS-选择器

    1、元素/标签/类型选择器 以标签作为选择器 p{color:#f00;} div{ba...

  • CSS-选择器

    一、什么是选择器 选择器是指通过一定的语法规则选取对应的HTML标记,然后给对应的HTML标记设置样式。选择器分为...

  • CSS-选择器

    选择器

  • CSS-选择器

    标签选择器 标签选择器是指用HTML标签名作为选择器,可以把某一类标签全部选择出来,然后为页面中某一类标签指定统一...

  • CSS-常用选择器

    常用选择器 子代和父代选择器 伪类选择器 伪元素 属性选择器 孩子选择器 兄弟选择器 否定伪类 优先选择器 a的伪类

  • css-选择器类型

    一、元素选择器 文档元素为最基本的选择器示例: 二、id选择器 id 选择器可以为标有特定 id 的 HTML 元...

  • CSS-属性&&选择器

    CSS选择器、CSS属性 css的固定格式: 注意点: style写在head中间,type="text/css"...

  • CSS-其他选择器

    一、其他选择器 二、目录代码 2-1 id选择器 index.html index.css 2-2 逗号选择器 i...

网友评论

      本文标题:CSS-选择器

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