美文网首页
选择器(2)

选择器(2)

作者: 戴西西的染坊 | 来源:发表于2017-12-26 11:52 被阅读0次

选择器 --> 选择元素进行样式实现.

属性选择器

可快速选取指定元素进行样式应用.

1. 只选取属性名

E[attr]

a[href] { background: red; } 表示选择了使用了href属性的a标签进行此样式实现.


2. 选取属性名并且有确定值value.

E[attr="value"] 

a [href="#1"] { background:blue; }

指定选取元素有特定属性值value应用样式的情况.

属性值必须确定和value一致才行不可多不可少.


3. 选取属性名并且值有value即可.

E[attr~="value"]

<a href="#1" title="in the way" target="_blank">1</a>

a[title~="the"] { color:red; } 表示选取的元素值中是the或者词表中含有the 即可.

注意和第二个区分开,这个就是在属性值(可以是单个词或者词句)中搜寻到一个词匹配value即可选定.


4. 指定属性名,选中属性值为value开头的元素.

E[attr^"value"]

<a href="#1" title="begin hahaha" target="_blank">1</a>
<a href="#2" title="end hahaha" target="_blank">2</a>

a [title^="end"] {background : blue; } 表示选取title 值开头为 end 的a元素进行样式应用.

注意不要丢了^ 符号.


5. 指定属性名,属性值以value结尾的元素.

E[attr$="value"]

<a href="#1" title="This is a great beginning" target="_blank">1</a>
<a href="#2" title="This is a great end" target="_blank">2</a>

a[title$="beginning"]{ background:orange; }
选取值为beginning的元素进行样式应用.

6. 指定属性名,在属性名中指定值含有指定value即选定.

E[atte*="value"]

<a href="#1" title="Youth means limitless possilities." target="_blank">1</a>

a [title$="limit"] { background=gray;}  选中value含有limit 字符的元素进行样式应用.

注意和 ``` E[attr~="value"] 第三个进行区分,第三个选取的是值中某个词是value,而这个是词中只要含有value 即可.

7. 指定属性名,属性值是value或者value-开头的值.

E[attr|="value"]

<a href="#1" title="tangsen-one hahaha" target="_blank">1</a>
<a href="#2" title="tangsen hahaha" target="_blank">2</a>

a [title|="tangsen"] { color:yellow; }选中以上两种情况.

注意 | 是enter键上面那个英文状态下按shift出现的.

相关文章

  • css学习

    4月24日——4月28日 24日 css选择器 1,了解什么是选择器 2,选择器 2-1,标签选择器 2-2,...

  • jQuery基础

    1.基础核心 2.常规选择器 1.简单选择器 2.进阶选择器 3.高级选择器 4.属性选择器5.过滤选择器 3.基...

  • jQuery

    1 选择器1所有的 元素 2 id选择器 3 class选择器 4 更多实例 2 事件

  • css2选择器,盒模型

    1、css选择器 标签选择器 id选择器 类选择器 层级选择器 组选择器 伪类选择器 2、css盒模型 设置边框 ...

  • jQuery选择器

    jQuery选择器可以分为基本选择器、层次选择器、过滤选择器和表单选择器。 1、基本选择器 2、层次选择器 3、过...

  • css选择器

    1.CSS选择器常见的有几种? id选择器、class选择器、标签选择器、组合选择器、伪类选择器、属性选择器 2....

  • CSS-其他选择器

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

  • CSS 几种选择器

    通配符选择器(*) 该选择器可以与任何元素匹配 后代选择器(空格) :选择器1 选择器2 { } 备注:后代选择...

  • Task8

    1.css常见的选择器有几种 id选择器 class选择器 分组选择器 属性选择器 派生选择器 伪类选择器 2.选...

  • CSS选择器、属性的三个特性、元素的显示方式、锚伪类、bpm

    目录 1.选择器 1.标签选择器、类选择器、id选择器、通配符 2.并集选择器、交集选择器、后代选择器、子代选...

网友评论

      本文标题:选择器(2)

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