美文网首页
简单选择器

简单选择器

作者: cooore | 来源:发表于2016-06-30 23:26 被阅读0次

选择器

·简单选择器

标签选择器

p{color:blue;}

类选择器 .className

.special{color:red;}

.stress{font-weight:bold;}

-. 开头

-字母、数字、-、_

-className必须以字母开头

-区分大小写

-出现多次

id选择器 #id

#banner{color:black;}

-# 开头

-字母、数字、-、_

-id必须以字母开头

-区分大小写

-只出现一次

通配符选择器

*{color:blue;}

属性选择器

[att]

[disabled]{background-color:#eee;}

[att=val]

[type=button]{color:blue;}

id选择器其实就是属性选择器的特例

#nav{} == [id=nav]{}

[att~=val]表示属性里面包含了这么一个值,这个值以空格分隔

[class~=sports]{color:blue;}

类选择器就是这种选择器的一个特例

.sport{} == [class~=sports]{}

[att|=val]

[lang|en]{color:red;}选中lang属性等于以en或en-开头的这些元素

[att^=val]以某个值开头的属性选择器

[href^="#"]{color:red;}

[att$=val]以什么结尾的一些元素

[href$=pdf]{color:red;}

[att*=val]属性值包含某些值的

[href*="lady.163.com"]{color:pink;}

·伪类选择器

a:link{color:gray;}选中页面中所有的链接

a:visited{color:red}表示访问过的链接

a:hover{color:green}鼠标移上去的样式

a:active{color:orange}用户鼠标点击上去的样式

input:enabled{color:#ccc;}

input:disabled{color:#ddd;}

input:checked{color:#red;}

li:first-child{color:red;}

li:last-child{color:red;}

li:nth-child(even){color:red;}

li:nth-child(3n+1){color:red;}

li:nth-last-child(3n+1){color:red;}

:only-child{color:red;} 选中只有一个子元素的项

dd:first-of-type{color:red;}选中第一个这种类型的元素

dd:last-of-type{color:red;}

dd:nth-of-type(even){color:red;}

dd:nth-last-of-type(2n){color:red;}

span:only-of-type{color:red;}

:empty选中没有子元素的元素

:root选中html根标签

:not()选中不包含某个选择器的一些元素

:target选中被锚点选为目标的目标元素

:lang()选中language的值是某些特殊值的一些元素


相关文章

  • CSS选择器

    css选择器 CSS选择器可以简单分为三类:简单选择器、伪元素选择器、组合选择器 简单选择器 标签选择器 标签选择...

  • 1.4.2选择器

    1.4.2.1简单选择器 选择器 简单选择器 伪元素选择器 组合选择器 标签选择器 类选择器 .classname...

  • CSS简明教程——选择器

    简单选择器 属性选择器 伪类与伪元素 组合选择器 1. 简单选择器 标签选择器 类选择器 HTML: CSS: I...

  • 简单选择器

    选择器 ·简单选择器 标签选择器 p{color:blue;} 类选择器 .className .special{...

  • css选择器

    选择器 简单选择器 .class id tagname * [attr=v] : :: :not 复合选择器 <简...

  • 「CSS 」选择器

    选择器简单选择器标签选择器类选择器id 选择器通配符选择器属性选择器伪类选择器其他选择器伪元素选择器组合选择器选择...

  • 【前端】-013-页面制作-CSS-选择器

    简单选择器,简单选择器可以进行组合 标签(元素)选择器标签名{参数:参数值;}p{color: red;} 类选择...

  • 前端笔记(7)css选择器(一)

    选择器分类 简单选择器:针对某一特征判断是否选中元素。 复合选择器:连续的简单选择器,根据元素特征判断是否选中单个...

  • 第十三节:CSS选择器

    选择器 选择器:精准选中想要的元素 简单选择器 1、ID选择器2、元素选择器3、类选择器4、通配符选择器*,选中所...

  • jQuery - 常规选择器(简单选择器, 进阶选择器, 高级选

    学习要点:1)简单选择器 (元素选择器,id选择器,类选择器)2)进阶选择器3)高级选择器 jQuery最核心的组...

网友评论

      本文标题:简单选择器

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