css3學習 之 css選擇器(css3 屬性選擇器)
這是上一篇css選擇器介紹裡面內容比較詳細。。大家可以看看 下面我將結合《HTML 5與css 3權威指南》這本書 對css選擇器再進行記錄下
裡面有些個人見解如果看客覺得有問題。可以提出來。。謝謝
先說明下本機瀏覽器吧：opera 10 firefox 4.0 chrome 由於是公司機器xp的。。所以ie版本為 ie8 另外有一個ietest
在css3中，提倡使用選擇器來將樣式與元素直接繫結起來，這樣的話，在樣式表中什麼樣式與元素相匹配變得一目瞭然，修改起來也很方便。不僅如此，通過選擇器，我們還可以實現各種複雜的指定，同時也能大量減少樣式表的程式碼書寫量，最終書寫出來的樣式也會變得簡潔明瞭。
1：css3 屬性選擇器
(1)[att*=val]; (2)[att^=val];(3)[att$=val];
1： [att*=val];解釋：如果元素用att表示的屬性之屬性值中包含用val指定的字元的話，則該元素使用這個樣式.
example:
<html>
<head>
<style>[id*=section]{ background-color:red;}</style>
</head>
<body>
<p id="sections9999"></p>
</body>
</html>
執行效果：除了ie其他均能正常顯示。。
2:[att^=val];解釋：如果元素用att表示的屬性之屬性值的開頭為用val指定的字元的話，則該元素使用這個樣式。(其實你可以這樣理解在正則裡面^匹配開頭嘛所以嘍。。)
example:
略；
執行效果：除了ie其他均能正常顯示。。
3:[att$=val];解釋：如果元素用att表示的屬性之屬性值的結尾為用val指定的字元的話，則該元素使用這個樣式。(在正則裡面$匹配結尾。。)
example:
略；
執行效果：除了ie其他均能正常顯示。。
下面再看一個例子:
<<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<style>
a[href$=\/]:after,a[href$=html]:after,a[href$=htm]:after{
content:"web網頁";
color:red;}
a[href$=jpg]:after{
content:"JPG影象素材";
color:green;}</style>
</head>
<body>
<ul>
<li><a href="http://home.cnblogs.com/blog/">部落格</a></li>
<li><a href="http://www.cnblogs.com/webblog/archive/2009/07/07/1518274.html">css選擇器</a></li>
<li><a href="ss.jpg">影象素材</a></li>
</ul>
</body>
</html>
執行效果：除了ie其他均能正常顯示。。
相關推薦
css3學習 之 css選擇器(css3 屬性選擇器)
這是上一篇css選擇器介紹裡面內容比較詳細。。大家可以看看 下面我將結合《HTML 5與css 3權威指南》這本書 對css選擇器再進行記錄下 裡面有些個人見解如果看客覺得有問題。可以提出來。。謝謝 先說明下本機瀏覽器吧：opera 10 firefox 4.0 ch
CSS3的新增選擇器示例-屬性選擇器
一. CSS3概述 css3是css2的升級版本，新增了許多特性，彌補了css2的眾多不足之處。 css3許多查詢元素的方法，極大的提高了查詢元素的效率和精準度。 css3目前在市場上，對pc端的
css3選擇器--基本選擇器，層次選擇器，屬性選擇器
對HTML頁面中的元素使用CSS實現一對一，一對多或者多對一的控制，要用到CSS選擇器。在大篇CSS程式碼中，並沒有說明什麼樣式服務於什麼元素，只是在元素中使用了class屬性。而cl
前端基礎學習之CSS選擇器
CSS基礎之選擇器 派生選擇器 通過元素在其位置的上下文關係來定義樣式，使標記更加簡潔 派生選擇器允許你根據文件的上下文關係來定義某個標籤的樣式，通過合理的使用派生選擇器，可以是Html程式碼更加的簡潔 程式碼示例： li strong {
HTML &CSS之複合選擇器中的交集選擇器、並集選擇器、後代選擇器、子元素選擇器、相鄰兄弟選擇器、屬性選擇器
複合選擇器是通過基本選擇器進行組合後構成的，常用的複合選擇器有：交集選擇器、並集選擇器、後代選擇器、子元素選擇器、相鄰兄弟選擇器和屬性選擇器等。 1. 交集選擇器 交集選擇器由兩個選擇器直接構成
CSS3選擇器（基礎選擇器、屬性選擇器、偽類選擇器、選擇器策略）
《CSS3基本選擇器》 一、萬用字元選擇器（＊）*{marigin:0;padding:0;}二、元素選擇器(E)li {background-color: grey;color: orange;}三、類選擇器（.className）四、id選擇器（#ID）#first
[持續更新]CSS3學習筆記（一）偽類選擇器&自定義字型&背景圖片
CSS3學習筆記 1. 偽類選擇器 CSS3之前的偽類共有：::first-line,::first-letter, :after, :before, :hover, :active, :visited, :focus, :link,:first-child, :l
css選擇器(2)——屬性選擇器和基於元素結構關系的選擇器
tro 性能 border end 元素 接受 span div word 在有些標記語言中，不能使用類名和id選擇器，於是css2引入了屬性選擇器。 3.屬性選擇器 a)根據是否存在該屬性來選擇 如果希望選擇有某個屬性的元素，例如要選擇有class屬性的所有h
006---css複合選擇器（交集選擇器，並集選擇器，後代選擇器，子元素選擇器，屬性選擇器，偽元素選擇器）
複合選擇器是由兩個或讀個基礎選擇器，通過不同的方式組合成的，目的是為了可以選擇更準確的目標元素。一、交集選擇器例如：<div class="orange">I am P1</div> <p class="orange">I am P2<
css派生選擇器、id選擇器、類選擇器、屬性選擇器
1.派生選擇器 也叫上下文選擇器，可以根據上下文關係來定義樣式。無需為特別為元素設定id 或者class，使程式碼更簡單。 例如.希望列表中的，<strong>變成斜體。 li strong { font-style: italic; font-weight:
h5學習之7(html中的高階選擇器的種類和用法，a標籤和img標籤)
一.html中的高階選擇器的種類和用法 1.id選擇器 語法：#id名稱{樣式1；樣式2；} 書寫的位置：head標籤中的style <div id="qq">id選擇器 </
2.1 CSS一些常見的屬性&&選擇器
cascading style sheet css是cascading style sheet 層疊式樣式表的簡寫。 一些常見的屬性 字元顏色： color:red; color屬性的
css3學習之：transform
transform用於處理元素變形 1、translate：主要用於物件平移，兩個引數，第一個引數對應X軸，第二個屬性對應Y軸，如果第二個引數未提供，預設值為0 如tansform:translate(10px,10px); 2、rotate:主要2D旋轉,需要先有t
Python學習之旅—Day07(生成器與叠代器)
討論 三次 iterable 結果 fis post 工作 映射 我們 前言 本篇博客主要專註於解決函數中的一個重要知識點——生成器與叠代器。不管是面試還是工作，生成器與叠代器在實際工作中的運用可以說是非常多，從我們第一天開始學習for循環來遍歷字典，列表等數據類
jquery的基礎知識復習(基礎選擇器，屬性選擇器，層級選擇器)
兩個 不包含 註意 空格 如果 頁面 pre log cnblogs 1.基礎選擇器 id選擇器： $("#id"), 樣式選擇器：$(".className"),元素選擇器：$("div"),$("*") 選擇頁面所有的元素
web前端學習之css
使用 改變 過多 mark tro blog css url 提高 css概述： CSS （Cascading Style Sheets）是層疊樣式表用來定義網頁的顯示效果。可以解決html代碼對樣式定義的重復，提高了後期樣式代碼的可維護性，並增強了網頁的顯示效果功能。簡單
Panda的學習之路（2）——pandas選擇數據
定義 對比 pan panda pri 學習之路 進行 strong 比較 首先定義panda dates=pd.date_range(‘20130101‘,periods=6) # print(dates) df=pd.DataFrame(np.arange(24).r
selenium選擇器_css屬性選擇器
bmi aid self c4c bind button lec earch ear 搜索 <button class="btn-search tb-bg" type="submit" data-spm-click="gostr=/tbindex;locaid=d1
React學習之旅----獲取自定義屬性
獲取自定屬性，在小程式中可能更常用，在React中同樣也是可以獲取的，看例項 import React, { Component } from 'react'; class Event extends Component { constructor(props) { super(pr
機器學習之高斯貝葉斯分類器gaussianNB
機器學習之高斯貝葉斯分類器gaussianNB # -*- coding: utf-8 -*- """ Created on Sun Nov 25 10:55:17 2018 @author: muli """ from sklearn import naive_b