行內樣式新增多個style屬性,只會載入第一個style裡面的樣式
行內樣式新增多個style屬性,只會載入第一個style裡面的樣式;
很懵逼,不知道我說的是啥?
舉個栗子:
<p style="style1" style="style2" ....>====XXX文字內容XXXX====</p>
今天調整一個元素的樣式,我在頁面上直接調的時候能正常顯示,但是我把style對應的樣式新增到標籤內的時候,發現頁面上的元素死活都沒有我新增的新樣式,帶著疑問做了幾個測試,發現是我多寫了個style,預設只會載入第一個style,哈哈,一般人都不會犯這個錯誤的;
測試1: 頁面上有三個li,每個li新增一個style樣式,頁面正常顯示;
測試2:給同一個元素,新增兩個style樣式
-
兩個style設定不同的字型顏色,後面的style不會覆蓋前者;
-
測試發現,頁面只能載入到第一個style樣式,第二個style不載入;
測試3:同一個style,裡面相同的樣式屬性後者會覆蓋前者;
-
如圖,會發現第一個li,字型是粉色的,兩個color值都有,但後者顯示,前者未顯示,說明後者覆蓋前者相同的屬性;
綜上小結:
- 一個標籤內,只能有一個style屬性;
- 多個style,只載入第一個style,後面的不載入;
- 一般沒人這樣寫,也不會出這種錯誤;
- 同一個style,設定相同的樣式屬性,後者的會覆蓋前者的屬性值;
- 頁面上兩個樣式屬性都會載入到,但顯示的是後者的屬性值對應的樣式;
相關文章
- vue style樣式失效Vue
- 繫結class樣式和style樣式
- js dom元素樣式設定相關style屬性介紹JS
- addClass()新增多個樣式屬性程式碼例項
- vue-class和style樣式繫結Vue
- js style方式設定元素的樣式JS
- Android樣式的開發:Style篇Android
- javascript使用style方式設定元素的樣式JavaScript
- Android樣式(style)和主題(theme)Android
- JavaScript style 屬性JavaScript
- HTML style 屬性HTML
- vue樣式寫在data中,作用在:style上Vue
- WordPress模板層次05:style.css樣式表CSS
- 列印分頁css樣式,style=”page-break-after:always;”CSS
- jQuery—頁面內容,樣式,控制屬性jQuery
- css字型樣式屬性CSS
- list-style-image屬性用法
- Transform-style和Perspective屬性ORM
- List-style-type屬性失效
- (中級)快捷樣式屬性
- CSS內聯樣式的使用,設定字型屬性CSS
- CSS Cascading Style Sheets 層疊樣式表:CSS瞭解 (一)CSS
- 強制修改CSS的屬性styleCSS
- vue中慎用style的scoped屬性Vue
- Android 樣式屬性的使用Android
- CSS常見樣式和屬性CSS
- uniapp轉譯微信小程式動態樣式語法問題(:style)APP微信小程式
- list-style-type屬性用法介紹
- shopify 屬性新增圖片及樣式
- CSScursor屬性改變滑鼠的樣式CSS
- javascript基礎(樣式的操作,瀏覽器相容樣式操作,其他的樣式相關屬性,滾動的樣式)(三十)JavaScript瀏覽器
- 如何為要被列印的內容設定CSS樣式屬性CSS
- 通過js一次性為元素設定多個樣式屬性JS
- 使用cssText為元素一次設定多個樣式屬性值CSS
- css屬性與js中style物件的屬性對應表CSSJS物件
- CSS——CSS 給文字加樣式:① 字型屬性CSS
- CSS——CSS 給文字加樣式:② 文字屬性CSS
- JQuery屬性與樣式——樣式操作.css()和元素資料的儲存.data()jQueryCSS